Hi pros,

yes, I searched the forum and also the web, but as a newbie I haven't figured it out yet - unfortunately.
I have both a custom header and Navbar. The header is a jpg. which spans over the whole webpage (980px) and can be found here:
http://www.shutterbits.com/photos/i-...PbDbLjs-X3.jpg

I created the Navbar based on the tutorial and it should be placed right above the white line in the header to look like this (no matter how big the browser window is):
http://www.shutterbits.com/photos/i-...Mz3sSRD-X3.png

I currently inserted the Navbar as a float, however it doesn't help me if the browser is bigger (wider) than 980px.
I tried a couple of CSS positioning but can't figure it out.

Any suggestions from the pros?

Thanks a lot!

Josti


www.shutterbits.com

Originally Posted by Josti Hi pros, yes, I searched the forum and also the web, but as a newbie I haven't figured it out yet - unfortunately. I have both a custom header and Navbar. The header is a jpg. which spans over the whole webpage (980px) and can be found here: http://www.shutterbits.com/photos/i-...PbDbLjs-X3.jpg I created the Navbar based on the tutorial and it should be placed right above the white line in the header to look like this (no matter how big the browser window is): http://www.shutterbits.com/photos/i-...Mz3sSRD-X3.png I currently inserted the Navbar as a float, however it doesn't help me if the browser is bigger (wider) than 980px. I tried a couple of CSS positioning but can't figure it out. Any suggestions from the pros? Thanks a lot! Josti www.shutterbits.com

See if this works, check other browsers.

#navcontainer {
   margin: 38px auto 0;
   position: relative;
   left: -350px;
}

#my_banner {
display: none;
width: 980px;
height: 89px;
margin: -50px auto 0;
background: url(http://www.shutterbits.com/photos/i-PbDbLjs/0/X3/i-PbDbLjs-O.jpg) no-repeat;
}

Originally Posted by Allen See if this works, check other browsers. #navcontainer { margin: 38px auto 0; position: relative; left: -350px; } #my_banner { display: none; width: 980px; height: 89px; margin: -50px auto 0; background: url(http://www.shutterbits.com/photos/i-PbDbLjs/0/X3/i-PbDbLjs-O.jpg) no-repeat; }

That's awesome! It is what I was looking for! Thanks for your quick response. Would it be possible to shift the Navbar a little closer to the white line? So that it has about the same distance to it than the "shutterbits" in the banner?

Originally Posted by Josti That's awesome! It is what I was looking for! Thanks for your quick response. Would it be possible to shift the Navbar a little closer to the white line? So that it has about the same distance to it than the "shutterbits" in the banner?

Play with the top margin.

#navcontainer {
    margin: 38px auto 0;
    position: relative;
    left: -350px; }

Originally Posted by Allen Play with the top margin. #navcontainer { margin: 38px auto 0; position: relative; left: -350px; }

Yes, got it! Played with the margins and it worked.

Thanks again! You made my day.

Josti