Dynamic Drive CSS Library- Matt Black Tabs

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Matt Black Tabs

Author: Dynamic Drive

There's often beauty in simplicity. Matt Black Tabs is a clean CSS list menu that uses no images, and very small in footprint. Each tab is floated left to achieve its look and all contained in a wrapper that negate the need to manually clear "float" for the contents that immediately follow.

Note: Make sure your page contains a valid doctype for this menu to render properly.

Demo:

The CSS:

<style type="text/css">

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}

</style>

The HTML:

<div class="mattblacktabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 06/28/2008

Revision History: 07/01/2008: Fixed IE6 bug.

Usage Terms: Click here

Your Comments (38)

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 4 pages < 1 2 3 4 >

It doesn't show the bottom line on my website

Posted by Daru on 07/28, 02:17 PM

simple but nice , I like

Posted by ruok on 07/29, 11:54 AM

Hello
I'd like to add this to my blogger blog but where do I add the code in the programing. Do I add it in the header code? This is all new to me.
Thanks for the help.

Posted by Peter on 08/09, 07:42 AM

What do I need to do to get these files working on my server? Do I need to copy the CSS contents and rename them? The same for html?

Or do we enter the CSS code somewhere in the index.html file where the menu is to situated? I really need some advice on this stuff. Thanks.

Posted by Rene on 08/18, 07:46 AM

Awesome webpage, more useful than WS3. :D

Just kidding, but it's definitely neck and neck.

Posted by Turtler on 08/18, 05:23 PM

Nice tut, thanks!
Any ideas about how to make the 'active' tab looking without the bottom border? I've noticed that the bottom border comes from the wrapper and is common for all tabs.

Posted by juice on 08/24, 09:33 PM

nice and simple css menu,
thanks.

Posted by Ronald on 08/27, 04:43 PM

I've used a modified version of this menu.

Posted by RG on 08/28, 05:32 PM

Very nice menu.
How can i make this in the center of cell(table)?
Thanks.

Posted by anju on 10/06, 02:29 PM

really nice. How do I make the buttons equal size and fit the width of my page

Posted by Shaun on 10/07, 03:00 AM

Comment Pages 2 of 4 pages < 1 2 3 4 >

Commenting is not available in this weblog entry.