how to make the tabs just like the one in stackoverflow

How do i make that effect with the tabs (i.e. the tabbed 'a开发者_JS百科ctive', 'featured', 'hot', 'week', 'month') using just html and css? i tried copying the css but it didn't work. can anyone help or lead me to a tutorial just like this? thanks!

This is what you need:

• 5 divs, with .tab class.
• .tab-container, a css class for the container div, that needs a botoom border, this will contain tabs.
• .tab css class, that contains basic block features, some color:, padding:, and margin:, also it needs to float: left, so all the divs with that class float to the left of the container.
• .active css class, that have a left, top and right border, and maybe some different color, if you want so.
• since .tab elements will be links, and <a> elements are inline by default, you need to specify display: block css for .tab as well.

Now the layout:

• a container div.tab-container
• child a.tab elements.

Try with that here: http://jsfiddle.net/ click save and comment with the saved link you have, or edit your question with the css/html you wrote based on the mini-tutorial above.

I will prefer to do the tabs with ul and li inside a div container with id #tabcontainer

and in your css you will have some:

CSS:

#tabcontainer ul li {
 // properties to items
}

#tabcontainer ul li a {
 // properties for links
}

#tabcontainer ul li a:hover {
 // properties for hover links
}

#tabcontainer ul li .active {
 // properties for active item
}

HTML:

<div id="tabcontainer">
      <ul>
          <li class="active"><a id="item" href="#">Link 1</a></li>
          <li><a id="item" href="#">Link 2</a></li>
          <li><a id="item" href="#">Link 3</a></li>
          <li><a id="item" href="#">Link 4</a></li>
      </ul>
</div>

In the li tags in your server side language you will set a variable to which link is already active as you see the address in the address bar changes to ?tab=hot when you click hot