Solved

Center a dropdown menu line in css

Posted on 2011-03-11
4
242 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Element alignment and word wrapping 9 62
slider is moved too far too the right...how to move back left? 4 36
Centering a nested div 16 60
Change javascript css 1 21
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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…
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.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

863 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

20 Experts available now in Live!

Get 1:1 Help Now