Hey there, I have a problem with my horizontal navigation bar.
I wanted to add a divider inbetween my links like this,
| Home | Contact Us | Staff | Reviews |
but my navigation bar only shows
| Home | Contact Us | Staff | Reviews
As you can see, at the last link, the last divider is gone. Please note that my divider is a background image divider of 2x50. Here are my code,
HTML
CSSCode:<div id="navigation"><!--NAVIGATION STARTS--> <ul class="nav-links"> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">work</a></li> <li><a href="#">forum</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li> </ul> </div><!--NAVIGATION ENDS-->
Test page: -Code:@charset "utf-8"; /* CSS Document */ /* NAVIGATION */ #navigation { float: left; height: 68px; width: 850px; } .nav-links li { display: block; list-style-type: none; float: left; background-image: url(-); background-repeat: no-repeat; background-position: left; } .nav-links li a { color: #666666; font-weight: bold; width: 108px; height: 42px; text-align: center; text-transform: uppercase; font-size: 12px; padding-top: 26px; float: left; text-decoration: none; list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/ margin-left: 2px; } .nav-links li a:hover { background-image: url(-); background-repeat: repeat-x; color: #0087c7; margin-left: 2px; }
I tried to find the solution myself but I just can't seem to make the last divider show up. Is there any problem with my CSS coding? Thanks!



Reply With Quote


Bookmarks