?
Solved

How to center a UL List inside a div container?

Posted on 2007-11-14
14
Medium Priority
?
6,646 Views
Last Modified: 2010-04-21
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!!!

0
Comment
Question by:zefex
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
  • 3
14 Comments
 

Author Comment

by:zefex
ID: 20285066
I would like my NAV to look like this: http://www.apple.com/
0
 
LVL 30

Expert Comment

by:Steggs
ID: 20285243
The way to center a floated menu is to give the parent div a width and margin auto
0
 
LVL 12

Accepted Solution

by:
oceanbeach earned 2000 total points
ID: 20285535
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 12

Expert Comment

by:oceanbeach
ID: 20285592
Oops, "...has equal width buttons..." should have been "...has equal width buttons that, put together, span to fill 100% of their container..."
0
 

Author Comment

by:zefex
ID: 20286417
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
 
LVL 30

Expert Comment

by:Steggs
ID: 20288556
Hey!

Adding text-align:center to

.solidblockmenu li a {}

should do it

P.S Nice looking site

Cheers guys
0
 

Author Comment

by:zefex
ID: 20290773
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
 
LVL 30

Expert Comment

by:Steggs
ID: 20292694
In what browser?

Worked fine for me in firefox
0
 

Author Comment

by:zefex
ID: 20294041
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
 
LVL 12

Expert Comment

by:oceanbeach
ID: 20302861
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
 

Author Comment

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

Author Comment

by:zefex
ID: 20305577
Also Firefox is not making the opacity filter for the images?  
0
 
LVL 12

Assisted Solution

by:oceanbeach
oceanbeach earned 2000 total points
ID: 20305855
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
 

Author Closing Comment

by:zefex
ID: 31409247
oceanbeach is awesome, thanks for not giving up on me!!!
0

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question