If you have followed my last tutorial, you must have these two tiny pictures with you.
Photobucket Photobucket

Let's say the first one is "tabLeft.gif" and the second one "tabRight.gif".

HTML:


This is the crude HTML we are going to use:

<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Colophon</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>

The CSS:


ul { list-style:none;}
li { float:left; /*this is to make the list horizontal*/
padding:2px; /*just to make the tabs a little distance apart. you can delete this line as well*/
color:black;
font-size:11px;
}
li a{
background: transparent url("tabLeft.gif") no-repeat top left;
display:block;
padding-left:6px; /*this is the width of tabLeft.gif*/
}
li a span{
background: transparent url("tabRight.gif") no-repeat top right;
display:block;
padding:13px 6px 12px 0px;/*I'll explain later in the post.*/
}
li a:hover{
background-position:0% -36px;
}
li a:hover span{
background-position:100% -36px;
}

Explanation:

Ok. I think the first 3 blocks of codes are self-explanatory. Notice the way padding of the span is distributed. We have set the font-size to 11px. Now, if 36px is the height of the tabs, then the remaining height is 36px-11px ie 25px. So, we divide the remaining space with the padding-top being 13px and padding-bottom 10px.
Photobucket

The padding-left of anchor is set to 6px which is the width of tabLeft.gif. So, we set the padding-left of the span to 6px to make it look symmetric.
Photobucket

Must be wondering, why the we have a 'mirror image' of the tabs just below it. (I am talking about the lower portion if the tabLeft and tabRight.) Notice the background-position of a:hover and a:hover span. When the mouse is over the tabs, the background of the span and the anchor is shifted 36px down so that together they constitute a cool looking tab.

Try it yourself! :)

Labels:

blog comments powered by Disqus
Blogger techniqueal t. said...
wonderful tutorial! been looking for something like this in a long time, i.e. css menu that is easy to implement.

one question though: please correct me if im wrong but how does this work on drop down menus? would css dropdown menu successfully work on ie?

thanks for adding me up! love your blog ^_^