Aligning UL/LI menu to center

[SteveMT]

I'm trying to align these 3 boxes on both the pages below to the center of page. I've tried using margin:0px auto in the containing box as well as text-align:center but I'm having no luck with either for some reason. I'm sure it's something very dumb and simple I'm not doing  ???

 

http://www.customscr.com/running.html

http://www.customscr.com/running.html

 

css:

http://www.customscr.com/customdc.css

[F1Fan]

Set the width to 100%. Right now the width is automatic and the data in the div is aligning center, but the div itself isn't centered and isn't taking up the full width.

[SteveMT]

Sorry for my naivety but which width needs to be set to 100% and I wasn't sure if you meant anything else needs changing?

[F1Fan]

Add the "width: 100%;" to the CSS for the div id "ProductBoxes."

[SteveMT]

Unfortunately that doesn't appeared to have worked

 

http://www.customscr.com/swimming.html

 

I could really do with reading some proper guides on web design. I've only learn want I know so far through playing about and I come across so many problems which I know are simple ones that I should know how to solve.

 

Where would be a good place to start learning high quality css designed websites? I have 'design' skills to do the sort of imagery on all the sites at www.cssremix.com only I don't have the css/coding skills to piece it together. I could do with some sort of 'professional site design from scratch' guide.

[dropfaith]

#ProuctBoxes {
width:100%;
text-align:center;


}
#ProductBoxes ul{
list-style:none;display:inline
margin: 0;
padding: 0;
text-align: center;
}

#ProductBoxes ul li{
padding:20px 10px 0 10px;
}

 

i removed float:left if you want them centered im unclear as to why you floated them to the left also changed the display to inline for the ul

 

 

[SteveMT]

Sorry, all that does is set the boxes centered but in a vertical list. Maybe I mislead you. What I want is so that the boxes as a group are centered so the boxes run horizontally but together are centered in the middle of the page.

[ifubad]

Take a look at this page using something like Firebug, which I did for someone, looks like something that you are after

 

(spaces added to avoid SE indexing)

http://www.wa im in g.com/pages/reproductions.php

 

You cannot easily center a floated element. You can try putting the floated UL in a non floated fixed dimension div, and margin:auto the div. Here's another method for centering floated elements http://pmob.co.uk/pob/centred-float.htm

[SuperBlue]

You misspelled the ProductBoxes id in your CSS.

 

 

The way to center your UL is to apply margin: 0 auto; on it, and remove the float left property from the ul itself, only the li elements should be floated.

 

The wrapper for your ul can optionally include the text-align: center; hack for IE6 and ealier.

 

 

[ifubad]

If you leave everything as is right now, try adding the following to the div #content-holder

 

width: 660px;

margin: 0 auto;

[ifubad]

The way to center your UL is to apply margin: 0 auto; on it, and remove the float left property from the ul itself, only the li elements should be floated.

 

A UL is a block element, it'll take up the whole width of its container. If you remove float:left and set a width to it, then margin:0 auto will work, but only the ul will center and not the li, unless you know exactly what the width of the UL should be. If you do not know what the ul width should be(e.g. dynamic list menu), then you need to float:left the UL and li, put it in a div, and use this trick to center http://pmob.co.uk/pob/centred-float.htm