Dynamic Drive CSS Library- CSS Thick Tabs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

CSS Library: Horizontal CSS Menus: Here

CSS Thick Tabs

Author: Dynamic Drive

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 (63)

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 7 pages « First < 4 5 6 7 >

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

I can see that you are putting a lot of time and effort into your blog and detailed articles! I am deeply in love with every single piece of information you post here. Will be back often to read more updates!
Hill Country Lots, Land & Homes

Posted by Hill Country Ranches Homes on 10/24, 02:21 AM

Thank you for sharing this information. I am really glad that there are volunteers like you who are willing to help others. I am sure all the css lovers will thank you for this.

Posted by Toronto Condos on 11/20, 12:19 AM

Now when I Twitter it updates my Facebook status, so I’m relying on Facebook for overall gateway but enjoy the text from phone status updates to Twitter. real estate buyer consultant

Posted by house values on 12/27, 11:17 PM

I'm getting a little confused from reading some of the other comments. I think I should just stick to your instructions.

Posted by hdtv antenna on 01/22, 05:56 PM

Very nice menu - but does it have to be Pink? Can we get a few more colours on hand instead of having to convert the colour ourselves?

Thanks!
Alex

Posted by Alex on 01/24, 06:11 PM

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

Commenting is not available in this weblog entry.