Search code examples
htmldocument-body

Div Tag Does Not Change Position According to Position Specified


I'm a student in the process of learning HTML and have been having difficulty positioning a div tag. When I try to change the position (I need it to be "position:fixed;") it doesn't move. What I've gathered from other threads is that the div tag is positioning itself relative to the body, however if it has the position set to fixed, shouldn't it be fixed?

Note: This is all messy because I am still trying to learn the language. I included the entire HTML file just in case something else is causing the error. There is no CSS file involved yet in the document.

Below is the part I am trying to get to work. Thanks in advance.

a{position:fixed;}
<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
  <a href="home.html" style="left:40px">Home</a>
  <a href="portfolio.html" style="left:90px;">Portfolio</a>
  <a href="links.html" style="left:140px;">Links</a>
  <a href="contact.html" style="left:190px;">Contact</a>
</div>

body{font-fmaily:Times New Roman;}
h1,p{text-align:center;}
a{position:fixed;}
<!DOCTYPE html>
<html>
<head>
  <title>Jem Jolly</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <div> 
    <img src="Random Banner.png" alt="Random Banner"  style="position:fixed;left:130px;top:43px"/> 
  </div>

  <div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
    <a href="home.html" style="left:40px">Home</a>
    <a href="portfolio.html" style="left:90px;">Portfolio</a>
    <a href="links.html" style="left:140px;">Links</a>
    <a href="contact.html" style="left:190px;">Contact</a>
  </div>

  <div>
    <div style="background:#A7DbD8;position:fixed;height:300px;width:600px;top:175px;left:20px;border:3px solid #19B3B0">
      <h1 style="font-family:cooper black;">JEM JOLLY</h1>
      <p>JEM JOLLY Founded in 2000, Jem Jolly started as a small, family-owned jewelry store. All of our products were hand-crafted by local artists, metalsmiths, and bead workers. Since our humble beginnings, we have grown into a nationwide company with distributors, retailers, and other wholesalers representing us and our products in 20 states, as well as Canada and the UK. Check out our retailer list <insert link to retailer page once it is created> for locations near you.</p>
      <p>We also take custom orders. Feel free to send us specific instructions for custom orders through our contact form <insert link to contact page once it is created>, if you are interested in a unique item for that special someone!</p>
      <p>Jem Jolly is pleased to be your supplier of finely crafted, high-quality jewelry that is timeless, eye-catching, and unlike anything you've seen before.
    </p>
    </div>
  </div>

  <div>
    <div style="background:A7DbD8;position:fixed;height:240px;width:320px;top:175px;left:640px;border:3px solid #19B3B0">
      <video width="320" height="240" controls>
        <source src="intermediate_web_design_U4L3_vid 10-39-13.mp4" type="video/mp4"></source>
      </video>
    </div>

  </div>

  <div style=width:500px;height:100px; position: relative;">

    <img src="rsz_3logo.png" alt="Random Logo" style="left:20px;top:43px"/>

  </div>

</body>
</html>


Solution

  • You have misspelled the word position

    CODE

    <div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
    

    Fix to

    <div style="background:#A7DbD8;position:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
    

    Are you working with some kind of an editor? If you are working with just notepad you are going to get mad with those short of tiny errors. Get yourself a decent editor...

    Also, you don't need all of those menu items in fixed position, its enough that the parent element is fixed.