Dynamic Drive CSS Library- DD Color Tabs II

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

I have managed to center it on my page by adding a additional opening and closing div tag within the invertedtabs div tag :

<code>
<div id="invertedtabs">
<div>
<ul>
<li style="margin-left: 1px">
<span>Home</span></li>
<li><span>New</span></li>
</ul>
</div>
</div>
<code>

Then i added the following to my css

<code>

#invertedtabs div{
padding-left: 190px;
}
<code>

That worked for me in both firefox and ie, not tried any other browser.

Posted by Tracy on 02/27, 01:40 PM

Thanks, they work good and are easy to configure. Even for none css experts. Thanks much dynamic drive crew for all the resources you offer.

Posted by Steve on 03/21, 12:54 AM

Thank You for help, all reader log on my blog to know more info...

Posted by Mukesh Yadav on 08/01, 02:40 AM

Can anyone help?!! Great menu...but How do I use it on a page where the Background is NOT white..I mean the rounded corners show as white triangles on a green page..how do I remove these?Thanks in advance

Posted by Nick on 08/18, 01:44 PM

Comment Pages 5 of 5 pages « First < 3 4 5