CODEWITHSUNDEEP
htmlcss
anon
anon

Reputation:

position absolute html and css problems

I want to have a menu on a fixed position, even when I scroll, etc.

I used "position: absolute;" (also tried :fixed;). Both had the same error.
(I had to set up "left/right/top: 0%", because I had a bit of freespace on each side.)

I wanted to continue with the next div, which is outside of #headercontainer, but I got a problem there. The next div doesn't start "under" the menu, but on the same position.
In short, these 2 divs overlap each other.

I could fix that with margin... but I think I did something wrong! Since the next div part also needed the left/right 0% and also a position alignment or I would have got these free spaces on both sides again.

HTML:

<body>
  <div id="headercontainer">
    <div id="logo">
      <a href="">
        <img src="images/logo/logo.png" id="headlogo" />
      </a>
      <h1>Robert</h1>
    </div>

    <nav role="navigation" class="navigation">
      <ul>
        <li> <a href=""> ABOUT ME </a></li>
        <li> <a href=""> SKILLS </a></li>
        <li> <a href=""> WORK </a></li>
        <li> <a href=""> CONTACT </a></li>
      </ul>
    </nav>
  </div>
</body>

CSS:

#headercontainer{
  position: absolute;
  top: 0%;
  right: 0%;
  left: 0%;
  background: #000;
  opacity: 0.7;
  color: #fff;
  -moz-box-shadow: 2px 2px 15px #000;
  -webkit-box-shadow: 2px 2px 15px #000;
  box-shadow: 2px 2px 15px #000;
}

Upvotes: 0

Views: 5710

Answers (3)

Simon Arnold
Simon Arnold

Reputation: 16157

Try using position: relative; with margin: 0; and padding: 0;
If it's not working, it means that the spaces on both sides comes from the parent <div>.

#headercontainer{
  position: relative;
  float: left;
  width: 100%;
  background: #000;
  opacity: 0.7;
  color: #fff;
  margin: 0;
  padding: 0;
  -moz-box-shadow: 2px 2px 15px #000;
  -webkit-box-shadow: 2px 2px 15px #000;
  box-shadow: 2px 2px 15px #000;
}

Upvotes: 1

ponysmith
ponysmith

Reputation: 427

The extra space on the top and sides is likely due to default padding/margin on the body. Make sure you're clearing those in your CSS or use a CSS reset:

Then, add position: fixed and a set height to your headercontainer and add a corresponding top margin to the body to make sure they don't overlap:

/* Reset margins -- or use a CSS reset */
html, body { margin: 0; padding: 0}

/* Fix the header container to the top */
#headercontainer { position: fixed; top: 0; left: 0; right: 0; height: 80px }

/* Add a matching top margin to your body element */
body { margin-top: 80px }

Upvotes: 1

Trojan
Trojan

Reputation: 2254

Use position:fixed and give the element a height. Then at the top of your <body>, insert something like this:

<div id="push" style="height:/* height of menu */"></div>

It's an empty block that "pushes" the content down by the height of the fixed element.

OR

Put everything other than the menu in a containing div, and give that div

margin-top:/* height of menu */"

Upvotes: 0

Related Questions