Advanced Search

Results 1 to 7 of 7

Thread: Full width CSS menu bar?

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Question Full width CSS menu bar?

    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>
    Last edited by mlegg; 02-26-2011 at 06:13 PM. Reason: added url

  2. #2
    Join Date
    Feb 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    width:105px;

    Have you tried changing that?

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    Hi there mlegg,

    adding this...
    Code:
    
    .pureCssMenu {
        width:946px;
     }
    
    ...to the stylesheet seems to effect a cure.

    coothead

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Default

    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?

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    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

  6. The Following User Says Thank You to coothead For This Useful Post:

    mlegg (02-26-2011)

  7. #6
    Join Date
    Jan 2009
    Location
    NH
    Posts
    302
    Thanks
    38
    Thanked 8 Times in 8 Posts

    Default

    Thanks a ton.

  8. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    672
    Thanks
    1
    Thanked 110 Times in 108 Posts

    Default

    No problem, you're very welcome.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •