Horizontal Navigation

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

I'm trying to find out the beast way to do the following with css. I'm using a list currently, and

Attachments:
bar.jpg


This is what I have for my css so far.

CSS Code: [ Select ]
#navContainer {
    background-image: url(../../images/nbar.jpg);
    height:23px;
    width:900px;
}
#navContainer ul {
    list-style-type: none;
    padding:0;
    margin:0;
}
#navContainer ul li {
    display: inline;
    width: 180px;
    padding-left: 35px;
}
  1. #navContainer {
  2.     background-image: url(../../images/nbar.jpg);
  3.     height:23px;
  4.     width:900px;
  5. }
  6. #navContainer ul {
  7.     list-style-type: none;
  8.     padding:0;
  9.     margin:0;
  10. }
  11. #navContainer ul li {
  12.     display: inline;
  13.     width: 180px;
  14.     padding-left: 35px;
  15. }


The main problem I'm having is trying to get each link equally spaced out. The display inline is killing me. I can get the equal spacing if I use display block, but I need the navigation to run horizontally. I can use display table-cell for FF but IE7 doesn't support it.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6250
  • Loc: Seattle, WA

Post 3+ Months Ago

Specify equal margins for both sides of the <li> elements, rather than just the left padding.

Code: [ Select ]
#navContainer ul li {
display: inline;
width: 180px;
margin: 0 17px;
}
  1. #navContainer ul li {
  2. display: inline;
  3. width: 180px;
  4. margin: 0 17px;
  5. }
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

That doesn't quite work because each link in the text is a different size, so things are off by a little. However I did manage to fix it.

CSS Code: [ Select ]
#navContainer {
   background-image: url(../../images/nbar.jpg);
   height:23px;
   width:900px;
}
#navContainer ul {
   list-style-type: none;
   padding:0;
   margin:0;
}
#navContainer ul li {
   display: inline;
   float: left;
   padding-left: 35px;
}
#navContainer ul li a{
   display: block;
   width:145px;
}
 
  1. #navContainer {
  2.    background-image: url(../../images/nbar.jpg);
  3.    height:23px;
  4.    width:900px;
  5. }
  6. #navContainer ul {
  7.    list-style-type: none;
  8.    padding:0;
  9.    margin:0;
  10. }
  11. #navContainer ul li {
  12.    display: inline;
  13.    float: left;
  14.    padding-left: 35px;
  15. }
  16. #navContainer ul li a{
  17.    display: block;
  18.    width:145px;
  19. }
  20.  

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: minddigital and 68 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.