Tab menus

Let's begin at the beginning !

The XHTML part is the simpliest. Indeed, we are only going to create a menu using an unordered list with <ul> and <li>. Then, as in a menu there are necessarily links, we are also going to use the <a> tag. The attribute "class" will be useful to differentiate the current tab. The whole will be surrounded by a <div> tag.

Finally, we must get this:

Code: HTML

The three important elements are: the activation of a link with class="current", the tag <div id="menu"> that will enable us to position the menu in the page, and the tag <ul id="tabs"> that will be used to modify the style.

If we look at the result of this code, we get this:



As you can see, it's a very simple menu.

We are now done with the XHTML part. It hasn't been very complex so far , don't worry the following will not be much harder !

Now, the question is:


Let's go to the code directly, I'll explain it after

Code: CSS

Here, I change the font, I remove the list bullets and I set a border at the bottom of the list items. The padding-bottom indicates the "height" of the bottom border. To help you to understand, change its value and it'll be clearer! I also removed the left margin so the menu is at the left side of the page.

Code: CSS
Here, I create my tabs . They are within <li> tag, therefore I must select them using #tabs li. I create my tabs with: border:1px solid #9EA0A1. I also add a small margin so the cells and the text are spaced.

The float : left is used to align the tabs horizontally.


You also must specify the height of the cell.


Both margin's are required because Internet Explorer doesn't interpret CSS like other browsers!
We are getting closer from our goal!


Let's move on, it's nearly finished!

Code: CSS
Now, I select the tabs with the id: "menu". As each tab is surrounded by <li> tags, I select them too. And I select the class: "current" to modify only the activated tab.
I set a background color and I add a border at the bottom of the cell which will cover the existing one.

Code: CSS

Here, I'm working on the links within the tabs. I display them as block elements, it enables you to click wherever in the tab to activate it. Its color is also specified here. The text-decoration : none removes the default underlining of links. Finally, I set an inner margin with padding : 4px.

The final touch: the background color changes when the mouse hovers a tab. Therefore, we must select the a:hover link within #tabs.

Code: CSS

Phew, we did it !

Ultimately, we should get this (with the background getting white on mouse hover):


Isn't it great?

Now, feel free to make your own tab menus!

Then, how do I position this menu in the page?

It's pretty difficult to position it at the wanted place if you don't know the trick. The trick I'm going to show you give the same result with Internet Explorer, Opera, and Firefox.


It consists in creating a block element containing the tabs and in positionning it in the page.
To do this, the XHTML doesn't change!
In the CSS code, you need to add:

Code: CSS
This creates the horizontal line across the screen. The padding-bottom places it at 25 pixels from the top of the page.

In the first CSS code, there was #tabs. You need to erase it all. We are going to rewrite it.
That's where we set a border around the tabs. In order not to see it on display, the color is transparent. Like in the first code, we remove the list bullets and we select a font.

We obtain:

Code: CSS
The padding : 0; is used to remove space between the block and the tabs.
The margin-top : 0; places the tabs on the horizontal line. To enable you centering the tabs, it's important that the block has the menu width. Here, it's 430px, therefore the block width is: width : 430px;.
To center the menu in the page, simply use left : 50%; that places the block at 50% from the left side (in the middle).


Indeed, the left : 50%; places the left side of the block at 50%. To solve it, simply remove the half of the block width to the left margin. Therefore, you need to add in #tabs:

Code: CSS

The menu is now centered with every browser!