[css-d] Centering an inline list?
I am using ul and li to create a horizontal navigation menu in the
header area and would like the links to appear in the center of the
enclosing div. Currently they align to the left.
Relevant markup is as follows:
#mdmenu {
width:800px;
height:30px;
margin:5px auto 20px auto;
background:url(../images/menu.gif) repeat-x;
border:1px solid #e0e0e0;
}
#mdmenu ul {list-style:none; margin:0px auto;}
#mdmenu li {
display:block;
text-align:center;
padding:5px 10px;
float:left;
}
#mdmenu li a { color:#7F7F7F; font-size:12px; }
An example can be viewed at:
http://www.unicornhosting.com/md1076/index.php?theme=passman
Thanks,
Denise
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering an inline list?
the reason it's not centering with the (correct for what you're trying
to do) margins you have is because the ul is 100% width. if firefox
actually had inline-block, you could set the display to that and be
done, but alas... :'(
to be cross-browser, try something like
#mdmenu ul {list-style:none; margin:0px auto;width: 40em;}
i just picked a width, but it seemed to work for me on text resizing. :)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering an inline list?
Excellent! That did the trick. Thank you.
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of cj
Sent: Thursday, August 03, 2006 1:13 PM
To: Denise
Cc: css-d
Subject: Re: [css-d] Centering an inline list?
the reason it's not centering with the (correct for what you're trying
to do) margins you have is because the ul is 100% width. if firefox
actually had inline-block, you could set the display to that and be
done, but alas... :'(
to be cross-browser, try something like
#mdmenu ul {list-style:none; margin:0px auto;width: 40em;}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
