PDA

View Full Version : How do I make this list center ?


jonsaul
02-05-2007, 11:46 AM
Hi all,

Ive been trying to get this <ul id="home_list"> to center on a site I am building, it doesnt seem to want to though, how is this done ??

I want it to be in the middle of the page like the image above it, is this problem caused by the floats in the <ul> ?

http://jsaul.eu/testing/age_design/index.html

Thanks

Jonsaul

domedia
02-05-2007, 01:54 PM
You expect something to be floated to the left and centered at the same time.. not a good idea ;)

The UL element spans 100% width (fromy our CSS) so the floated elements are going to hug the left hand side.

One way of centering those LI's would be to set a width to the UL (66em?) , and center it inside #home_list

jonsaul
02-05-2007, 02:29 PM
Hey Domedia,

Thanks for your reply to my question,

Im not totally sure if I understand though, would you be so kind as to clarify the fix and/or reason for the problem?

Ive had trouble with this kind of thing before, and like you say Ive had similar lists that hug left when I want them centered.

I would love to know the answer....

Sorry if its a pain,

Jonsaul

domedia
02-05-2007, 02:44 PM
Your LI's are floated to the left of the content, you can't center floated elements, just like you can't float something to the left and to the right at the same time. They're logically mutually exclusive, if that's possible to say.

The way to get what you want, is to constrain the width of the parent element , the UL, and center *that* element. I just guessed at a width of 66em (your 3 LI's plus their margins). Now all you have to make sure is that the UL is centered insisde it's parent element #home_list

jonsaul
02-05-2007, 03:20 PM
Great, now im with you, thank you very much.

Cheers Domedia !

domedia
02-05-2007, 08:08 PM
I see you got it all sorted out, nice page!