PDA

View Full Version : Help centering a CSS Menu



blade007
Aug 11th, 2007, 09:05 AM
i cant seem to center this CSS menu, i tried everything, is it even possible..

http://www.dynamicdrive.com/style/csslibrary/item/solid-block-menu/

GO ILLINI
Aug 11th, 2007, 09:09 AM
add
text-align:center; to a div holding the menu.


<div style="text-align:center;">
menu code here
</div>


-Adam

blade007
Aug 11th, 2007, 10:07 AM
no, that didn't work, i dont think its possible looking at the codes from the dynamic drive provided, but what do i kno, im just a rookie

how do you spread the text out 100%, i think this is more feasible, but dont know how to do it, is says in the comments someone spread the text out 100%, but never explained how

koyama
Aug 11th, 2007, 03:13 PM
i cant seem to center this CSS menu, i tried everything, is it even possible..

http://www.dynamicdrive.com/style/csslibrary/item/solid-block-menu/
Centering that menu is possible, although a bit more tricky than one might think (Mostly because of Internet Explorer including version 7)

Here is the modified code:


<style type="text/css">
.solidblockmenu{
margin: 0;
padding: 0;
/* float: left; */
font: bold 13px Arial;
/* width: 100%; */
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif) center center repeat-x;
display: table;
margin: 0 auto;
}
.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(http://www.dynamicdrive.com/cssexamples/media/blockactive.gif) center center repeat-x;
}
</style>



<!--[if IE]>
<style type="text/css">
.solidblockmenu-wrap {
text-align: center;
}
.solidblockmenu {
zoom: 1;
display: inline;
}
</style>
<![endif]-->



<div class="solidblockmenu-wrap">
<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>
</div>

Related sources:
[1] http://www.brunildo.org/test/shrink_center_3.html
[2] http://www.cssplay.co.uk/menus/centered.html

blade007
Aug 11th, 2007, 07:43 PM
Centering that menu is possible, although a bit more tricky than one might think (Mostly because of Internet Explorer including version 7)

Here is the modified code:


<style type="text/css">
.solidblockmenu{
margin: 0;
padding: 0;
/* float: left; */
font: bold 13px Arial;
/* width: 100%; */
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif) center center repeat-x;
display: table;
margin: 0 auto;
}
.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(http://www.dynamicdrive.com/cssexamples/media/blockactive.gif) center center repeat-x;
}
</style>



<!--[if IE]>
<style type="text/css">
.solidblockmenu-wrap {
text-align: center;
}
.solidblockmenu {
zoom: 1;
display: inline;
}
</style>
<![endif]-->



<div class="solidblockmenu-wrap">
<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>
</div>

Related sources:
[1] http://www.brunildo.org/test/shrink_center_3.html
[2] http://www.cssplay.co.uk/menus/centered.html

it worked! thanks!, but now it cut off the sides, how would u bring that back and make it a 100% fit, the tabs are fine centered, but it cut off the left and right side, how do i bring that back

VIPStephan
Aug 11th, 2007, 07:49 PM
I think it’s easier than you think (and koyama did it): Just add text-align: center; to the list itself (.solidblockmenu). Since the list items are displayed as inline elements they can easily be centered that way. No redundant wrapping element or complicated display methods necessary.

blade007
Aug 11th, 2007, 08:07 PM
I think it’s easier than you think (and koyama did it): Just add text-align: center; to the list itself (.solidblockmenu). Since the list items are displayed as inline elements they can easily be centered that way. No redundant wrapping element or complicated display methods necessary.

i tried adding text-align: center earlier and it didnt work

VIPStephan
Aug 11th, 2007, 08:24 PM
Ah well, sorry. Should have looked more closely to see that the anchors are floated and therefore that wouldn’t work. Strange implementation, though. Sorry, just ignore my previous post.

blade007
Aug 11th, 2007, 08:36 PM
Ah well, sorry. Should have looked more closely to see that the anchors are floated and therefore that wouldn’t work. Strange implementation, though. Sorry, just ignore my previous post.

its ok, do u know how to bring the sides back and make it a 100% fit, the tabs are fine centered, but it cut off the left and right side, how do i bring that back

koyama
Aug 12th, 2007, 12:53 AM
its ok, do u know how to bring the sides back and make it a 100% fit, the tabs are fine centered, but it cut off the left and right side, how do i bring that back
Just add this:


.solidblockmenu-wrap {
background: black url(http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif) center center repeat-x;
}