Jump to content

Navigation bar


Sirax
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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?

Edited by thescientist
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...