Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

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 16 of 17 pages « First  <  14 15 16 17 >

I echo the problems experienced in IE7, the black background of the menu bar drops down, and the buttons step down as well. Tried the edits indicated by EntityDesigns - problem remains. This is a great look, can anyone help me resolve the IE issue? Thanks.
Posted by C Bryant on 01/24, 05:36 PM
Correction! The edits stated by EntityDesigns works perfectly in IE 7. I neglected to take out the stated code at the beginning. Thanks all!
Posted by C Bryant on 01/24, 05:41 PM
I am very new to this. What section do I paste the HTML code in? Does it go in the head section?
Posted by cindo on 01/28, 07:27 AM
How do you center the buttons so the first button (usually HOME) isn't slammed all the way to the left?
Posted by Durk on 01/28, 05:36 PM
I was able to center it by saving the original code to an external style sheet, replacing the "." with a "#" in front of each class style name (".solidblockmenu" to "#solidblockmenu") and removing the float:left attribute and modifying the margin attribute to "margin:0 auto 0 auto".

Hope this helps, only took a minute for me to do and it works great!
Posted by racer_x on 01/31, 12:20 PM
note: this is just to center the bar itself, you'll have to add to this to center the buttons
Posted by racer_x on 01/31, 12:21 PM
<style type="text/css">

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

.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;
}

</style>


<ul class="solidblockmenu">
<li>Home</li>
<li>CSS Examples</li>
<li>Forums</li>
<li>Webmaster Tools</li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li>Gallery</li>
</ul>
<br style="clear: left" >

Paragraph that follows...
Posted by osman on 02/22, 06:28 AM
on mouse hover can i display some text(like help)
Posted by blogtrix on 03/12, 03:57 AM
Thank you so much, this is a great copy and paste nav!
Posted by Brian on 03/25, 04:17 PM
Thanks alot...worked pretty good for me..
Posted by Rajesh on 04/01, 10:16 AM

Comment Pages 16 of 17 pages « First  <  14 15 16 17 >

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