...

View Full Version : Centering and standardizing a horizontal menu...



cvecchi
11-20-2009, 06:31 AM
Good evening,

I'm trying to center a horizontal menu on a website, and I can't seem to get the right code tags in the write places. I'd like to get the links on the menu to center on the page, and perhaps to display in a consistent width text box. My menu bar is 900px, and there are 10 links, so for instance I would like to reduce these boxes containing the links to a consistent 90px. Any thoughts?

website - http://www.squadron282.com

CSS Code:


.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 900px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; white-space:nowrap}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}

HTML Code:


<div class="nav2">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="missions.html" class="selected">CAP Missions</a></li>
<li><a href="sqinfo.html">Squadron Info</a></li>
<li><a href="commanderscorner.html">Commander's Corner</a></li>
<li><a href="resources.html">Member Resources</a></li>
<li><a href="pics.html">Photo Gallery</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</div>

abduraooft
11-20-2009, 09:47 AM
You could remove all display:block/floats and use something like

.nav2 ul {/*style_screen.css (line 48)*/
background-color:#7FA2CA;
border-bottom:1px solid #365397;
border-top:1px solid #365397;
/*float:left;*/
font-weight:bold;
margin:0;
padding:0;
text-align:center;
width:900px;
}
.nav2 li {/*style_screen.css (line 49)*/
display:inline;
line-height:2.5;
list-style:none;
margin:0;
padding:0;
}
.nav2 li a {/*style_screen.css (line 50)*/
border-right:1px solid #365397;
color:#FFFFFF;
/*display:block;
float:left;*/
font-size:100%;
margin:0;
padding:5px 10px;
text-decoration:none;
text-transform:uppercase;
}

cvecchi
11-20-2009, 01:32 PM
Gave that a shot, and it ended up dropping my horizontal formatting for some reason. Now all navigation links are stacked on top of each other!

Here's what the code looked like:



.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.00em; width: 900;}
.nav2 ul {/*style_screen.css (line 48)*/
background-color:#7FA2CA;
border-bottom:1px solid #365397;
border-top:1px solid #365397;
/*float:left;*/
font-weight:bold;
margin:0;
padding:0;
text-align:center;
width:900px;
}
.nav2 li {/*style_screen.css (line 49)*/
display:inline;
line-height:2.5;
list-style:none;
margin:0;
padding:0;
}
.nav2 li a {/*style_screen.css (line 50)*/
border-right:1px solid #365397;
color:#FFFFFF;
/*display:block;
float:left;*/
font-size:100%;
margin:0;
padding:5px 10px;
text-decoration:none;
text-transform:uppercase;
}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 10px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}


Did I do something wrong?

Thanks!

abduraooft
11-20-2009, 01:47 PM
That works for me in FF2. Could you please update your link?

cvecchi
11-20-2009, 04:17 PM
Absolutely...here's the page - http://www.squadron282.com/index2.html

Rowsdower!
11-20-2009, 05:04 PM
It looks fine to me in IE7 and FF3. What browser are you seeing the problem in (and have you cleared your cache and retried the page)?

cvecchi
11-20-2009, 05:19 PM
OK, I figured out the css issue, and have the menu bar centered. It's created a couple additional issues....

1. The vertical "pipe" separators shown, created by the snippet below leave me without a border on the left side, but with one on the right. The plain border snippet leaves spacing between everything. Any ideas on fixing this?
border-right: solid 1px rgb(54,83,151);

2. I would really like the ability to wrap the text on each navigation link, for instance it would be "Squadron" on the top line and "Information" on the second line. The goal here is to condense the menu somewhat and allow the addition of two more links to the menu bar.

Thanks!
Chris

Excavator
11-20-2009, 05:53 PM
1. The vertical "pipe" separators shown, created by the snippet below leave me without a border on the left side, but with one on the right. The plain border snippet leaves spacing between everything. Any ideas on fixing this?
border-right: solid 1px rgb(54,83,151);


Hello cvecchi,
Either add an id or class to your first li a so you can add a left border from your CSS, or a bit of inline styling like this - <li><a href="index.html" style="border-left: solid 1px rgb(54,83,151)" class="selected">Home</a></li>

cvecchi
11-20-2009, 05:58 PM
Awesome! Thanks Excavator for the info on the line issue. I have that resolved using the inline styling you mentioned. Now....if only I can gain some insight on the text wrapping, I'd be good to go! Any takers?

I appreciate all the assistance so far!!

Chris

Rowsdower!
11-20-2009, 06:05 PM
I can't think of any good way to make that happen with inline styling in the navigation.

This is what inline-block display was designed for but it's not supported by all browsers (won't work in IE5.5 - not that it matters, but it also won't work in FF2, IE6, IE7, or IE8 as IE7).

See here for details about browser support for this display type:
http://www.quirksmode.org/css/display.html

