...

View Full Version : Centering CSS Menu buttons



patchkinz
04-08-2009, 11:21 PM
Hey everyone,

I would like to center buttons on a CSS based menu instead of them being aligned to the left. I tried changing the "float:left;" with no luck.

Thanks,
patchkinz

timgolding
04-08-2009, 11:28 PM
you can try text-align:center;

if that doesn't work make the parent


text-align:center;

and the children



margin-left:auto;margin-right:auto;


That's just an example if you post your code i can help you apply it

patchkinz
04-08-2009, 11:42 PM
you can try text-align:center;

if that doesn't work make the parent


text-align:center;

and the children



margin-left:auto;margin-right:auto;


That's just an example if you post your code i can help you apply it

Thank you!

I am fairly new to CSS.

Here's my code:


.blue #slatenav
{
position:relative;
display:block;
height:42px;
font-size:13px;
font-weight:bold;
background:transparent url(images/blueslate_background.gif) repeat-x top left;
font-family:Times New Roman,Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;
}

.blue #slatenav ul
{
margin:0px;padding:0;
list-style-type:none;
width:auto;
}

.blue #slatenav ul li
{
display:block;
float:left;margin:0 1px 0 0;
}

.blue #slatenav ul li a
{
display:block;
float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;
}

.blue #slatenav ul li a:hover
{
text-decoration: underline;
}

.blue #slatenav ul li a.current
{
color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}



HTML:



<div class="blue">
<div id="slatenav">
<ul>
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div>
</div>



Thank you for the help,
patchkinz

Excavator
04-08-2009, 11:48 PM
Hello patchkinz,
To center something you need 3 things:

a DocType
an element with a width
left and right margins of that element set to auto


Give your ul a width and set it's margins to margin:0 auto;

This ul menu of unknown width is centered by % -
http://nopeople.com/CSS/menu-h_centered-ul/index.html - view the source to see how.

timgolding
04-09-2009, 12:13 AM
I've looked at your example and am wondering is it really centering you are after. Or maybe just having them evenly spaced out. Something like this
http://www.sovavsiti.cz/css/horizontal_menu.html

patchkinz
04-09-2009, 02:44 AM
I've looked at your example and am wondering is it really centering you are after. Or maybe just having them evenly spaced out. Something like this
http://www.sovavsiti.cz/css/horizontal_menu.html

the second one on their, Variable padding, would be great.

If you could add that in my code i'd really appreciate that.

patchkinz

patchkinz
04-09-2009, 02:45 AM
Hello patchkinz,
To center something you need 3 things:

a DocType
an element with a width
left and right margins of that element set to auto


Give your ul a width and set it's margins to margin:0 auto;

This ul menu of unknown width is centered by % -
http://nopeople.com/CSS/menu-h_centered-ul/index.html - view the source to see how.

I have a DocType, I just added the HTML for the menu.

Thanks for your help,
patchkinz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum