advanced code snippet search

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

Expand | Embed | Plain Text 
  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.