Solved

How to center a UL List inside a div container?

Posted on 2007-11-14
14
6,624 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

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

749 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