Dynamic Drive CSS Library- CSS Thick Tabs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Advertise Here

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 (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 3 of 6 pages « First < 1 2 3 4 5 > Last »

why, when placing this menu in a table row, there is space left under the menu, and I can't make the table row height the same as the menu?

Posted by Rob on 12/28, 06:21 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 Matt on 01/03, 10:33 AM

Matt: i think you did nothing wrong. did you saved the 2 images used (pinkbg.gif and pinkbgover.gif) into the directory where the codes are located? that should solve the problem....

Posted by shongaks on 01/09, 01:53 PM

im a noob so be easy :)

where is the "#rightmost item" coded in the html?

Posted by drret on 01/11, 12:22 AM

Very good, this script saved a lot of my time ..

Posted by wissam on 01/13, 08:12 PM

Great looking Menu.... Might just have to change the pink look though , its a little too pretty for my website.

Posted by john on 01/22, 09:46 AM

Everything I put here is ignored:

#thicktabs {
width:1024px;
margin: 0;
padding: 0;
float: left;
font: 11px Tahoma;
}

Font is not applied, nav is centered instead of aligned left, width is not respected.. I don't understand.

Posted by Koen on 01/27, 05:57 AM

Just a note to those asking how to make this menu go 100% across your page...

All you have to do is add the following code:

ul#thicktabs {
width:770px;
background-image:url(../img/nav/pinkbg.gif);
background-repeat:repeat-x;
border-top: 1px solid #d3bdbe; /*top border style*/
border-bottom: 3px solid #ffa1a3; /*thick bottom border below tabs*/
}

Best of luck!

Posted by Naples Real Estate on 01/27, 02:52 PM

If this is nested inside a container div that is say, 800px, how can I make the menu stretch to be the same width?

ozbroomy

Posted by ozbroomy on 01/29, 02:53 PM

Tried the above CSS in IE6 and the result was not very pleasent. Every time you hover over the tabs they flash. Does anyone know how to get around this ?

Posted by Archie on 02/01, 04:33 PM

Comment Pages 3 of 6 pages « First < 1 2 3 4 5 > Last »