SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    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)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,616
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    A really simple way to do it would be to add this to your CSS and use the background image attached:

    Code:
    #topnav {background: url(bg.jpg) repeat-x 0 100%;}
    Attached Images Attached Images

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    This could probably be simplified but should work.

    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;
        position:relative;
    }
    #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;
        border-left:201px solid #fff;
    }
    #secondnav h4 {
        padding:.9em 0 .9em 35px;
        font:bold .8em Verdana, sans-serif;
        color:#666;
        border-top:2px solid #fff;
        margin-top:-2px;
    }
    * 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>

  4. #4
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both for replies.

    ralph.m that's a great idea but Paul O'B solution might be more useful to me


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
  •