Border on navigation bar?

HTML & CSS
1

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.


<!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>
2

A really simple way to do it would be to add this to your CSS and use the background image attached:

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

Hi,

This could probably be simplified but should work.


<!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

Thank you both for replies.

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