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:
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
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.
Pretty basic -web 2.0 look and feel?
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]-->
<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]-->
A zip example would be handy.
How do you centre the tabs?
I am using the CSS (tweaked as above) and the menu seems to "step down" in IE 6 (not sure about later versions). Help?
I was wondering if there was a drop down menu version of this? Thanks!!
I tried this and it seems to be working fine. Great work!
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.
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.
How do you centre the menu around an image?
Commenting is not available in this weblog entry.