Tab

HTML & CSS
1

please, i have made my tabbed navigation but i want it to be like the one of site point, where by after the tabb a block runs to the end of the page and i should be able to add more tab later(using css).

2

So what’s it like now? You need to show us what you have so far. If you want to know how SitePoint does it, look ‘under the hood’. You can view all of the site’s code by viewing source, or better, but using a Firefox addon called Firebug. It lets you see the HTML being used and the CSS styles that have been applied to it to make it look like it does.

The best way to do a list of links like this (it’s better not to call them ‘tabs’, as they are really something different) is do use an unordered list (<ul>). You then float the <li>s to make them stretch out in one line.

3

this is the css

ul#nav {
    height: 2em;
    list-style: none;
    margin: 0;
    padding-top: .2em;
    paddng-bottom: .2em
}

ul#nav li {
    background: #bdf url(tabs.gif);
    float: left;
    margin: 0 1px 0 0;
    padding-left: 10px;
}

ul#nav a {
    background: url(tabs.gif) 100% 0;
    color: #008;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 10px;
    text-decoration: none;
}

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;
}

and the html

 <ul id="nav">
    <li class="current"><a href="rindex.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="furniture.html">Furniture</a></li>
     <li><a href="vision&sound.html">Vision&Sounds</a></li>
      <li><a href="cars.html">Cars</a></li>
      <li><a href="mobile.html">Mobile</a></li>
      <li><a href="school.html">School</a></li>
  </ul>

thanks

4

Hmm, you are mostly there. If you want the <ul> to appear to span the whole container, you can put the background color on the UL instead of the LIs. An example is posted below. I’ve also given the LIs a white left border to recreate the white gaps between LIs:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Navigation</title>
	
<style type="text/css" media="all">
ul#nav {
height: 2em;
list-style: none;
margin: 0;
padding-top: .2em;
padding: 0;
background: #BBDDFF;
}

ul#nav li {
background: url(tabs.gif);
float: left;
margin: 0 1px 0 0;
padding-left: 10px;
border-right: 1px solid #fff;
}

ul#nav a {
background: url(tabs.gif) 100% 0;
color: #008;
display: block;
float: left;
height: 2em;
line-height: 2em;
padding-right: 10px;
text-decoration: none;
}

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;
}
</style>

</head>

<body>
<ul id="nav">
<li class="current"><a href="rindex.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="furniture.html">Furniture</a></li>
<li><a href="vision&sound.html">Vision&Sounds</a></li>
<li><a href="cars.html">Cars</a></li>
<li><a href="mobile.html">Mobile</a></li>
<li><a href="school.html">School</a></li>
</ul>

</body>

</html>