SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal nav bar problem

    I'm trying to get my horizontal bar to fit right in middle of my page. It supposed to be 774px wide. I'm also trying to add round (curve) edges to both ends. Here's my css code that I got from a template. Right now, the nav bar is to the left, short and doesn't fit the whole page.

    Here's the css code:


    Code:
    /* NAVIGATION MENU */
    #Nav {
    	margin: 0px;
    	height: 27px;
    	background: url(/images/contbg2.gif);
    }
    
    /*New CSS Rules*/
    
    /* CSS Document */
    /*Nav Bar CSS rules*/
    
    
    #nav {
    
    	margin: 0;
    	padding: 0;
    	height: 27px;
    	float: left;
    	width:100%;
    	/*
    	border: 1px solid #42432d;
    	border-width: 1px 0;*/
    }
    
    #nav li {
    	display: inline;
    	list-style-type: none;
    	padding: 0;
    	margin: 0;
    	text-align: center;
    }
    
    #nav a, #nav a:link,
    #nav a:visited {
    	font-size:16px;
    	color:#000;
    	background: url(../images/nav-bg.gif);
    	padding: 3px 16px 6px 16px;
    	float: left;
    	width: auto;
    	border-right:1px solid #ACACE3;
    	text-decoration: none;
    	
    	font: bold 1em/1em Arial, Helvetica, sans-serif;
    }
    #nav li:first-child a {
    	border-left: 1px solid #ACACE3;
    }
    #nav a:hover, #nav a:active {
    
    	color:#fff;
    	background: url(../images/nav-hover-1.gif);
    }
    
    
    
    
    
    
    
    /*End of New CSS Rules*/
    /*
    
    #navLinks {	
    	text-align: center;
    	height: 27px;
    	background: url(/images/nav.gif) no-repeat top center;
    }
    
    #navLinks ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    }
    
    
    #navLinks li {
    	float: left;
    	margin: 0 2em;
    }
    #navLinks li a {
    
    	background: url(/images/nav.gif) no-repeat top center;
    	height: 2em;
    	line-height: 2em;
    	float: left;
    	width: 9em;
    	display: block;
    	
    }
    	
    
    
    #nav a, #nav a:link, #nav a:visited {
    	font-size: 16px;
    	color: #000000;
    	text-decoration: none;
    	padding: 3px 16px 6px 16px;
    	margin: 0px 12px;
    	background: url('/images/nav.gif') no-repeat top center;
    }
    #nav a:hover, #nav a:active {
    	background: url(/images/nav-hover.gif) repeat-x top center;
    	color: #fff;
    }*/
    /*#navLeftEnd {
    	height: 27px;
    	background: url(/images/nav-left.gif) no-repeat top left;
    }
    #navRightEnd {
    	margin-left: 17px;
    	height: 27px;
    	width: 774px;
    	background: url(/images/nav-right.gif) no-repeat top right;
    }*/
    Here's the html file


    Code:
    <body>
    
    <div id="container">
    
    	
      <div id="header"> <img src="/images/header.gif" /> </div>
    	  
    	 	
    <!--  <div id="Nav"> -->
        	
        
          <ul id="nav">		  
    		  	<li id="nav-index"><a href="/index.htm">Home</a></li>
    			<li id="nav-products"><a href="/products.htm">Products</a></li>
    		  	<li id="nav-howitworks"><a href="/howitworks.htm">How It Works</a></li>
    		  	<li id="nav-faq"><a href="/faq.htm">FAQ</a></li>
    		  	<li id="nav-partners" ><a href="/partners.htm">Partners</a></li>
    		  	<li id="nav-about"><a href="/about.htm">About Us</a></li>
    		  </ul>	
    		
    <!--	</div> -->
    </div>
    
    </body>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got a link so I can copy the images (which will allow me to rebuild the menu on my end)?

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re:

    Thank you for your quick repsonse. I dont have the link, but I attach the gif files. Please let me know if you need anything else.
    Attached Files Attached Files

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Razzor, I'm going to tackle this in the morning when I wake up.

    Hope you don't mind.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    If you want the nav centred then you will need to give it a width and remove the float.

    At present it is 584px wide so you would center it like this.

    Code:
    #nav {
        margin: 0 auto;
        padding: 0;
        height: 27px;
        width:584px;
    }
    However if you are adding to it then you will need to change the width accordingly.

    Alos note that IE6 doesn't understand first-child so you would need to add a class to the first list item for IE.

    e.g.
    Code:
    #nav li:first-child a {
        border-left: 1px solid #ACACE3;
    }
    #nav li.fc a {
        border-left: 1px solid #ACACE3;
    }
    Code:
    <li id="nav-index" class="fc"><a href="/index.htm">Home</a></li>

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Dan. I look forward to seeing your work. And Paul, I'm going to try to implement your suggestions and get to you on that very soon.

    Thank you all.

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Following on from what Paul said, to allow for text resizing you need to set your sizes in ems. Setting the padding and line height of the <a> elements allows you to set the size of the <ul> in ems as well and not have it break when text is resized.
    Code:
    #nav {
    	margin: 0 auto;
    	padding: 0;
    	height: 1.6em;
    	width: 37em;
    }
    
    #nav a, #nav a:link,
    #nav a:visited {
    	font-size:16px;
    	color:#000;
    	background: url(images/nav-bg.gif);
    	padding: 0 1em;
    	float: left;
    	border-right:1px solid #ACACE3;
    	text-decoration: none;
    	font: bold 1em/1em Arial, Helvetica, sans-serif;
    	height: 1.6em;
    	line-height: 1.6em;
    }


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
  •