Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Horizontal CSS Menus: Here

Solid Block Menu

Author: Dynamic Drive

This is a lean, professional looking CSS menu that's draped in a solid two color background image. The divider between the menu items is simply a white CSS border. The style is extremely easy to customize thanks to the simple background image used.

Demo:


The two images used (resized horizontally):

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 03/27/2007

Revision History: July 6th 08"- Updated CSS for improved clear float in IE.

Usage Terms: Click here

Your Comments (165)

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

decent script there. It seems very basic, but behaves well and is solidly coded. 5/5 - good job, mate.
Posted by Ron on 03/28, 08:11 AM
Pretty basic -web 2.0 look and feel?
Posted by CMSTheme on 03/29, 12:41 PM
I had to tweek the CSS a little to get it working... I also had a black dot I had to get rid of. Attached is my CSS Code.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

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

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
list-style: none;
}

</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]-->
Posted by Eric on 03/30, 11:57 AM
A zip example would be handy.
Posted by deper on 03/31, 07:33 AM
How do you centre the tabs?
Posted by DP on 04/02, 08:55 AM
I am using the CSS (tweaked as above) and the menu seems to "step down" in IE 6 (not sure about later versions). Help?
Posted by Signalfire on 04/02, 12:58 PM
I was wondering if there was a drop down menu version of this? Thanks!!
Posted by greg on 04/04, 05:04 PM
I tried this and it seems to be working fine. Great work!
Posted by sid on 04/05, 02:15 PM
I cant figure out a way to get the background image of the nav bar. That is to show when is not active,
I tried puting in the code provided but all i get is the repetition of a 1px by 36px image repeating in the x direction.
Can anybody aid me on this.
Posted by luis on 04/07, 05:37 PM
How do you centre the menu around an image?
Posted by Wade on 04/08, 06:41 AM

Comment Pages 1 of 17 pages  1 2 3 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.