Solved

Center a dropdown menu line in css

Posted on 2011-03-11
4
238 Views
Last Modified: 2012-05-11
No matter what I try I can't get this display menu line to center.  It also wraps even when I use white-space:nowrap.  How can I resolve these problems:

http://insurance.illinois.gov/2011_NewHeader/menu.html
0
Comment
Question by:smitty62
  • 2
4 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 35112769
Try this css instead:
#topNavBar {
    background: none repeat scroll 0 0 #0000FF;
    font-weight: bold;
    margin: 0 auto;
    width: 775px;
}
0
 

Expert Comment

by:phd1974
ID: 35112784
You can try one of two things:

1.) use the align attribute in your div tag

2.) Place your menu within a table that spans 100% of the page, then center align the menu in a TD tag.
0
 

Author Comment

by:smitty62
ID: 35112805
I tried text-align, and that didn't work.  I prefer to keep exclusively CSS with no tables.  Is there another align attribute I should try, and if so where in the style sheet should I put it?
0
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 35114396
Try this css, which will align links to centre of blue line:
#nav {
    line-height: 1.5em;
    list-style-position: outside;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 780px;
}
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

706 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

17 Experts available now in Live!

Get 1:1 Help Now