Tabbed nav

Get Started
1

please i am trying to place the link on the left hand side(id navigation) into tabs that looks like the background is,
this is the site, still unde r construction
reachesy.co.uk


<!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">
  <head>
    <title>Reacheasy - Foremost website for easy reach of things globally</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="reasy.css" rel="stylesheet" type="text/css"/>  
</head>
  <body>
<div id="outer">
<div id="page">
<div id="header">
<h1>Reacheasy</h1>
  <ul id="nav">
  <li class="current"><a href="index.html">Home</a></li>
     <li><a href="women.html">Women</a></li>
     <li><a href="men.html">Men</a></li>
     <li><a href="children.html">Children</a></li>
     <li><a href="homeandappliances.html">Home&amp;Appliances</a></li>
     <li><a href="visionandsound.html">Vision&amp;Sounds</a></li>
      <li><a href="motoring.html">Motoring</a></li>
      <li><a href="homemore.html">More</a></li>
      <li><a href="homecontact.html">Contact us</a></li>
      <li><a href=" rl.html">Register/Log in</a></li>
  </ul>
</div> <!--end of navigation div -->
</div>
<div id="navigation">
  <ul>
     <li><a href="left.html">Offer</a></li>
     <li><a href="left2.html">Free</a></li>
    <li><a href="/comparison/category/clotheswomen/">Women's Clothing</a></li>
     <li><a href="/comparison/category/shoeswomen/"> Women's Shoe </a></li>
     <li><a href="/comparison/category/underwear women/">Underwear&amp;Lingerie</a></li>
     <li><a href="women'sperfume.html">Perfume</a></li>
     <li><a href="/comparison/category/accessorieswomen/">Accessories</a></li>
      <li> <a href="women'smore.html">More</a></li>
  </ul>
</div> <!--end of navigation div -->
<div id="bodycontent">
<div id="bannercontainer">
<a href="img/pr.jpg"></a>
</div>
<div id="pbanner">
  <ul id="promo-banners">
  <li class="promo-banner">
    <h2>
        <a href="/comparison/category/clotheswomen/">Women's Clothing</a>
     </h2>
<a href="/comparison/category/clotheswomen/"><img height="198" width="228"  src="img/fashion.jpg" alt=" alibi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
        <a href="/comparison/category/shoeswomen/"> Women's Shoe </a>
     </h2>
<a href="/comparison/category/shoeswomen/"><img height="198" width="228"  src="img/womensshoe.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
      <a href="/comparison/category/underwear women/">Underwear&amp;Lingerie</a>
     </h2>
<a href="/comparison/category/underwear women/"><img height="198" width="228"  src="img/underwear.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
        <a href="women'sperfume.html">Perfume</a>
     </h2>
<a href="women'sperfume.html"><img height="198" width="228"  src="img/womensperfume.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
        <a href="/comparison/category/accessorieswomen/">Accessories</a>
     </h2>
<a href="/comparison/category/accessorieswomen/"><img height="198" width="228"  src="img/womensaccessories.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
        <a href="women'smore.html">More</a>
     </h2>
<a href="women'smore.html"><img height="198" width="228"  src="img/men.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
  </ul>
  </div>
</div>
</div>
<div id="footer">
<ul id="footlink">
     <li><a href="contact.html">Contact us</a></li>
     <li><a href="termsandcondition.html">Terms&amp;Condition</a></li>
     <li><a href="right.html">Copyright</a></li>
     <li><a href="faq.html">Faq</a>
</li>
</ul>
</div>
</body>
</html>

and the css is

/*
CSS for Reacheasy site
*/
	body,html {
 	margin: 0;
}
 
#page {
 	width: 1060px;
 	margin: 0 auto;
 	position: relative
 	/* is the same as: 
 	margin-top: 0;
 	margin-bottom: 0;
 	margin-left: auto;
 	margin-right: auto;
 */
}

/* sticky footer */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
/* ... */
/*
CSS for Reacheasy site
*/
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
background: url("img/aurora.jpg");
}
#outer {
    width:1060px;
    margin:auto;
    min-height:100%;
    margin-top:-52px;
    border-left:1px solid black;
    border-right:1px solid black;
background: #A1A1A1 url(backgrounds/nav-bg.jpg) repeat-y left top    
}
* html #outer {
    height:100%
}
h1 {
    font-size: xx-large;
    color: white;
    padding: 2em 0 .2em .4em;
    margin: 0;
    background: url(img/header.jpg) repeat-y right;
}
ul#nav {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: .2em 0;
    margin:0;
    background: url(img/tabs.gif);
    border: 0 solid;
}
ul#nav li {
    background: #48f url(img/tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
    border-right: 1px solid #A1A1A1;
    border: 0 solid;
}
ul#nav a {
    background: url(img/tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
    border: 0 solid;
}
ul#nav li.current {
    background-color: #48f;
    background-position: 0 -60px;
}
ul#nav li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}
#navigation {
    width: 180px;
    float:left;
}

#navigation li {
    margin: 0 1px 0 0;
    padding-left: 0px;
    text-decoration: none;
   list-style: none;
}
#navigation a {
    color: #008;
    padding-right: 10px;
    text-decoration: none;
}

#navigation a:visited{
 color: #008;
}

#bodycontent {
    float:right;
    width:880px;
    background:black;
  
}
#header {
    width:100%;
    border-top:52px solid #fff;
    border-bottom:1px solid #A1A1A1;
}
#footer {
    width:1060px;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    background-color:#fff;
    border-bottom:1px solid #000;
    color:  #000000;
    text-align:center;
    margin:0 auto;  
}

ul#footlink {
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
}

ul#footlink li { 
display: inline;
text-align:center; 
}

#bannercontainer{
       width: 800px;
       height: 300px;
       padding: 0;
       margin-left: auto;
       margin-right: auto;
       background: #eee;
       border: 1px solid #000;
    }

    #bannercontainer a{
       display: block;
       width: 800px;
       height: 300px;
       padding: 0;
       background:#eee url(img/pr.jpg) 0 0 no-repeat;
    }

    #bannercontainer a:link,#bannercontainer a:visited{
       background:#eee url(img/pr.jpg) 0 0 no-repeat;
    }

    #bannercontainer a:hover{
       background:#eee url(img/pr.jpg) 150px 0 no-repeat;
    }
#promo-banners{
  width:860px;
}

.promo-banner{
   border: medium none;
   display:block;
   float: left;
   padding: 0 19px 5px 0;
   width: 230px;
}
.promo-seo{
color:white;
display:block;
float:left;
font:12px arial;
height:75px;
margin-bottom:5px;
padding:7px 5px 0;
text-align:left!important;
width:218px;
}
.promo-seo-link{
color:#bdbdbd;
text-decoration:none;
}
.promo-seo-link:visited{
color:#bdbdbd;
}

thanks

2

It’s not really clear how you want that navigation to look. Could you post a picture of what it should look like, or explain it a bit more?

3

thanks ralph, please i would like it to be like the left hand navigation in tesco.com(
Start shopping
My account
Book a delivery slot
Amend your order
Favourites
Every little helps
Special offers
Real food recipes)
thanks

4

hello, reposting my question, please the id navigation in my html seem to be a block tab, pleae ow can each link be induvidual tab and not a block thanks


<!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">
  <head>
    <title>Reacheasy - Foremost website for easy reach of things globally</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="reasy.css" rel="stylesheet" type="text/css"/>  
</head>
  <body>
<div id="outer">
<div id="page">
<div id="header">
<h1>Reacheasy</h1>
  <ul id="nav">
  <li class="current"><a href="index.html">Home</a></li>
     <li><a href="women.html">Women</a></li>
     <li><a href="men.html">Men</a></li>
     <li><a href="children.html">Children</a></li>
     <li><a href="homeandappliances.html">Home&amp;Appliances</a></li>
     <li><a href="visionandsound.html">Vision&amp;Sounds</a></li>
      <li><a href="motoring.html">Motoring</a></li>
      <li><a href="homemore.html">More</a></li>
      <li><a href="homecontact.html">Contact us</a></li>
      <li><a href=" rl.html">Register/Log in</a></li>
  </ul>
</div> <!--end of navigation div -->
</div>
<div id="navigation">
  <ul>
     <li><a href="left.html">Offer</a></li>
     <li><a href="left2.html">Free</a></li>
    <li><a href="/comparison/category/clotheswomen/">Women's Clothing</a></li>
     <li><a href="/comparison/category/shoeswomen/"> Women's Shoe </a></li>
     <li><a href="/comparison/category/underwear women/">Underwear&amp;Lingerie</a></li>
     <li><a href="women'sperfume.html">Perfume</a></li>
     <li><a href="/comparison/category/accessorieswomen/">Accessories</a></li>
      <li> <a href="women'smore.html">More</a></li>
  </ul>
</div> <!--end of navigation div -->
<div id="bodycontent">
<div id="bannercontainer">
<a href="img/pr.jpg"></a>
</div>
<div id="pbanner">
  <ul id="promo-banners">
  <li class="promo-banner">
    <h2>
        <a href="/comparison/category/clotheswomen/">Women's Clothing</a>
     </h2>
<a href="/comparison/category/clotheswomen/"><img height="198" width="228"  src="img/fashion.jpg" alt=" alibi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
        <a href="/comparison/category/shoeswomen/"> Women's Shoe </a>
     </h2>
<a href="/comparison/category/shoeswomen/"><img height="198" width="228"  src="img/womensshoe.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
      <a href="/comparison/category/underwear women/">Underwear&amp;Lingerie</a>
     </h2>
<a href="/comparison/category/underwear women/"><img height="198" width="228"  src="img/underwear.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
        <a href="women'sperfume.html">Perfume</a>
     </h2>
<a href="women'sperfume.html"><img height="198" width="228"  src="img/womensperfume.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
        <a href="/comparison/category/accessorieswomen/">Accessories</a>
     </h2>
