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 RichOwnerAsked:
Who is Participating?
 
oceanbeachCommented:
Hello zefex,

It looks like Steggs has the correct answer to your question :-)

However, you say that you would like the menu to look like the apple menu, which has equal width buttons & does not need to be centered.  If you would like equal width buttons, try changing this css...

Change the width of '.solidblockmenu li a'
from 90px to 118px (about line 32).

Change the width of input & text area
from 100px to 128px (about line 77).

I hope this helps!

oceanbeach
0
 
Zeke RichOwnerAuthor Commented:
I would like my NAV to look like this: http://www.apple.com/
0
 
Mark StegglesWeb DeveloperCommented:
The way to center a floated menu is to give the parent div a width and margin auto
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
oceanbeachCommented:
Oops, "...has equal width buttons..." should have been "...has equal width buttons that, put together, span to fill 100% of their container..."
0
 
Zeke RichOwnerAuthor Commented:
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?
0
 
Mark StegglesWeb DeveloperCommented:
Hey!

Adding text-align:center to

.solidblockmenu li a {}

should do it

P.S Nice looking site

Cheers guys
0
 
Zeke RichOwnerAuthor Commented:
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?
0
 
Mark StegglesWeb DeveloperCommented:
In what browser?

Worked fine for me in firefox
0
 
Zeke RichOwnerAuthor Commented:
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.
0
 
oceanbeachCommented:
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
0
 
Zeke RichOwnerAuthor Commented:
I downloaded Firefox and it looks great! But in IE it look wrong :( everything is to the left in the buttons.  
0
 
Zeke RichOwnerAuthor Commented:
Also Firefox is not making the opacity filter for the images?  
0
 
oceanbeachCommented:
Hi zefex,

These few changes centered the text for me in IE6...
-remove 'float:left' from <a>
-add 'display:block' to <a>
-add 'float:left' to <li>

For opacity in FF, use:

CSS...
opacity:0.5;
-moz-opacity: 0.50; /* older versions */

I hope this helps!

-OB
0
 
Zeke RichOwnerAuthor Commented:
oceanbeach is awesome, thanks for not giving up on me!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.