SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border on navigation bar ?

    Border on navigation bar ?

    Hi all

    I have a simple example of the nav I'm working with here.

    untitled

    It's a list of links that have a white border on the sides and bottom that separate it form a second nav bar below.

    When a button is selected it's bottom border changes to color of the bar below and joins them. Like the Home button in this example.

    My Problem is I want the white border on the bottom of the buttons to go along the whole of the dark gray bar like in attached image. I can't think how to do this and still have the gold bottom border when the button is selected.


    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>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 #topnav{
         background:#898989;
         overflow:hidden;
       	 margin:2px 0 0 20px;
       }
       *html #topnav{
         height:1%;
       	 overflow:visible;
       }
    	 #topnav ul#nav{
         overflow:hidden;
         padding-left:200px;
       }
       #topnav ul#nav li{
       	display:inline;
       }
       #topnav ul#nav li a {
        border-right:2px solid #fff;
        border-bottom:2px solid #fff;
       	color:white;
       	display:block;
       	float:left;
       	font:bold .8em Verdana, sans-serif;
       	padding:.75em 1.2em;
       	text-decoration:none;
       }
       #topnav #home a {
       	border-left:2px solid #fff;
       }
       #topnav ul#nav li a:hover{
       	color:#fff;
       	background-color:#3399CC;
       }
       #topnav ul#nav a#select{
       	background-color:gold;
       	border-bottom:2px solid gold;
       	color:#666;
       }
    
      
       #secondnav{
       	background:gold;
       	margin-left:201px;
       }
       #secondnav h4{
       	padding:.9em 0 .9em 35px;
       	font:bold .8em Verdana, sans-serif;
       	color:#666;
       }
       * html #secondnav h4{
        height:1%;
        overflow:visible;
       }
    	</style>
    </head>
    
    <body>
      <div id="topnav">
        <ul id="nav">
          <li id="home"><a href="#" id="select">Home</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">People</a></li>
          <li><a href="#">Contact</a></li>
        </ul>  
      </div>
      
      <div id="secondnav">
         <h4>Home</h4>
      </div>
      
    </body>
    </html>
    Attached Images Attached Images
    • File Type: gif 1.gif (4.1 KB, 3 views)


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
  •