css navigation

nandugan · 10-12-2011, 10:40 AM

Hello,

I am working on a new project. I am beginner, trying to design a fully css based site.

Please check the link here.

http://www.way2web.in/nbj/index.html

In the top navigation, the wants to change one of the link as interior & exterior.

I tried adding the new text and adjusted the nav width in css.

The other nav links are smaller in size, only the interior & exterior is a longer.

when i adjust the width in css, its looking like more space between the links.

How to accomplish this? . There should not be more space between the menus but i need to add the longer word interior & exterior.

Code:

<body>

<div id="container">
<div id="headerwrap">
<div id="header"></div>

<div id="navwrap">
<div id="nav">
<ul>
<li><a href="#">ADVERTISING</a></li>
<li><a href="#">FASHION</a></li>
<li><a href="#">INTERIOR & EXTERIOR</a></li>
<li><a href="#">CONTACT</a></li>
</ul></div>
</div>

</div>

<div id="sliderwrap">
<div id="slider" style="width:1100px; height:445px">
	<img src="images/1.jpg" alt="" />
	<img src="images/2.jpg" alt="" />
	<img src="images/3.jpg" alt="" />
	<img src="images/4.jpg" alt="" />
    <img src="images/5.jpg" alt="" />
</div></div>

<div id="footer">&copy; Copyright 2011. All rights reserved.</div>
</div>

</body>

CSS:

Code:

#headerwrap{
	width:1100px;
	height:87px;
	}

#header{
	width:463px;
	height:87px;
	background-image:url(../images/logo.jpg);
	float:left;
		}
	
		
#navwrap{
	float:right;
	width:500px;
	height:87px;
		}

#nav{
	width:480px;
	height:57px;
	padding:20px 0px 3px 20px;
	font-family:"Futura Bk";
	font-size:12px;
	color:#909090;
	
}

#nav ul{
	margin:38px 5px 2px 70px;
	list-style:none;
	
}

#nav li{
	margin:0px;
	padding:0px;
	display:inline;
	
}

#nav  a{
	float:left;
	display:block;
	padding-top:6px;
	width:90px;
	height:20px;
	text-align:center;
	font-size:12px;
	text-decoration:none;
	color:#6e6b6b;
	
	}

	
#sliderwrap{
	clear:both;
	width:1100px;
	height:445px;
	margin:0px;	
	}

#footer{
	width:1100px;
	height:70px;
	font-family:"Futura Bk";
	font-size:12px;
	color:#6e6b6b;
	padding: 15px 5px 5px 5px;
	
	
	}

can anyone help me.

Thanks