Posted By

designerd on 10/06/06


Tagged

css tabs


Versions (?)

tabs


 / Published in: Other
 

  1. /* TABS */
  2.  
  3. #tabs {
  4. position: absolute;
  5. top: 59px;
  6. right: 0;
  7. width: 100%;
  8. }
  9.  
  10.  
  11.  
  12.  
  13.  
  14. #tabs ul {
  15. margin:0;
  16. padding: 10px 10px 0 110px;
  17. list-style:none;
  18. text-align: right;
  19. }
  20. #tabs li {
  21.  
  22. float:left;
  23. background:url("../pix/left_both.gif") no-repeat left top;
  24. margin:0 0 0 0;
  25. padding:0 0 0 9px;
  26. border-bottom: 1px solid #765;
  27. }
  28. #tabs a {
  29. float:left;
  30. display:block;
  31. width:.1em;
  32. background:url("../pix/right_both.gif") no-repeat right top;
  33. padding:5px 15px 4px 6px;
  34. text-decoration:none;
  35. font-weight:bold;
  36. color:#fff;
  37. font-size: 11px;
  38. white-space: pre;
  39.  
  40. }
  41. #tabs > ul a {width:auto;}
  42. /* Commented Backslash Hack hides rule from IE5-Mac \*/
  43. #tabs a {float:none;}
  44. /* End IE5-Mac hack */
  45. #tabs a:hover {
  46. color:#333;
  47. }
  48. #home #nav-home, #titels #nav-titels,
  49. #products #nav-products, #about #nav-about,
  50. #contact #nav-contact {
  51. background-position:0 -150px;
  52. border-width:0;
  53. }
  54. #home #nav-home a, #titels #nav-titels a,
  55. #products #nav-products a, #about #nav-about a,
  56. #contact #nav-contact a {
  57. background-position:100% -150px;
  58. padding-bottom:5px;
  59. color:#333;
  60. }
  61. #tabs li:hover, #header li:hover a {
  62. background-position:0% -150px;
  63. color:#333;
  64. }
  65. #tabs li:hover a {
  66. background-position:100% -150px;
  67. }

Report this snippet  

You need to login to post a comment.