I want to reposition the nav bar. since my site already has a logo on the top of the page. i want to be able to position it under the logo i made.

The easiest way to center this 'bar', although not necessarily the best way, is to measure out the excess 'bar' at the end of the links on the right, measure it, divide it in half, and then create an image with those dimensions (for me, there was 272px of excess space on the right side originally, so I created an image that was 136px X 36px).

Create a table with two cells, in the left cell, place your image with specific measurements (relative to your bar length, so 136x36), and then paste the html code in the right cell for the actual bar. If you align it properly and get the image tweaked, it will look exactly as if the 'bar' is centered (and therefore falsely stretched to cover the left side).

Not the easiest way of doing it in the world, but it's working fine for me. Here's the code if you're having a hard time understanding what I mean, but hopefully with this you can understand the concept.


<table border="0" width="767" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td width="136">
/000/test/images/structural/nav-filler-left.gif</td>
<td width="631">
<ul class="solidblockmenu">
<li>Home</li>
<li>Biography</li>
<li>Discography</li>
<li>Media</li>
<li>Events</li>
<li>Contact</li>
</ul>
</td>
</tr>
</table>


ok not sure why this works but it does, heres the external css (im using IE6):

<style type="text/css">

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

.solidblockmenu li{
display: inline;
}

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

.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(redblock.gif) center center repeat-x;
}

</style>

I can't get the menu to NOT wrap when I resize the browser window. Any ideas why? Thanks

its not working.
Somebody please help me.
I tried putting all those codes in dreamweaver... but all I see black menu bar, when I click on the buttons it should roll over the red image.
But its not.
Help me out :(

what i did was change this part of the CSS

background: black url(media/blockdefault.gif) center center repeat-x;

into this

background: black url("blockdefault.gif") center center repeat-x;

and you should have the pictures of the red and black blocks stored in the same file as where you are placing your html file

It looks great but for some reason I cannot get the black background image to display. Any thoughts?

I think I have to do something with this... but not sure what...

var ddtabmenu={
disabletablinks: false, ////Disable hyperlinks in 1st level tabs with sub contents (true or false)?
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

This is a nice menu. I got it working with a embedded stylesheet but it doesn't work with an external stylesheet. I tried is with Firefox 2 and IE 6

Now I also got the external css working. I work with relative paths and forgot two dots in line background: black url(../art/blockdefault.gif) center center repeat-x;

Great work and thank you