1 reply [Last post]
Last seen: 12 years 14 weeks ago
Timezone: GMT-5
Joined: 2010-02-11
Posts: 1
Points: 2

I really want this nav bar to stretch exactly the length of my web site but am having some strange margins show up on the right and left, as well as different layout from FF to IE. I've had to use padding for button size, but might have gone wrong there. There is also some interesting top/bottom margin/padding in order to get it to line up properly below the flash header.

Link: http://www.cholenapegues.com/bruno/index.html


#navcontainer {
margin-top: -16px;
background: url(images/nav-bg.gif) top left;
width: 100%;
border-left: 2px solid #333;
border-right: 2px solid #333;}

ul.nav {
float: left;
margin-top: 13px;
padding-top: 3px;
margin-right: 0px;
margin-left: 0px;
width: 100%;}

ul.nav li {
float: left;
position: relative;
list-style: none;
text-align: center;}

ul.nav a {
display: block;
text-transform: uppercase;
font-weight: bold;
padding: 5px 45px 5px 45px;
color: #333;
text-decoration: none;}

ul.nav a:hover {
color: #FFF;
font-weight: bold;
padding: 5px 45px 5px 45px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
background: url(images/navroll2.gif) top left;}

ul.nav a.current {
color: #FFF;
font-weight: bold;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
background: url(images/nav-on.gif) top left;}

I would really appreciate a little better durection than what I've managed. Thank you SO much!
Big smile

Stomme poes
Stomme poes's picture
Last seen: 10 years 29 weeks ago
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Also in Firefox : )

Well you need to watch out for this every time:

width: 100%;
border-left: 2px solid #333;
border-right: 2px solid #333;}

By default static boxes are 100% wide, but once you set an explicit width on ANYONE then adding stuff like side margins, side padding, or side borders means you're going to do the mathematical equivalent of eating more than 100% of a candy bar (which, of course, you can't do).

*edit, removing my old answer below... because your container is a static width.

So your answer's much easier: set % widths for your links. Measure the total width of the space the menu occupies, minus borders and stuff, and set the % widths accordingly. Try to keep it whole numbers or you may get browsers guessing (some round up, some round down) and looking weird.

DON'T set a width on the main menu, since you've got borders. Just widths on the floats.

Set all your dimensions on the li's for the DEFAULT state. On :hover etc only change what must be changed! You want to set as little as possible for the hovers.

To stop any jumping you get from adding-removing borders, you could have invisible borders at the outset and just change their colour to something you can see on :hover and :focus etc.

IE6 does not agree with border: 1px solid transparent so for IE we often say
border: 1px dashed transparent; because that magically works in IE6.

Then on hover change the border:
border: 1px solid #thecolour;
or even
border-style: solid;
border-color: #thecolour;
but I like one line myself.

Right now, not only are your floats too wide, but they get a bit wider when hovered. Shrink them a bit.

To center the text, give the floats text-align: center and give the anchors themselves a line-height equal to the height you want for the li's. This will stop padding from getting weird on you, because you won't be using padding (and now the text can change size a bit and still fit, whereas if you make text bold or something on :hover then that padding gets pushed further into the next link, causing float dropping).

I'm no expert, but I fake one on teh Internets