asked on

How to center a UL List inside a div container?

This is my website: http://www.computersciencelaboratories.com/

I want to center the NAV Bar and its text also to be centered.

Right now you can see that everything is floating to the left by my CSS.

Here is a link to my CSS:

http://www.computersciencelaboratories.com/ddtabmenufiles/solidblocksmenu.css

Thank you for your help!!!

Zeke Rich

ASKER

I would like my NAV to look like this: http://www.apple.com/

Mark Steggles

The way to center a floated menu is to give the parent div a width and margin auto

ASKER CERTIFIED SOLUTION

oceanbeach

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

oceanbeach

Oops, "...has equal width buttons..." should have been "...has equal width buttons that, put together, span to fill 100% of their container..."

Zeke Rich

ASKER

Thank you for your answers, i have applied both methods, now only the text remains to be centered in the cells but i am not shure how to achieve this? How can i center the text?

Mark Steggles

Hey!

Adding text-align:center to

.solidblockmenu li a {}

should do it

P.S Nice looking site

Cheers guys

Zeke Rich

ASKER

Thank you for the compliment Steggs! I tried adding the text-align:center but i had to remove it because it created a verry weird format. It didnt center the text but instead it removed the white divider lines between the buttons? Any other ideas?

Mark Steggles

In what browser?

Worked fine for me in firefox

Zeke Rich

ASKER

MS IE 7 it broke the column spacing and got rid of the white lines using the text-align:center .

Sorry i dont know anyone who uses Firefox except web designers.

oceanbeach

Hi zefex,

Have you tried 'text-align:center' on <li> instead of <a>...

.solidblockmenu li {
text-align:center;
}

I cannot look at it in IE7, but it looks good in firefox ;-) I also think the site looks sharp.

I hope this helps!

-OB

Zeke Rich

ASKER

I downloaded Firefox and it looks great! But in IE it look wrong :( everything is to the left in the buttons.

Zeke Rich

ASKER

Also Firefox is not making the opacity filter for the images?

SOLUTION

oceanbeach

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zeke Rich

ASKER

oceanbeach is awesome, thanks for not giving up on me!!!