Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

expand bar on both sides of css menu

Posted on 2011-03-18
6
Medium Priority
?
362 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
[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
  • 4
6 Comments
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35168932
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
ID: 35168964
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
ID: 35168985

The bar becomes uncentered and does not expand.

http://insurance.illinois.gov/dropdown/menu.html
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 3

Expert Comment

by:Prafulla Maharjan
ID: 35170032
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
ID: 35170386
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 2000 total points
ID: 35173661
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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…
Suggested Courses

721 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