Dynamic Drive CSS Library- Solid Block Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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

First of all, thank you for this very helpful place.

After strictly doing copy-paste, I am starting to understand a bit; the code didnt work for me as it is: it required some modifications to load the images.
background-image: url('blockactive.gif');
background-image: url('blockdefault.gif');

and also, I shrank the images a bit in order to show the grading of shades.

I am setting a space for credits/recognition, which will be uploaded soon, with a link to your site.

Tks again

Posted by tabharitta on 05/01, 12:59 PM

hi, i want to know how can i add this navigation in joomla sites please reply me fast thanks in advance .

Posted by daniyal on 05/14, 01:00 PM

it seems to be working fine. Great work!

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/

Posted by Think Flick on 06/02, 10:31 PM

I am having trouble with this menu in IE8. I have been adjusting the width of the menu successfully in other browsers including IE7 using:
.solidblockmenu{
margin: 0;....
width: 549px;/*adjust width here for no. of buttons*/
overflow: hidden;....
}
However, IE8 distorts the menu and offsets the buttons high and low. If I set the width to 709px then the menu renders okay but I have 150px blank button space at the end which I don't want. Can someone help with why this might be and how to fix.
Thanks

Posted by James in London on 06/11, 10:20 AM

I have found a fix to this. IE8 seems to render pages differently to all other browsers (thanks Bill). Many pages do not work as designed in IE8. Microsoft knew this when the launched IE8 so they put a button to the right of the address bar to allow the user to switch to IE7 view. This way the user could still view all of the pages that don't work in IE8.
However, you can instruct the browswer to do this automatically when it loads the page by inserting

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

This has fixed all of our IE8 issues.

Posted by James in London on 06/13, 12:53 AM

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

Commenting is not available in this weblog entry.