navbar question

[Eric]

Trying to code a navigation bar horizontally to fit the exact length of the wrapper. I'm just using a rectangle background on each link. I originally planned on using making each button the same size, but the links range from 3 letters to 10 letters, and it just looks uneven. I thought about setting the width by adjusting the margin on each link itself, but that will fall apart if someone increases the text size, right? How is the best way to code this. Sorry, no example right now, son is waking up.

 

[PixelPusher]

Eric, I would create a list (ul) with 100% width and add the bg style to it. Then add the links (a) into each list item (li). Float the list items left, and use left and right margins on the links to add even space between them. Also set the link style to "block", this will make the clickable area larger than just the text itself. I will post an example in a bit.

 

[PixelPusher]

Here is an example of the top of my head:

<ul class="navbar">
   <li><a href="">Link1</a></li>
   <li><a href="">Link2</a></li>
   <li><a href="">Link3</a></li>
   <li><a href="">Link4</a></li>
</ul>

ul.navbar {
   background: #555 url(imageForAllBtnsIfNeeded.png) repeat-x;
   width:100%;
   height:45px;
   margin:0;
   padding:0;
}
ul.navbar li {
   float:left;
   list-style-type:none;
   margin:0 5px;
}
ul.navbar a:link, ul.navbar a:visited {
   display:block;
   height:45px;
   width:auto;
   line-height:45px;
   padding:0 3px;
   font:bold 9pt Verdana, sans-serif;
   color:#555;
   text-align:center;
   text-decoration:none;
}
ul.navbar a:hover, ul.navbar a:focus{
   text-decoration:underline;
   outline:0;
}

 

[Eric]

That works well, thanks! I'm left with 3 or 4 pixels between the last button and the edge of the wrapper however. I'm perfectly willing to just adjust one of the buttons, but what's the best way? I don't want to make an extra div just for that.

 

[aksdesigns]

Don't use an image is it's just going to be a rectangle background color!

style it up!

background-color:

 

[PixelPusher]

That works well, thanks! I'm left with 3 or 4 pixels between the last button and the edge of the wrapper however. I'm perfectly willing to just adjust one of the buttons, but what's the best way? I don't want to make an extra div just for that.

I would think that the "width:100%" on the UL itself should eliminate that issue, if it hasn't set the width of the UL to the same width of the wrapper. That will fill your gap. Do you a link to the page so we can see the markup?

 

[PixelPusher]

Don't use an image is it's just going to be a rectangle background color!

style it up!

background-color:

The background style was shorthand so it assigns a color of #555 and also an image, in case he wanted to add an image.

Eric,
if your not going to use an image, and instead only a solid color, then change the UL background style to:

background-color:#yourHexColor;