Posted By

LukeLarsen on 01/29/08


Tagged

css nav - tab


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

monapdx


tab nav - css


 / Published in: CSS
 

URL: http://www.alistapart.com/d/slidingdoors2/v1/ex10a.html

css part of the tab navs from ala

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

Report this snippet  

You need to login to post a comment.