Solved

expand bar on both sides of css menu

Posted on 2011-03-18
6
309 Views
Last Modified: 2012-08-13
I  finally got the horizonal css menu nav bar to center, but now I can't get the bar to expand to 100% of width because I had to declard a width size in order to center it.  Is there any way around this problem.

 http://insurance.illinois.gov/dropdown/menu.html
0
Comment
Question by:smitty62
  • 4
6 Comments
 
LVL 20

Expert Comment

by:Mark Brady
Comment Utility
After your <body> tag, add this

<center>

Now change the width of the horizontal navbar to 100% instead of 825px so it fills the whole width or change the width size to 1264px. The problem of centering is because you are missing the <center> tag to center all page content. For each item you don't want centered, you add "text-align:left" to those div elements. Anyway try that and see how it looks.
0
 
LVL 20

Expert Comment

by:Mark Brady
Comment Utility
Actually you would be better off putting the top nav bar inside the DOIBanner container as that container has a width property of 1265px and the nav bar looks to be inside it.
0
 

Author Comment

by:smitty62
Comment Utility

The bar becomes uncentered and does not expand.

http://insurance.illinois.gov/dropdown/menu.html
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 3

Expert Comment

by:prafullamjn
Comment Utility
The Horizontal size is maximum 1000px if it increase more than that it will come a scroll bar. please fix the size and place it.
0
 
LVL 20

Expert Comment

by:Mark Brady
Comment Utility
smitty62: Can you post your webpage and the css if it is external. It would help if I could edit it myself and get it centered. I can't see your code so don't know what to tell you but this will be something very VERY simple to fix. Just need to see all of your code for that page.
0
 
LVL 20

Accepted Solution

by:
Mark Brady earned 500 total points
Comment Utility
it looks to me like you need to add

text-align:center;

to your top navbar code.

#topNavBar{
background:#00F;
font-weight:bold;
margin: 0 auto;
width:100%;
text-align:center;
}

that will center anything you put inside the topNavBar div so it should center all your menu items. If not then the ul and li styles are over-riding it and you need to play around with text-align:center; in those elements as well.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

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!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

771 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

15 Experts available now in Live!

Get 1:1 Help Now