Navigation bar

[Sirax]

Hey all,I have a small issue with my navigation bar...Here you can see the screen how it's shown now:HEREAs you can see, the Webshop button is on the left side underneath the Home button, but the button should be at the end next to Contact.This is the HTML:

	<div id="navigation"><!-- NAVIGATION STARTS -->	<ul class="navigation_links">	<li id="current"><a href="#">Home</a></li>	<li><a href="#">Producten</a></li>	<li><a href="#">Diensten</a></li>	<li><a href="#">Specialisatie</a></li>	<li><a href="#">Contact</a></li>	<li><a href="#">Webshop</a></li>	</ul>	</div><!-- NAVIGATION ENDS -->

and the CSS:

#navigation { float: left; height: 33px; margin-top: 10px; margin-bottom: 15px; }.navigation_links li { background-image: url(../images/nav_buttons.png); background-position: center top; background-repeat: no-repeat; float: left; width: 154px; height: 33px; margin-right: 5px; }.navigation_links li a { color: #473636; font-size: 14px; text-align: center; text-decoration: none; line-height: 31px; display: block; float: left; width: 154px; height: 33px; }.navigation_links li a:hover, li#current { background-image: url(../images/nav_buttons.png); background-position: center bottom; background-repeat: no-repeat; color: #FFF; }li#current a { color: #FFF; }

As you can see I'm using a container of 950px (between that must be the navigation so it's nice centered in the page). But between every button must be a space of 5px... So when i place that margin-right: 5px; he goes over the 950px container and therefore he places the last bottom underneath.Is there a way to fix the kind of problem?

[thescientist]

what about reducing the width of the nav buttons to compensate? It seems like you need (width of button + 5px margin right) * (# of buttons) <= 950px, right?

[dsonesuk]

6 x 154 = 9246 x 5 = 60total 984can you see problem now, 950px compared to 984px

[Sirax]

Yeah, but i want to work with 950px, because my hole layout in photoshop is made in 950px width.

[dsonesuk]

then you will have to reduce button width size -5px for right margin width, so it will fit between 950px container.ordo it such a way that the image adjust automatically to width of text, with padding either side, plus margin right, instead of fixed width.

[mgason]

6 x 5 = 60 ?????I could be wrong but shouldn't the math be....6 x 154 = 9246 x 5 = 30total 954if it is reducing your margin to 4 would fix the problem6 x 154 = 9246 x 4 = 24total 948

[dsonesuk]

yep thats totally wrong, i originally calculated with 5px margin either side took out the x2, forgot to adjust total, either way still comes out greater than 950.

[Sirax]

Oke when I reduced the margin right from 5px to 4px, all buttons are now indeed on the same line..., but they are not 100% centered.On the left side they are good, but on the right side not, it jumps 4px into the container, but it must be on both sides equal with the container width.I calculated this in Photoshop... container: 950px , each button: 154px , space between each button: 5px... and all is nice centered, so you guy's telling me there is no way to get this in HTML/CSS ?

[cousineaug]

Oke when I reduced the margin right from 5px to 4px, all buttons are now indeed on the same line..., but they are not 100% centered.On the left side they are good, but on the right side not, it jumps 4px into the container, but it must be on both sides equal with the container width.I calculated this in Photoshop... container: 950px , each button: 154px , space between each button: 5px... and all is nice centered, so you guy's telling me there is no way to get this in HTML/CSS ?

From what I can see, there is no LEFT margin in your container. When you add a margin-right to each element, you are adding 5 (or 4) pixels to the right side but not to the left.Try targeting either the first-child with a left margin or the last-child with no right margin:

.navigation_links li:last-child{margin-right:0px;}

i.e. the last li element in the class of navigation_links will have no right margin. Then you need to recalculate your totals154 x 6 = 9245 x 5 = 25 ------- 949?if this works out for you in compliant browsers, you just need am IE workaround until it also supports first-child last-child. So you save the code for later and try an IE workaround- if you can get it to work in IE, it will probably work in other browsers.You could try assigning left-right margins to the container and specify "overflow:hidden" to let trailing margin/padding disappear on the right. You might have to combine with " white-space:nowrap; ":

#navigation { float: left; height: 33px; margin-top: 10px; margin-bottom: 15px;				margin-left:0px; margin-right:0px; white-space:nowrap; overflow:hidden;}/*second line not tested*/

Then you need to test in 7 browsers to see how it turns out.good luckGuy

[dsonesuk]

the left side of first button is butted upto left edge, from the first to the last button the total width should be 948px, meaning you have only have 2px to play with, adding this to the left of the first button will help but it is still not truly centered (first button left edge margin 2px, last button margin right 4px).you need to target the first and last nav buttons to reduce their left/right margins to 3px, you could use firstchild, lastchild pseudo class to achieve this, but i find its not implement in some browsers, so you will have to use an id ref to target these buttons. note i changed id current to a class instead.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#wrapper {width:950px; overflow:hidden;}#navigation ul, .navigation_links li { list-style:none;padding:0; margin:0;}#firstnav{margin-left:3px;}#lastnav{margin-right:3px;}#navigation { float: left; height: 33px; margin-top: 10px; margin-bottom: 15px; }.navigation_links li { background-image: url(../images/nav_buttons.png); background-position: center top; background-repeat: no-repeat; float: left; width: 154px; height: 33px; margin-right: 4px; }.navigation_links li a { color: #473636; font-size: 14px; text-align: center; text-decoration: none; line-height: 31px; display: block; float: left; width: 154px; height: 33px; }.navigation_links li a:hover, li.current { background-image: url(../images/nav_buttons.png); background-position: center bottom; background-repeat: no-repeat; color: #FFF; }li.current a { color: #FFF; }</style></head><body><div id="wrapper">	<div id="navigation"><!-- NAVIGATION STARTS -->	<ul class="navigation_links">	<li class="current" id="firstnav"><a href="#">Home</a></li>	<li><a href="#">Producten</a></li>	<li><a href="#">Diensten</a></li>	<li><a href="#">Specialisatie</a></li>	<li><a href="#">Contact</a></li>	<li id="lastnav"><a href="#">Webshop</a></li>	</ul>	</div><!-- NAVIGATION ENDS --></div></body></html>