Log in

View Full Version : Resolved 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.


<!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...


.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? :confused:
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....


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
mlegg
02-26-2011, 07:12 PM
Thanks a ton.
coothead
02-26-2011, 07:29 PM
No problem, you're very welcome. ;)