Posted By

codingforever99 on 04/01/13


Tagged

css html horizontal tab


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

loginlino


horizontal tabs in html with css


 / Published in: CSS
 

URL: http://function-code.blogspot.com/2013/03/horizontal-tabs-in-html-with-css.html

designing a simple horizontal tab menu by using ul and il elements with css.

  1. /*===================== CSS Code ================== */
  2. ul.tabs
  3. {
  4. padding: 7px 0;
  5. font-size: 0;
  6. margin:0;
  7. list-style-type: none;
  8. text-align: left;
  9. }
  10.  
  11. ul.tabs li
  12. {
  13. display: inline;
  14. margin: 0;
  15. margin-right:3px;
  16. }
  17.  
  18. ul.tabs li a
  19. {
  20. font: normal 12px Verdana;
  21. text-decoration: none;
  22. position: relative;
  23. z-index: 1;
  24. padding: 7px 16px;
  25. border: 1px solid #CCC;
  26. border-bottom-color:#B7B7B7;
  27. color: #000;
  28. background: #F0F0F0;
  29. border-radius: 6px 6px 0px 0px;
  30. -moz-border-radius: 6px 6px 0px 0px;
  31. outline:none;
  32. }
  33.  
  34. ul.tabs li a:hover
  35. {
  36. border: 1px solid #B7B7B7;
  37. background:#E0E0E0;
  38. }
  39.  
  40. ul.tabs li.selected a
  41. {
  42. position: relative;
  43. top: 0px;
  44. font-weight:bold;
  45. background: white;
  46. border: 1px solid #B7B7B7;
  47. border-bottom-color: white;
  48. }
  49.  
  50. /*============================= HTML Code ================== */
  51. <ul id="tab_ul" class="tabs">
  52. <li class="selected"><a rel="tab_div1" href="#">Tab 1</a></li>
  53. <li class=""><a rel="tab_div2" href="#">Tab 2</a></li>
  54. <li class=""><a rel="tab_div3" href="#">Tab 3</a></li>
  55. <li class=""><a rel="tab_div4" href="#">Tab 4</a></li>
  56. </ul>

Report this snippet  

You need to login to post a comment.