Solved

How to center a UL List inside a div container?

Posted on 2007-11-14
14
6,599 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
  • 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 500 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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 500 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Divi Theme - extra fonts I don't want 13 23
Changing Color of Page Section 4 21
css selector 1 16
flex div overflows its container 4 20
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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.…

813 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now