PDA

Click to See Complete Forum and Search --> : Centering a Floating List Menu

walman05
08-31-2007, 05:02 PM
I have an unordered list...


<div style="width: 500px;">
<ul>
<li style="float: left;">&nbsp;</li>
<li style="float: left;">&nbsp;</li>
<li style="float: left;">&nbsp;</li>
<ul>
</div>


...floating each list element left is the only way I know of that I can have a list without line breaks (for a menu). However, I am also trying to center the list within the div.

I tried putting a "margin: 0 auto;" on the div to center the list within it, as well as putting a 300px wide div within it and applying "margin: 0 auto;" to it as well - neither worked.

I want to be able to keep it dynamic enough to add more list items in the future but still keeping it centered. Does anyone have any suggestions on how I can do this?

NOTE: I've tried too many things to name and I couldn't do it, so please test your suggestions before submitting them to ensure that they work as is assumed.

Thanks,
walman
WebJoel
08-31-2007, 05:04 PM
<div style="width: 500px; margin:0 auto;">
<ul>
<li style="float: left;">&nbsp;</li>
<li style="float: left;">&nbsp;</li>
<li style="float: left;">&nbsp;</li>
<ul>
</div> and a valid !doctype. Without a !doctype, IE will not 'center' this.

Try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
....

Required: a stated width (even a percentage width), margin:0 auto; and valid !doctype.
Centauri
09-01-2007, 12:38 AM
If this is a menu, then it should also contain <a> elements within the <li>s. A lot depends on what you want to do with the <a> elements - if the menu items are just going to be text links, then dispaly:inline on the <li>s and text-align:center on the containing div may be all you need.
Kravvitz
09-03-2007, 09:46 PM
Check out this centered menu example. (http://www.dynamicsitesolutions.com/css/example-menus/4/)