Dynamic Drive CSS Library- CSS Thick Tabs

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 (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 1 of 7 pages 1 2 3 > Last »

Its nice, but what would be the easiest way to align this in the center without using tables?

Posted by Matt on 11/13, 09:51 AM

There are no tables anyway???

But line-height is a really good way to align text in the center, not for div's etc though... I imagine you could possibly use that here rather than using padding (set the height of the li through css and then set the line-height to that)...

Posted by Allan Mullan on 11/13, 09:09 PM

Since the tabs are floated (to the left), centering them on the page is more tricky. You may want to do a search on Google to see what some of the techniques are for this.

Posted by ddadmin on 11/14, 06:05 AM

Centering menu horizontally on page? How about . . .

#thicktabs{
margin: 0 auto;
width: 400px;  /* or whatever */
padding: 0;
font: bold 13px Tahoma;
} 

Posted by rockoyster on 11/14, 02:19 PM

I really like it. Web 2.0.

Posted by Kate C on 11/17, 01:48 AM

How do I have a button with two text lines? Ie. in the example, how would I make "Webmaster Tools" display on two text lines ("Webmaster" with "Tools" underneath)?

Posted by SB on 11/19, 11:59 PM

effective but how can i make this with table coz i mostly use table to design my site.

Posted by aashique on 11/20, 07:21 AM

Hello rockoyster, I try you code and still doesn't work, it work only on 400px, I try to make it 700px and the menu not center anymore.

Also I need little question, how to make it width totally on page? thanks

Posted by Jauhari on 11/22, 07:55 PM

I thought when floating an element, a width needs to be given. Is that not so?

Where is the border of the individual tabs specified?

-- Stephan

Posted by Stephan Wehner on 11/23, 12:15 AM

to matt and jauhari, you could easily center it by putting the whole list into another div (ex: <div id="tab">) and put
#tab{
margin-right:auto;
margin-left:auto;
}
this will surely center it :D

Posted by pritthish on 11/30, 07:34 AM

Comment Pages 1 of 7 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.