Solved

Center a dropdown menu line in css

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

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…
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…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

856 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