Solid Block Menu

[youngwebmaster]

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

http://stmarkcrestview.com/index_test.html

Heres my CSS




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]

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

</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;
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 :D

[coothead]

Hi there youngwebmaster,

try changing this...


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


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

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]

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]

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]

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? :eek:
I don't think that you could have. :rolleyes:
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. :D

coothead

[youngwebmaster]

I must not have, it works great now :)
I really really appreciate the help. Thanks!!!

[coothead]

Hi there youngwebmaster,

I must not have, it works great now ;)
Well, thank heavens for that.
I can now cancel my appointment with the optician. :D

coothead