Full width CSS menu bar?

**mlegg** · 02-25-2011, 08:30 PM

Can you help me figure out how to get the navigation menu to be full width (and centered)? This page is not uploaded yet, I only have the code below.
EDIT: I uploaded it here so you can see it. http://tinyurl.com/687uw6b I will also take the css out of the html code after and put it onto my style sheet once this is solved.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>NECommercialGroup.com</title>
<link rel="stylesheet" type="text/css" href="NECG-styles.css"><!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->

<style type="text/css">
 li.c1 {border:none}
</style>

<style type="text/css">
 div.c2 {margin: auto}
 img.c1 {border:0;width:88px;height:31px}
</style>
</head>
<body>
<div id="container">
<div id="mainPicture"></div>
<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#FFD700;
	background-repeat:repeat;
	border-color:#AAAAAA;
	border-width:1px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:105px;
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#FFD700;
	border-width:0px;
	border-color:#6655ff;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:15px Georgia;
	color: #003366;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:5;
	height:16;
	display:inline-block;
	background-color:#AAAAAA;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#003366;
	border-color:#665500;
	border-style:solid;
	font:15px Georgia;
	color: #ffffff;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#003366;
	border-color:#665500;
	border-style:solid;
	font:15px Georgia;
	color: #ffffff;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrv_anim_1.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:11px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_anim_1o.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_double_1.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_double_1o.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arr_double_1o.gif)}
</style>
<!-- End PureCSSMenu.com STYLE -->



<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="index.html" title="Home">Home</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Product Info</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="NH.html" title="NH Listings">NH Listings</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="ME.html" title="ME Listings">ME Listings</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="MA.html" title="MA Listngs">MA Listings</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="contact.html" title="Contact Us">Contact Us</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
<div class="one">
<a href="http://29industrial.com" target="_blank"><img class="floatleft" src="images/29industrial.jpg" alt="29Industrial.com"></a>
<p><strong>29 Industrial Park Drive, Dover NH $949,000 or $5,000 per month for lease</strong></p>
<a href="http://29industrial.com/" target="_blank">MLS# 2835815</a><br>
<p>One of the nicest industrial buildings available anywhere, a complete renovation from the ground up, available for sale or lease, Class A office space, all systems replaced, complete office and warehouse renovation, adjacent to major highways, abundant parking, this is a must see if you need quality space for your working environment. Execuitve offices included. Very easy to show, transfer of buidling for either sale or lease is negotiable.</p>

<div id="footer">Copyright &copy; NECommercialGroup.com | <a href="mailto:john@samonasgroup.com">E-Mail</a></div>
</div>
<!--end #container --></div>
</body>
</html>

**Abdullahabin** · 02-26-2011, 03:58 AM

width:105px;

Have you tried changing that?

**coothead** · 02-26-2011, 09:06 AM

Hi there mlegg,

adding this...

Code:


.pureCssMenu {
    width:946px;
 }

...to the stylesheet seems to effect a cure.

coothead

**mlegg** · 02-26-2011, 03:16 PM

Thanks coothead. Now how do I get the menu to be centered? I've tried margin: 0 auto; in a bunch of different lines (when using Firefox with Web Developer Toolbar) to see it it changes anything. I can't get this centered. Is it because of the float attribute somewhere?

**coothead** · 02-26-2011, 05:55 PM

Hi there mlegg,

to center the links requires that you discard my previous post suggestion.

Instead add the highlighted in red rules to your stylesheet....

Code:


ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#FFD700;
	background-repeat:repeat;
	border-color:#AAAAAA;
	border-width:1px;
	border-style:solid;
 }
ul.pureCssMenu {
        width:594px;
        padding-left:352px;
 }

Note:-

It is imperative that the ul.pureCssMenu rules are placed after the
ul.pureCssMenu,ul.pureCssMenu ul rules to achieve the desired effect.

coothead