Dynamic Drive CSS Library- CSS Thick Tabs

CSS Library: Horizontal CSS Menus: Here

CSS Thick Tabs

These CSS menu tabs come with thick top/bottom padding to achieve that attractive cushioned look. Setup is very easy- each menu link simply carries a gradient background image that is changed to a darker version of the original when the mouse rolls over each menu item.

Demo:

The two images used (resized horizontally):

Dimensions- 50px by 59px

The CSS:

<style type="text/css">

#thicktabs{
margin: 0;
padding: 0;
float: left;
font: bold 13px Tahoma;
}

#thicktabs li{
display: inline;
}

#thicktabs li a{
float: left;
color: black;
padding: 8px 11px; /*padding of tabs*/
text-decoration: none;
background: transparent url(media/pinkbg.gif) top right no-repeat;
border-top: 1px solid #d3bdbe; /*top border style*/
border-bottom: 3px solid #ffa1a3; /*thick bottom border below tabs*/
}

#thicktabs li a#leftmostitem{ /*Extra CSS for left most menu item*/
border-left: 1px solid #d3bdbe; /*left border style*/
}

#thicktabs li a#rightmostitem{ /*Extra CSS for right most menu item*/
border-right: 1px solid #d3bdbe; /*right border style*/
background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/
}

#thicktabs li a:visited{
color: black;
}

#thicktabs li a:hover{
color: black;
background-image: url(media/pinkbgover.gif); /*background image swap on hover*/
}

</style>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->

The HTML:

<ul id="thicktabs">
<li><a id="leftmostitem" href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<br style="clear: left" />
<p class="iepara">Paragraph that follows...</p>

Code Info

Rate this code:

Date Posted: 11/12/2006

Revision History: None

Usage Terms: Click here

Your Comments (60)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 6 of 6 pages « First < 4 5 6

another person asked the same question, sorry, I am learning CSS, where is the #rightmostitem coded in the html?

Posted by Jorge on 02/15, 05:19 PM

very nice font

Posted by cam filmi on 03/23, 09:05 AM

beuatiful color

Posted by plastik kart on 03/23, 09:07 AM

looks great on my clients website...

Posted by Husain on 03/24, 11:31 AM

If any of you have Microsoft Picture manager if you dont like the colour you can change it. Just at the top click 'Colour' and then move the top slider to full. then you can change the second one to adjust the colour. This is in the 2007 version. Not sure about the older versions, through.

Posted by Husain on 03/24, 11:33 AM

Thanks a ton, your codes saved me from having to search near and far for the same. Thank you so much for the explanation as well!

Posted by karthik cmouli on 04/13, 01:07 AM

thanks 4 this menu but isn't working the background
becuse the space betuen the links

Posted by aljremh on 04/26, 04:43 PM

I'm not very known with CSS.. And I've no Idea what 2 do. I put the CSS code in the html's 'head' and the HTML code in the body... Is this wrong? Because I only get a pink stripe under the link. The table is not painted pink... HELP ME! what am I doin wrong?

Posted by Toronto Condos on 04/30, 08:47 AM

Really fantastic menu. I'd love it.

Posted by Djacir Porto on 05/26, 10:06 PM

Thank you for this!

Posted by stein on 05/30, 03:47 AM

Comment Pages 6 of 6 pages « First < 4 5 6