SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist FCC's Avatar
    Join Date
    May 2006
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation list Border Issue

    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?

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


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
  •