If nothing else you could make the menu image-based. It's not ideal but it would work just fine as-is by replacing text with an image. If you do this just be sure to include alt and title attributes for the images to maintain accessibility.

cvecchi
11-20-2009, 06:37 PM
I'm not overly excited about the image based option, that's what I migrated away from when I went to this design. I could create another class if needed for the line on the left of the menu bar. I'd much rather have the ability to to do a two-line, text based menu that I can keep centered up on the page. I'd also like to keep the rollover effect and the "class=selected" formatting.

Is there a way to essentially create 10 text boxes at 90px each, stack two lines of text within, then align them left to right to fill the 900px ".nav2 ul" space?

Thoughts? Thanks!

Rowsdower!
11-20-2009, 06:51 PM
I know what you mean. I avoid image-based menus like the plague.

You'll probably have to live with incomplete browser support and use display:inline-block; for the <a> tags then. That should mostly only leave FF2 users out of the loop.

Try something like this:
.nav2 li a {margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;display:inline-block;max-width:80px;line-height:12px;}

You're going to have problems with your vertical divider lines though, so be prepared to struggle with that. :thumbsup:

Excavator
11-20-2009, 07:03 PM
I'm not overly excited about the image based option, that's what I migrated away from when I went to this design. I could create another class if needed for the line on the left of the menu bar. I'd much rather have the ability to to do a two-line, text based menu that I can keep centered up on the page. I'd also like to keep the rollover effect and the "class=selected" formatting.

Is there a way to essentially create 10 text boxes at 90px each, stack two lines of text within, then align them left to right to fill the 900px ".nav2 ul" space?

Thoughts? Thanks!

Here's a good start for you. You will need to make a class so you can add padding-bottom to the li's that only have one line of text and then add your own styling too.

/edit - I deleted this one

cvecchi
11-20-2009, 07:10 PM
That works when uploaded to web...somehow though Dreamweaver doesn't render it the same way the browser does. It's making it tough to edit, but in form it does work.

http://www.squadron282.com/test/

Thanks!

Rowsdower!
11-20-2009, 07:10 PM
I haven't read Excavator's code yet but I came up with something that seems to work for FF3 at least.

Try this CSS for the nav2 section:

/*----------------------------*/
/* 2.4 - Navigation - Level 2 */
/*----------------------------*/
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {width: 900px; margin: 0px; padding: 0px; text-align: center; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold;}
.nav2 li {display: inline; /*line-height: 2.5;*/ list-style: none; margin: 0px; padding: 0px;font-size:34px;border-right:1px solid #365397;}
.nav2 li a {margin: 0px 0px 0px 0px; padding: 5px; /*border-right: solid 1px rgb(54,83,151);*/ color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;display:inline-block;font-size:10px;}
.nav2 li a.multi_line {width:90px;line-height:12px;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 10px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}

Then add class="multi_line" to any <a> tags that you want to have wrapped on 2 lines.

Excavator
11-20-2009, 07:12 PM
Ok, so scratch the padding-bottom.
Setting the height of the button works better.

This works much better than the first one I posted (I'll go delete that in a second)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="" content="authored by http://nopeople.com/design" />
<title>CSS ul navbar with no images</title>
<style type="text/css">
html, body {
background: #FC6;
font: 1.0em arial, helvetica, sans-serif;
color: #fff;
text-align:center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 900px;
margin: 50px auto;
padding: 10px 0 200px 0;
background: #9CC;
}
ul#nav2 {
overflow: auto;
background: #036;
}
#nav2 li {
display: inline;
}
#nav2 li a {
height: 3em;
width: 89px;
color: #fff;
background: #036;
text-decoration: none;
float: left;
border-right: 1px solid #f00;
}
#nav2 li a:hover {
background-color:#c0c0c0;
color: #00f;
}
</style>
</head>
<body>
<div id="container">
<ul id="nav2">
<li><a href="index.html" class="selected" style="width:88px;border-left:1px solid #f00;">Home</a></li>
<li><a href="missions.html">CAP<br />Missions</a></li>
<li><a href="sqinfo.html">Squadron<br />Info</a></li>
<li><a href="commanderscorner.html">Commander's<br />Corner</a></li>
<li><a href="resources.html">Member<br />Resources</a></li>
<li><a href="pics.html">Photo<br />Gallery</a></li>
<li><a href="contact.html">Contact<br />Us</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="#">number<br />9</a></li>
<li><a href="#">number<br />10</a></li>
</ul>
<!--end container--></div>
</body>
</html>

Excavator
11-20-2009, 07:13 PM
That works when uploaded to web...somehow though Dreamweaver doesn't render it the same way the browser does. It's making it tough to edit, but in form it does work.

http://www.squadron282.com/test/

Thanks!

Never trust DW's design view. It is not a browser and is not dependable!

