advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

LukeLarsen on 01/29/08


Tagged

css nav - tab


Versions (?)


tab nav - css

Published in: CSS 

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

css part of the tab navs from ala

Plain TextExpand 
  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.