Horizontal nav bar problem

**razzor** · Sep 15, 2007, 20:43

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>

**Dan Schulz** · Sep 15, 2007, 20:53

Got a link so I can copy the images (which will allow me to rebuild the menu on my end)?

**razzor** · Sep 16, 2007, 06:21

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.

**Dan Schulz** · Sep 18, 2007, 00:22

Razzor, I'm going to tackle this in the morning when I wake up.

Hope you don't mind.

**Paul O'B** · Sep 18, 2007, 05:06

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>

**razzor** · Sep 19, 2007, 05:17

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.

**Centauri** · Sep 19, 2007, 07:26

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;
}

The SitePoint Forums have moved.

User Tag List

Thread: Horizontal nav bar problem

Thread Tools

Display

Horizontal nav bar problem

Re:

Bookmarks

Bookmarks

Posting Permissions