Dynamic Drive CSS Library- DD Color Tabs II

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

DD Color Tabs II

Author: Dynamic Drive

Based on the same design as DD Colors Tabs, this second version flips the tabs over to create an inverted look. Just like the original, you can modify the menu's default and hover colors just by altering the two color values inside the CSS code. This is made possible thanks to transparent images used as the menu tabs' interface.

The two colors used in this menu are: #8b0000 and #d50509. Just by changing these two colors, you instantly create a different theme for the menu tabs.

Demo:

The two images (resized for easier download):

The CSS:

<style type="text/css">

#invertedtabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}

#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}


#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(media/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}

#invertedtabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}

#invertedtabs a span{
float:none;
}


#invertedtabs a:hover{
background-color: #d50509;
}

#invertedtabs a:hover span{
background-color: #d50509;
}

#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}

#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>

The HTML:

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>	
</ul>
</div>

<br style="clear: left" />

Code Info

Rate this code:

Date Posted: 07/12/2006

Revision History: None

Usage Terms: Click here

Your Comments (44)

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

Is it just me or do the "Two images:" not appear on the page?

Posted by Tom on 09/19, 02:20 PM

How do you center the whole menu? I looked at what someone posted below but not sure were to put it.

Thanks

Posted by Zane on 09/25, 01:41 PM

I love you dynamic drive

Posted by loki mona on 10/15, 09:20 PM

Very nice! Works well with my layout.

Posted by Ewan on 10/18, 04:39 AM

Looks slick! Haven't tried it but it'll probably work just fine.
For all the people having trouble centering it; can't you just wrap another (non visible) div block around it and center it?

Posted by Rieks Visser on 10/25, 09:46 AM

Simple & fast, no fancy gimmicks : my favourite

Posted by Jhon on 11/06, 06:21 AM

A follow-up request for help on centering the tabs from left to right.

Posted by trevor on 11/15, 01:14 PM

I am using this contribution (DD Color Tab II) and want to center the tabs (instead of left align). What changes do I need to make? Please look at example page - www.nightstay.us

Thanks for your help!
Manjeet

Posted by Manjeet on 11/19, 08:16 PM

Oops - example page is footer.html (www.nightstay.us/footer.html)

Posted by Manjeet on 11/19, 08:17 PM

I posted the Question in forums and coothead helped me. Here is the thread if anyone is interested -
http://www.dynamicdrive.com/forums/showthread.php?t=15023

Posted by Manjeet again) on 11/20, 05:36 PM

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