Solved

center a horizontal nav bar

Posted on 2011-03-18
15
422 Views
Last Modified: 2012-05-11
I'm having trouble getting the top nav bar dropdowns to center.  As you can see they are currently aligning to the left.

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

Expert Comment

by:Mark Brady
ID: 35169005
I see you have solved the centering problem but in my opinion, the items are much easier to read if they are aligned to the left. Centering each menu item looks a bit hard to read and I develop websites all day long for a job. however, it is up to each designer how they like their menus to look. I'm just telling you how my clients like their menus so perhaps you should consider that? Of course you don't have to....

If you are still not happy with your menu and the look of that top banner area, let me know what you want and I will write the CSS and html for you.
0
 

Author Comment

by:smitty62
ID: 35169032
I still would like to get it center, and your opinion on what if anything I should do to make it look more like a dropdown menu.  I thought about putting a line between them or perhaps a carrot (down arrow) next to them so that people would recognize it better as a dropdown menu.  What are your thoughts?
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35173587
Personally I like pipes " | " between horizontal menu items. It looks tidy. On the actual drop down menu items, if they have another flyout menu to those items you could put a " > " arrow on the right hand side of them to let people know there is another menu attached to those items. Like this

HOME | ABOUT US | PICTURES | BLAH BLAH
              Who we are
              Our Staff  >
                                  John
                                  Wendy
                                  Richard

Something like that would look wuite nice and tidy perhaps?
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35173608
Your topnavbar is still aligning to the left and I don't see any "float:left" rule anywhere for that element. I can see that is is set at 100% width and that is working properly so perhaps you could add a line like this:

text-align:center;

to that element to get everything back into the center as text-align is automatically left by default. See if that helps. If not, please post your CSS and I'll see if i can find why it is aligning to the left but try my suggestion first.
0
 

Author Comment

by:smitty62
ID: 35180470
I put in the text-align:center;  but it didn't make a difference.  I want the dropdowns to remain left aligned, but the title's on the blue nav strip to be centered.  I also want the blue strip to extent to 100% of the screen.

http://insurance.illinois.gov/dropdown/menu.html
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35184355
Ok looks like you have made progress now, well done. I'm glad you took my advice on left aligning the dropdown menu items. It looks so much nicer and easier to read I think. So now the blue strip IS extending to the full width of the banner and the dropdown items are left aligned, AND the top menu titles are centered within their respective windows. So what is left to do now? Do you want the whole menu to slide to the center? or are you going to keep it on the left?

If you want to put the entire menu to the center, put all of the contents (the menu titles AND dropdown menu items) inside another div and align it to the center. Like this:

#menu-container
{
position     :relative;
text-align   :center;
padding     :0px;
width         :1250px; /* change width and height to suit the menubar size. Give it hard coded sizes */
height        :20px;
}


Now in your page add this

<div id="menu-container">
<!-- put all of your menu information inside this div as this div will align it's content to center -->
</div><!-- end of menu-container div -->
0
 

Author Comment

by:smitty62
ID: 35184511
Nope, it didn't work.  This is what it looks like now.  Also, how do I stop the header from wraping when the browser window is made smaller.

http://insurance.illinois.gov/dropdown/menu2.html
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 20

Expert Comment

by:Mark Brady
ID: 35184661
I'm out of the office 4 a couple of hours so will look at it when I return. might be time to post ur entire page and your CSS sheet so I can duplicate the problem and fix it
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35185663
smitty62: you didn't do as I said. you added some stuff to my suggestion code and that is why it's not working.

Remove "float:right" from the code for TopNavBar div.
Also, remove "width:1000px" - that line is limiting the menubar width to 1000px and you want it to fill the width entirely right? Remove it or make it the measurement of the full width like 1264px or whatever the full width is.

I won't be able to offer any more help on this question unless you are willing to do what I have asked several times now and that is post your full page code, and your full CSS sheet so I can make a clone of it and get it centered. Guessing is to hard. Try doing as I suggested in this post though, that will put it back to full width 100% a\t least.

The main problem now is you are missing the <center> tag in your HTML document. After the <body> tag you must use a <center> tag to have everything that is not floated, centered. Perhaps you removed it by mistake?
0
 

Author Comment

by:smitty62
ID: 35189278
Sorry, I thought you would be able to grab the page from a view source.  I didn't notice the paper clip below until now.  I do thank you for you patience with me, and yes it is centered now.  I just have one more problem to resolve.  How do I get the header NOT to wrap when I shrink the browser window?  I imbeded the CSS into the html file for you.  Thanks.
menu2.html
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35193798
smitty thanks for attaching the code. Yes I can view page source but to view the CSS I have to open developer tools and even then it is hard to change the values so it's better to attach the CSS so I can modify it and see instant results.

The wrapping problem is being caused by the topnavbar set to width:100%. If you can stomach setting a page width for the project (I do this) then change the width:100% to width:1024px (or give it a higher width depending on your page content. 1024px is a good standard width for a website and cover most monitors.

The menu will stop wrapping and start adding a horizontal scroll bar when the user reduces the window width. Does that solve your issue?
0
 

Author Comment

by:smitty62
ID: 35193976
WOW! That worked good.  I'll have to adjust the middle banner, but just one little thing.  I noticed when I made the change that the top nav bar shifted to the right, and the bottom nav bar shifted to the left.  Is there some way I can get rid of all the white space on the top and sides of the header.

http://insurance.illinois.gov/dropdown/menu3.html
0
 
LVL 20

Accepted Solution

by:
Mark Brady earned 500 total points
ID: 35195119
Without looking at your code (I'm really busy trying to get a job done) I would say that is because you have either floated the bottom menu to the right or you could play around with the alignment values and width values. Try making anything inside the "page" div 100% width. If that doesn't work then give them all the same width value (ie: width:1024px";)
0
 

Author Closing Comment

by:smitty62
ID: 35198177
Thank you for all your help.
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 35203350
No probs. your test link still shows the floating left and right problems still aren't fixed but if you put everything inside the #page div and center that, then nothing will float outside of it.

#page
{
position:relative;
width:1024px; /* or whatever your main width will be */
overflow:hidden; /* this line is important */
}

So your page should look like this

<html><head><title></title>
<!-- all your CSS inserting code here or link to external style sheets here
</head>
<body>
<center>
<div id="page">
<!-- now put all your code for the entire page inside this main div. Everything will be 1024px max wide and nothing will float outside of this width. Make all your menus the same width 1024px for eg. so they take up the entire width. add text-align   :center; to any elements you want the text to align to the center. This will also float any images or other content to the center unless those elements have their own set of CSS rules.

</div><!-- end of page div -->

hope this helps and thanks for the points.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

743 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

11 Experts available now in Live!

Get 1:1 Help Now