Dynamic Drive CSS Library- Solid Block Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Color Inspiration Tool

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:

<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>

The HTML:

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

<p class="iepara">Paragraph that follows...</p>

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

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 3 of 15 pages « First < 1 2 3 4 5 > Last »

Does anyone know how to make this kind of CSS layout. I know how to make each of the rounded-edge bars but doesn't know how to position them to be like that at least for a start. Check this out at "http://gbarnett.pbwiki.com/f/css_layout_dimensions.png"
Please let me know if anyone knows how to do this.Thanks.

http://gbarnett.pbwiki.com/f/css_layout_dimensions.png

Posted by 3rippleB on 04/16, 03:24 PM

How can you make the bar more slimmer because i need the bar more slimmer and smaller. Not the width, but the height. How can you modify it?

Posted by Garardo on 04/16, 05:56 PM

garado, what bar u talkin about, is it the css bars i mentioned? well i only know how to make each of the bars with the curved edge. I think i only know of fluid, meaning it adjusts based on the content, so i don't know how to specify a size.
That is why i want u guys to help with with it.
please--- http://gbarnett.pbwiki.com/f/css_layout_dimensions.png
Guys please help if u can. Thanks!

Posted by 3rippleB on 04/16, 06:56 PM

I am talking about the Solid Block Menu Bar. I want to make the Height smaller so it won't be that thick

Posted by garado on 04/16, 07:42 PM

Garado,

to make the bar slimmer u have to change the padding

e.g

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

Posted by bbk on 04/17, 01:26 AM

Hey guys,
I've been trying for days, and i haven't been able to get it right. How can i get the buttons centred in the bar? I know they're floated left, and float:center isn't widely supported yet. When they aren't floated, the padding does not affect the height of the bar. I suspect i'll have to re-write the whole thing differently... unless there's another way?
Also, theres no border on the left side of the far-left button.

Posted by greeney on 04/20, 05:44 AM

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.

Posted by Lysandra on 04/20, 10:21 AM

hi - i can't get the black to grey background working ? any ideas ?

Posted by Christian Trampenau on 04/20, 12:26 PM

got this bar to work. its really cool and well done. 5 stars. just one question. does anybody know how to reposition this i cant seem to get it moving.

Posted by tim on 04/21, 04:28 AM

use float:right/left/center; :D you want to position what? text? or navbar? you can use also, text-align:center/left/right; :D

Posted by Pacman on 04/21, 04:44 AM

Comment Pages 3 of 15 pages « First < 1 2 3 4 5 > Last »