Excavator
11-20-2009, 07:24 PM
And, of course, one more edit -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="" content="authored by http://nopeople.com/design" />
<title>CSS ul navbar with no images</title>
<style type="text/css">
html, body {
background: #FC6;
font-size: 90%; /*adjusts size of text and height of button... not sure I like using em*/
color: #fff;
text-align:center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 900px;
margin: 50px auto; /*just to get the container in the center, this and the padding line below are only for demo presentation*/
padding: 10px 0 200px 0;
background: #9CC;
}
ul#nav2 {
overflow: auto;
background: #036;
font: 1.0em arial, helvetica, sans-serif;
}
#nav2 li {
display: inline;
}
#nav2 li a {
height: 3em;
width: 89px;
padding: 4px 0 0 0; /*this top padding will move the text down on the button - adds to height of button as well*/
color: #fff;
background: #036;
text-decoration: none;
float: left;
border-right: 1px solid #f00;
}
#nav2 li a:hover, #nav2 li a.selected {
background-color:#c0c0c0;
color: #00f;
}
</style>
</head>
<body>
<div id="container">
<ul id="nav2">
<li><a href="index.html" class="selected" style="width:88px;border-left:1px solid #f00;">Home</a></li>
<li><a href="missions.html">CAP<br />Missions</a></li>
<li><a href="sqinfo.html">Squadron<br />Info</a></li>
<li><a href="commanderscorner.html">Commander's<br />Corner</a></li>
<li><a href="resources.html">Member<br />Resources</a></li>
<li><a href="pics.html">Photo<br />Gallery</a></li>
<li><a href="contact.html">Contact<br />Us</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="#">number<br />9</a></li>
<li><a href="#">number<br />10</a></li>
</ul>
<!--end container--></div>
</body>
</html>

cvecchi
11-20-2009, 07:31 PM
Rowsdower! - Your code seems to work well, with one conflict. With "class=selected", I can't apply the "class=multi_line" attribute.

http://www.squadron282.com/test/index2.html

Rowsdower!
11-20-2009, 07:33 PM
@Excavator

Yes, but that doesn't really center the menu with dynamic width anymore though. My proposed CSS edit keeps things centered and dynamic but all text is bottom-aligned which is probably not ideal either.

I wonder if there is any good way to combat this. Perhaps a span of dummy text in my version that forces a line wrap but has visibility:hidden so that the text does not actually appear? That's extremely hacky and uses extra markup though. I just can't think of anything else that preserves all of the OP's desired functionality...

Rowsdower!
11-20-2009, 07:34 PM
You can apply multiple classes to a single element. Just use a space between them, like so:


class="selected multi_line"

Excavator
11-20-2009, 07:40 PM
I haven't read Excavator's code yet but I came up with something that seems to work for FF3 at least.

Try this CSS for the nav2 section:

/*----------------------------*/
/* 2.4 - Navigation - Level 2 */
/*----------------------------*/
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {width: 900px; margin: 0px; padding: 0px; text-align: center; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold;}
.nav2 li {display: inline; /*line-height: 2.5;*/ list-style: none; margin: 0px; padding: 0px;font-size:34px;border-right:1px solid #365397;}
.nav2 li a {margin: 0px 0px 0px 0px; padding: 5px; /*border-right: solid 1px rgb(54,83,151);*/ color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;display:inline-block;font-size:10px;}
.nav2 li a.multi_line {width:90px;line-height:12px;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 10px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}

Then add class="multi_line" to any <a> tags that you want to have wrapped on 2 lines.

Wow, that works very well.

cvecchi
11-20-2009, 07:45 PM
That's working great Rowsdower...I just need to scrunch it a little so all will fit.

http://www.squadron282.com/test/index2.html

Any guess why the line on the left of the menu only goes half height?

Thanks!
Chris

Rowsdower!
11-20-2009, 07:52 PM
Here's an example of the extra markup and extremely hacky way that the text could all be made to align toward the top of the menu:


<li><a class="multi_line" href="contact.html">Contact Us <span style="visibility: hidden;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blank</span></a></li>

Something like that could be done with menu items that don't wrap on their own. In this case you would do away with the class="multi_line" since all menu items would be made to wrap. You would just pull the .multi_line css up into the main "nav2 li a" style section.


Anyway, don't forget to knock off your right-hand border for the last <li> element.

cvecchi
11-20-2009, 07:59 PM
What do you guys think?

http://www.squadron282.com/test/index2.html

Thanks for the help!

Rowsdower!
11-20-2009, 08:00 PM
...Any guess why the line on the left of the menu only goes half height?...

That's because the border is applied to the <a> element and not the <li> element. The <a> element is only as high as the text it contains. Try switching around to use the <li> and the problem should be solved.

Rowsdower!
11-20-2009, 08:02 PM
What do you guys think?

http://www.squadron282.com/test/index2.html

Thanks for the help!

Hmmm... It isn't panning out so well in IE7. The method works, but the widths for the links are too wide and you have an item wrapping to the next line.

FF3 looks good though.

cvecchi
11-20-2009, 08:04 PM
Works perfect...thanks very much!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum