Center Solid Block Menu

[jcmiller]

I am trying to center my solid block menu. Here is my .css code :


<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: center;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
list-stlye:none;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: center;
color: white;
padding: 11px 13px;
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;
}

</style>





I would greatly appreciate any help.

[Sliight]

I think you want to center the

.solidblockmenu li ul{
either text-align:center
or maybe try float:center?

Just a guess... but I'm assuming you want the blocks centered within the menu bar?

[jcmiller]

Yes, i want to center the blocks within the menu bar. All of my float options are centered already in my code above, so that did not work. I even tried adding:
.solidblockmenu li ul{
float: center;
}
It did not work either.

[naiani]

The option float: center; doesn't exist, only text-align: center;.
By what I understand of what you asked, maybe you could try to use the same "artifact" used to center a whole page in the viewport:

.solidblockmenu {
    ...
    margin: 0 auto;
    ...
}

This should work on FF. For IE, try:

.solidblockmenu {
    ...
    margin: 0 auto;
    text-align: center;
    ...
}

And then:

.solidblockmenu ul li {
    ...
    text-align: left;
    ...
}

Again, I'm not sure if this actually works, it's just some piece of code I used to center my page in the viewport, and I adapted to what I think is your case. I'm assuming that .solidblockmenu is a class for a DIV, I don't know if it would work for anything else than a DIV.
Should this solution work, let me know. Also, modify the 0 in margin: 0 auto; and the left in text-align: left; if needed. What should do the magic is the margin: 0 auto; (for FF) and the text-align: center; (for IE).

[jcmiller]

Thanks for the help, but no it did not work.

[naiani]

Sorry, I forgot to say that you should probably specify a width for the piece of code I sent you to work. Otherwise, there's no basic information to define how large would the auto margin be.
Please post your HTML code as well, so we can see what you're doing and why it's not working. If it's too big, please post on Pastebin so we can follow up with it.

[jcmiller]

I posted the code here: http://pastebin.com/m1d689e41

[Spiritvn]

Simply can use the <center> html tag for the blockmenu, it will be centered faster than you use css.

http://vn.worldcybergames.com/

Tested and worked fine.

You can't use the text-align: center to center the menu options becoz IE doesn't understand that the ul and li is the text. It the reason why there are no many sites have the menu centered.

Another way, using

margin: 0px auto; for the ul instead of the block (have not tested yet)

[jcmiller]

When I first viewed it in IE it worked, but now it doesn't. Here is part of my code:

        <div class="ddcolortabs style5" id="colortab">

<div id="blockmenu" >
</center>
	<ul class="solidblockmenu style5 style37">
<li ><a href="http://www.dynamicdrive.com/" class="left ">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="mylife_drop">My Life</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Photos</a></li>
<li><a href="http://tools.dynamicdrive.com" rel="cis55_drop">CIS 55</a></li>
<li><a href="http://www.javascriptkit.com/" rel="webdesign_drop">Web Design</a></li>
<li><a class="right"  href="http://www.cssdrive.com" rel="contactme_drop"> Contact Me</a></li>
</ul>
</center>
</div>

Here is my .css file:

<style type="text/css">

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_a{
position:absolute;
top: 0;
border: 0px solid #980E10; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 14px Cambria;
line-height:18px;
z-index:100;
background-color: #FFFFFF;
width: 200px;
visibility: hidden;
}


.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #FDE8E9;
border-bottom: 1px solid #FDE8E9; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: white;
}
.dropmenudiv_a a.sub_bottom{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #678b3f;
border-bottom: 0px solid #678b3f; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: white;
background: transparent url(blockactive.gif) bottom left no-repeat;
}

* html .dropmenudiv_a a{ /*IE only hack*/
width: 100&#37;;
}

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background-color: #8a3c3d;
color: white;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu{

margin: 0px auto;
padding: 0;
float: right;
font: bold 13px Arial;
text-align: center;
width: 100%;
border: 0px solid #625e00;
border-width: 0px 0;
background: transparent url(blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

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


.solidblockmenu li a:visited{
color: white;
}

#blockmenu a#current{background: transparent url(blockactive.gif) top right no-repeat;}



.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(blockactive.gif) center center repeat-x;
}


.solidblockmenu ul li {
    text-align: center;
	margin: 0px auto;
}





</style>

Thanks for the suggestion. I must have made an error. I really appreciate your help.

[Spiritvn]

Wrong html code

<div id="blockmenu" >
</center>
	<ul class="solidblockmenu style5 style37">
<li ><a href="http://www.dynamicdrive.com/" class="left ">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="mylife_drop">My Life</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Photos</a></li>
<li><a href="http://tools.dynamicdrive.com" rel="cis55_drop">CIS 55</a></li>
<li><a href="http://www.javascriptkit.com/" rel="webdesign_drop">Web Design</a></li>
<li><a class="right"  href="http://www.cssdrive.com" rel="contactme_drop"> Contact Me</a></li>
</ul>
</center>
</div>

you should use:

       <div class="ddcolortabs style5" id="colortab">

<center><div id="blockmenu" >

	<ul class="solidblockmenu style5 style37">
<li ><a href="http://www.dynamicdrive.com/" class="left ">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="mylife_drop">My Life</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Photos</a></li>
<li><a href="http://tools.dynamicdrive.com" rel="cis55_drop">CIS 55</a></li>
<li><a href="http://www.javascriptkit.com/" rel="webdesign_drop">Web Design</a></li>
<li><a class="right"  href="http://www.cssdrive.com" rel="contactme_drop"> Contact Me</a></li>
</ul>

</div></center>