Solved

How to center a UL List inside a div container?

Posted on 2007-11-14
14
6,639 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 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

719 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