I am a programmer first, designer second ... so I struggle with my css, and often resort to tables ... so be patient with me! =)

I am trying to create a tab-like interface for a web application I am making. I have the following HTML code:

<div id="nav">
    <ul>
        <li><a href="#">Knowledge</a></li>
        <li><a href="#">Favorites</a></li>
        <li><a href="#">Research</a></li>
        <li><a href="#">Users</a></li>
        <li><a href="#">System</a></li>
    </ul>
</div>

My CSS code is:

#nav
{
    text-align: center;
    background-color: black;
    padding: 10px 0px 10px 0px;
}

#nav li
{
    background-color: orange;
    display: inline;
    font-size: 130%;
    padding: 10px;
}

The results are in the attached screen shot. All I want to do is have my tabs take up the same space as the containing DIV and eliminate the spacing between the tabs, I'd like to control the spacing with CSS.

Your help would be greatly appreciated!

Update I'd like to do this with out a predetermined height or width for the tabs, if possible ... and I need the tabs centered.

Note: These aren't the actual colors I am going to use ... just a means for me to better visualize the separation! =)

9 answers

2
points
This was chosen as the best answer

Just remembered a 24ways article from a couple of years back that describes how to properly do centered tabs. It's similar to what you have, but with a few tweaks.

24 ways: Centered Tabs with CSS

Answered over 7 years ago by Mads Kjaer
4
points

The most common way to create these tabs is to float the LI's to the left and float the links to the left as well. You could then figure out the total width you need for your tabs and set it on #nav and then apply "margin: 0 auto" to position #nav in the center. And to make things easy for you, set however much height you need for the Tabs. There are a lot of examples you can find on Google. Here is one set of examples http://htmldog.com/articles/tabs/

Answered over 7 years ago by Efficient Pixel
2
points

I would recoment you float the tabs so that you can work with block level elements (more controll over margin and padding).

Try adding this CSS:

#nav
{
    text-align: center;
    background-color: black;
    padding: 10px 0px 10px 0px;
    overflow: hidden; /* or auto, contained float fix */

}

#nav li
{
    background-color: orange;
    float: left;
    font-size: 130%;
    padding: 10px;
    margin: 0 10px 0 0;

}

You could add a contained float fix on the UL to if you need that element for background effects or the like. Contained floats fix makes the container of floated elements to wrap the content instead of collapsing (wich is the default behaviour as floated elements are excluded from the normal flow).

Also, you could consider removing the #nav div and putting the ID on the UL instead, just to make the code more light-weight.

However, the above solution does not center the tabs.

Answered over 7 years ago by Jens Hedqvist
1
point

Just a tip, your <div id="nav"><ul>... can be simplified to <ul id="nav"> or if possible, just <ul>

Answered over 7 years ago by Russell Bishop
1
point

The following might help you.

#nav {
    text-align: center;
    background-color: black;
    height: 4em; /* With a base font size of 10px = 40px */
}

#nav li {
    background-color: orange;
    display: inline;
    font-size: 1.3em; /* Using ems for consistency */
    line-height: 3.0769em; /* 40px divided by 13px (font size) */
}

Basically you define the height of the nav and use line-height to center the text accordingly.

Answered over 7 years ago by Mads Kjaer
1
point

The problem w/ "display:inline" is that the elements will not perfectly bump up against each other and then there are issues w/ adding padding to an inline element. The added padding will push the boundaries of the inline element outside of its parent element. This is why floating elements works well. I was playing around and came up w/ something that could work, but unfortunately I have not had enough time to do browser testing.

Try this: (I was able to get "Block" elements to center-align by using "inline-block", but I am not positive it will work in all browsers or if there is a work around for IE. If this isn't supported in some versions of IE, it may just depreciate to a normal floated tabbed navigation)

#container-nav {
width:800px;
border:1px solid #333;
margin:0 auto 50px auto;
text-align:center;
}
#nav-main {
list-style:none;
margin:0;
padding:0;
display:inline-block;
}
#nav-main li {
float:left;
margin:0 2px 0 0;
}
#nav-main li a {
float:left;
padding:4px 12px;
background-color:#777;
color:#fff;
text-decoration:none;
}
#nav-main li a:hover {
background-color:#333;
}
*+html #nav-main li {
float:none;
display:inline;
 margin:0 -1px 0 0;
 }
 *+html #nav-main li a {
 float:none;
 display:inline-block;
  }
Answered over 7 years ago by Efficient Pixel
0
points

These aren't the actual colors I am going to use ... just a means for me to better visualize the separation! =)

I wish I could delete this ... meant it more like a comment.

Answered over 7 years ago by mattruma
0
points

@Efficient Pixel What if I don't know the exact width of my tabs? The number of tabs is dynamic and I really need the tabs centered in the containing DIV. I also would like to do this without any height or width predetermination ... if that is even possible.

Answered over 7 years ago by mattruma
0
points

Thanks @Mada Kiser that got me closer ... I have the following now:

#nav
{
    background-color: black;
}

#nav ul
{
    background-color: blue;
    padding: 12px;
    text-align: center;
}

#nav ul li
{
    display: inline;
    font-size: 130%;
    margin: 0px 5px 0px 5px;
}

#nav li a
{
    background-color: orange;
    padding: 10px;
}

The only thing I found odd, and not sure why, is that I had to give the UL a padding of 12px, I thought 10px would do the trick, but it left part of the tabs hanging outside the container. Any idea why?

Answered over 7 years ago by mattruma