Dynamic Drive CSS Library- DD Color Tabs II

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 (48)

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

I dont know why, but Safari Opera (mac web browser) shows a big white space between
<div id="invertedtabsline"> </div> and
<div id="invertedtabs">

On Windows & Firefox browser, no such white space.

Do you have any ideas on how to eliminate the white space?

Thanks in advance..
Jeff Brustin

Posted by Jeff on 02/15, 09:59 AM

does anyhow know how to set the last selected tab highlighted...not #current...but the last selected one

Posted by tristen on 04/01, 10:16 PM

you can center the menu by adjusting the margin-left: 4px; in the css code. Instead of using 4px adjust it up to 420px---this worked for me.

This is a great script...thanks!

Posted by well well well on 04/28, 09:56 PM

Good looking navigation for sure...Thanks for shared

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/

Posted by Wpdigger on 06/02, 10:48 PM

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

Commenting is not available in this weblog entry.