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

My links do not change with css! Why?

Posted by web tasarım on 07/06, 05:33 PM

Great!! Works fantastically. :)

Posted by Ritu Raj on 08/07, 03:27 PM

Archie, the "flash" between the :link and :hover states is a pretty common IE annoyance. It also occurs in other browsers when the background image is loading; in the interim the background of the container in which the tabs are located pops through. Work around this by combining both the :link and :hover images into one image, and use CSS to re-align the background in the :hover state so the appropriate part of the image shows through. For example, if you had a light pink image that was 10 pixels high, with another, darker 10-pixel-high pink image just under it, you would align the :hover background image to "0" from the left edge, and to "-10px" from the top edge. Of course, IE does not always behave, and there may be some unwanted flash-age. This trick, however, helps tremendously.

Posted by Sarah Jeanne on 08/09, 08:12 PM

i saved the two images for the pink navigational bar but I have no idea how to link it. What should i do?

Posted by soulsteel on 08/21, 10:08 AM

Hey everyone i customized the colors myself but how can i move this menu to anywhere on the page where i want it? thanx

Posted by stefan Oosten on 09/18, 05:34 AM

if you want to center it you could try

#thicktabs{
margin: 0 auto
}

hope this helps

Posted by Matt on 11/09, 08:44 AM

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

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

Commenting is not available in this weblog entry.