Navigation list Border Issue

**FCC** · Jul 20, 2006 18:47

Hello All,

I was building this navigation list and I can't seem to the get the effect I want. Here is what I have:

Code:

ul#nav
{
	text-align: center;
	height: 130px;
}

ul#nav li a
{
	color: #535353;
}

ul#nav li
{
	display: inline;
	padding: 0px 2px 0px 8px;	
	height: 130px;

}

ul#nav li a
{
	height: 130px;
	border-right: 2px solid gray;
}

ul#nav li a:hover
{
	background-color: #365d76;
}

ul#nav li.last
{
	border-right: 0px;
}

The HTML

Code:

<div id='navigation'>
<ul id='nav'>
<li><a href="homeBasedService.php">TEST</a></li>
<li><a href="#">TEST</a></li>
<li><a href="#">活TEST</a></li>
<li class='last'><a href="#">TEST</a></li>
</ul>
</div>

The thing I want is the borders on the right side of each li element to be 130 px, and when the user hovers over the link the entire like li element changes color. But right now the effect is very small.....

Can anyone help me?

**all4nerds** · Jul 21, 2006 06:55

Hello

You use almost no width's, display block and the hight on the A tag

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	
	*{margin:0;padding:0;}
	
	#nav{text-align:center;list-style:none;}

	#nav li{float:left;width:50px;}
	
	* html #nav{height:1%;}
	
	#nav li a{
	color: #535353;
	display:block;
	height:130px;
	border-right: 2px solid gray;
	padding:0px 2px 0px 8px;
	}
	#nav li a:hover{background:#365d76;}

	#nav li .last{border-right:none;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>


<ul id='nav'>
<li><a href="homeBasedService.php">TEST</a></li>
<li><a href="##">TEST</a></li>
<li><a href="##">TEST</a></li>
<li ><a href="##" class='last'>TEST</a></li>
</ul>


</body>
</html>

User Tag List

Thread: Navigation list Border Issue

Thread Tools

Display

Navigation list Border Issue

Bookmarks

Bookmarks

Posting Permissions