Solid Block Menu

**youngwebmaster** · 10-06-2009, 09:45 PM

Hey was wondering if there was a way I could center the menu?

http://stmarkcrestview.com/index_test.html

Heres my CSS

Code:

body {background:#990000;}

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

**auriaks** · 10-08-2009, 01:48 PM

I think you can fix it in several different ways.
first one by fixing this:

PHP Code:


</div></td>
    </tr>
    <tr valign='center';[maybe align]>

      <td height="50"><div align="center"><ul class="solidblockmenu" >
<li><a href="http://www.dynamicdrive.com/" class="current">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >Schedule</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Events</a></li>
<li><a href="http://tools.dynamicdrive.com">Links</a></li>
<li><a href="http://www.javascriptkit.com/">Our Pastors</a></li>
<li><a href="http://www.cssdrive.com">Prayer List</a></li>
<li><a href="http://www.cssdrive.com">Ministries</a></li>
<li><a href="http://www.cssdrive.com">Photo Gallery</a></li>

<li><a href="http://www.cssdrive.com">Newsletter</a></li>
<li><a href="http://www.cssdrive.com">Contact Us</a></li>

also you can use margin:auto;

PHP Code:


body {background:#990000;}

.solidblockmenu{
margin: auto;
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(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(blockactive.gif) center center repeat-x;
}

or use padding-left: xx pixels while you menu will be in the right spot. HTH

**coothead** · 10-08-2009, 02:16 PM

Hi there youngwebmaster,

try changing this...

Code:


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

...to this...

Code:


.solidblockmenu {
    margin:0;
    padding:0;
    font: bold 13px arial;
    width:824px;
    overflow:hidden;
    margin-bottom:1em;
    border:1px solid #625e00;
    border-width:1px 0;
    background:black url(blockdefault.gif) center center repeat-x;
 }

coothead

**Bantymom** · 10-08-2009, 06:54 PM

For learning purposes, can you tell me, was float: left; was part of the problem? I had looked at this question many times and wondered if that had anything to do with it.

Thank you.

**youngwebmaster** · 10-10-2009, 07:20 PM

Okay I tried both posts, and nothing worked. Any other thoughts?? I think the float: left; had something to do with it, because it will change if I take it out, but wont center it.

**youngwebmaster** · 10-10-2009, 07:22 PM

I can change both float lefts to float: center and the menu will shrink vertically, but its centered. Anyway to make it not shrink vertically?

**coothead** · 10-10-2009, 08:14 PM

Hi there youngwebmaster,

Okay I tried both posts, and nothing worked. Any other thoughts??

Well, my thoughts say did you correctly implement the change that I gave you?

I don't think that you could have.

Check out the attached image to see the results of my suggestion in Firefox, IE, Opera and Safari.
I know that my eyes are getting old but the menu certainly looks centered to me.

coothead