<a href="/comparison/category/accessorieswomen/"><img height="198" width="228"  src="img/womensaccessories.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
<li class="promo-banner">
    <h2>
        <a href="women'smore.html">More</a>
     </h2>
<a href="women'smore.html"><img height="198" width="228"  src="img/men.jpg" alt=" alabi"/>
</a>
<p class="promo-seo">
 glam up for this season hottest party reduction
<a href="men.html">Men</a>
</p>
  </li>
  </ul>
  </div>
</div>
</div>
<div id="footer">
<ul id="footlink">
     <li><a href="contact.html">Contact us</a></li>
     <li><a href="termsandcondition.html">Terms&amp;Condition</a></li>
     <li><a href="right.html">Copyright</a></li>
     <li><a href="faq.html">Faq</a>
</li>
</ul>
</div>
</body>
</html>

below is the css


/*
CSS for Reacheasy site
*/
	body,html {
 	margin: 0;
}
 
#page {
 	width: 1060px;
 	margin: 0 auto;
 	position: relative
 	/* is the same as: 
 	margin-top: 0;
 	margin-bottom: 0;
 	margin-left: auto;
 	margin-right: auto;
 */
}

/* sticky footer */
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
/* ... */
/*
CSS for Reacheasy site
*/
html, body {
    height:100%;
    margin:0;
    padding:0;
    border:none;
background: url("img/aurora.jpg");
}
#outer {
    width:1060px;
    margin:auto;
    min-height:100%;
    margin-top:-52px;
    border-left:1px solid black;
    border-right:1px solid black;
background: #A1A1A1 url(backgrounds/nav-bg.jpg) repeat-y left top    
}
* html #outer {
    height:100%
}
h1 {
    font-size: xx-large;
    color: white;
    padding: 2em 0 .2em .4em;
    margin: 0;
    background: url(img/header.jpg) repeat-y right;
}
ul#nav {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: .2em 0;
    margin:0;
    background: url(img/tabs.gif);
    border: 0 solid;
}
ul#nav li {
    background: #48f url(img/tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
    border-right: 1px solid #A1A1A1;
    border: 0 solid;
}
ul#nav a {
    background: url(img/tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
    border: 0 solid;
}
ul#nav li.current {
    background-color: #48f;
    background-position: 0 -60px;
}
ul#nav li.current a {
    background-position: 100% -60px;
    color: #fff;
    font-weight: bold;
}
#navigation {
    width: 180px;
    float:left;
}

#navigation li {
    margin: 0 1px 0 0;
    padding-left: 0px;
    text-decoration: none;
   list-style: none;
   background: #48f url(img/tabs.gif);
    border-right: 1px solid #A1A1A1;
     

}
#navigation a {
    color: #008;
    padding-right: 10px;
    text-decoration: none;
    height: 2em;
    line-height: 1em;
    
}

#navigation a:visited{
 color: #008;
}

#bodycontent {
    float:right;
    width:880px;
    background:black;
  
}
#header {
    width:100%;
    border-top:52px solid #fff;
    border-bottom:1px solid #A1A1A1;
}
#footer {
    width:1060px;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    background-color:#fff;
    border-bottom:1px solid #000;
    color:  #000000;
    text-align:center;
    margin:0 auto;  
}

ul#footlink {
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
}

ul#footlink li { 
display: inline;
text-align:center; 
}

#bannercontainer{
       width: 800px;
       height: 300px;
       padding: 0;
       margin-left: auto;
       margin-right: auto;
       background: #eee;
       border: 1px solid #000;
    }

    #bannercontainer a{
       display: block;
       width: 800px;
       height: 300px;
       padding: 0;
       background:#eee url(img/pr.jpg) 0 0 no-repeat;
    }

    #bannercontainer a:link,#bannercontainer a:visited{
       background:#eee url(img/pr.jpg) 0 0 no-repeat;
    }

    #bannercontainer a:hover{
       background:#eee url(img/pr.jpg) 150px 0 no-repeat;
    }
#promo-banners{
  width:860px;
}

.promo-banner{
   border: medium none;
   display:block;
   float: left;
   padding: 0 19px 5px 0;
   width: 230px;
}
.promo-seo{
color:white;
display:block;
float:left;
font:12px arial;
height:75px;
margin-bottom:5px;
padding:7px 5px 0;
text-align:left!important;
width:218px;
}
.promo-seo-link{
color:#bdbdbd;
text-decoration:none;
}
.promo-seo-link:visited{
color:#bdbdbd;
}
5

Threads merged.

Please restate your problem if it has not been solved yet.

6

How familiar are you with CSS? Using a tool like Firebug for Firefox, or the web developer tools for other browsers like Chrome, Safari or Opera, you can look under the hood and see what HTML and CSS was used for that navigation. (Just right click on the navigation and choose Inspect Element.) The CSS for that menu is actually quite simple. We can help you with it if you like, but it’s worth having a look yourself, as that’s a great way to learn.

7

thanks i was able to realise that i did input the border-bottom , so i got it now, thanks ralph

8

thanks paul, its been solved