Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 440
  • Last Modified:

center a horizontal nav bar

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
smitty62
Asked:
smitty62
  • 9
  • 6
1 Solution
 
Mark BradyPrincipal Data EngineerCommented:
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
 
smitty62Author Commented:
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
 
Mark BradyPrincipal Data EngineerCommented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Mark BradyPrincipal Data EngineerCommented:
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
 
smitty62Author Commented:
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
 
Mark BradyPrincipal Data EngineerCommented:
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
 
smitty62Author Commented:
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
 
Mark BradyPrincipal Data EngineerCommented:
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
 
Mark BradyPrincipal Data EngineerCommented:
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
 
smitty62Author Commented:
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
 
Mark BradyPrincipal Data EngineerCommented:
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
 
smitty62Author Commented:
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
 
Mark BradyPrincipal Data EngineerCommented:
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
 
smitty62Author Commented:
Thank you for all your help.
0
 
Mark BradyPrincipal Data EngineerCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 9
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now