10-01-2008, 10:50
|
#9 (permalink)
|
|
Baskin'
Join Date: Feb 2005
Posts: 5,636
|
CSS Sample - commented throughout.
Code:
*
---------------------------------------------
Copyright ** 2008
---------------------------------------------
Colour Palette
LOCAL
. Bedroom - Orange: #f7a529
. Bathroom - Blue: #00adde
. Kitchen & Dining - Red: #ef3929
. Living Room - Purple: #b13680
. Garden - Green: #82bd43
SYSTEM
. Pale Blue: #f5fbfd
---------------------------------------------
*/
/* generic HTML */
html {margin:0;border:0;padding:0;background:#fff;color:#333;}
body {margin:0;border-top:4px solid #000;padding:0;font-family:georgia, serif;font-size:100%;text-align:center;background:#fff;}
h1 {position:absolute;top:-1px;left:-1px;height:1px;width:1px;font-size:0.01em;z-index:-1;}
h2 {margin:0 0 8px 0;border:0;padding:0;font-size:1.4em;font-weight:normal;height:30px;background:#fff;border-bottom:1px solid #ccc;}
h3 {margin:0;border:0;padding:8px 0;font-size:0.7em;color:#000;text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid #eee;}
h4 {margin:0;border:0;padding:8px 0;font-size:0.6em;color:#777;text-transform:uppercase;letter-spacing:2px;}
p {margin:0;border:0;padding:8px 0;line-height:1.6em;font-size:0.7em;}
ul {margin:0;padding:0;}
li {margin:0;padding:0;font-size:0.7em;line-height:1.6em;}
a {margin:0;border:0;padding:0;color:#000;}
a:link, a:visited {margin:0;border:0;padding:0;text-decoration:none;color:#000;}
a:hover, a:active {margin:0;border:0;padding:0;text-decoration:none;color:#777;}
a:focus {outline:none;}
address {margin:20px 0;border:0;padding:0;font-size:0.7em;font-style:normal;line-height:1.5em;}
blockquote {margin:0;border:0;padding:0;background:#f5fbfd;}
table {margin:0;border:0;padding:0;}
tr {margin:0;border:0;padding:0;}
td {margin:0;border:0;padding:0;}
iframe {margin:20px 0;border:0;padding:0;}
/* header */
#access {margin:0;border:0;padding:0;position:absolute;top:-100px;left:-100px;height:1px;width:1px;font-size:0.01em;z-index:-2;}
#headband {margin:0;border:0;padding:0;background:url(../images/system/colour-bar.gif) repeat-x #fff;height:150px;}
#header {margin:0 auto;border:0;padding:0;width:940px;height:99px;text-align:left;}
#logo {margin:0;border:0;padding:40px 0 0 0;float:left;}
#logo a {margin:0;border:0;padding:0;background: url(../images/system/chic-logo.gif) no-repeat #eee;width:200px;height:59px;float:left;}
#searchbar {margin:49px 0 8px 0;border:0;padding:0;float:right;background:#fff;width:500px;text-align:right;}
#searchbar fieldset {margin:0;border:0;padding:0;}
#searchbar input {margin-left:5px;padding:1px;font-size:0.7em;font-family:verdana, serif;}
#headernav {width:650px;text-align:right;float:right;background:#fff;}
#headernav li {display:inline;padding-left:13px;font-family:georgia, sans-serif;font-size:0.9em;}
#headernav a {color:#000;}
#headernav a:link, #headernav a:visited {color:#000;}
#headernav a:hover, #headernav a:active {color:#777;}
/* layout */
#foundations {margin:0 auto;border:0;padding:0;background:#fff;text-align:left;width:940px;}
#left-column {width:222px;background:#fff;float:left;}
#left-column adresss {margin:20px 0;}
#left-column h2 {width:200px;}
#content {width:496px;padding:0 0 30px 0;background:#fff;float:left;}
#right-column {width:204px;padding:0 0 30px 0;background:#fff;float:right;}
/* content generic */
#content ul {margin:10px;padding:0;background:#fff;}
#content li {margin:5px;padding:0;background:#fff;list-style-type:square;}
#content a {font-weight:bold;}
#content a:link, #content a:visited {text-decoration:none;}
#content a:hover, #content a:active {text-decoration:underline;}
#content p.info {margin:0 0 30px 0;padding-left:20px;border-bottom:1px solid #000;background:url(../images/system/grey-point.gif) no-repeat;}
#content p.button {border:0;border-bottom:1px #000 solid;margin-bottom:20px;}
#content p.button img, #content p.button img {background:none;border:0;}
/* house sections */
/* bedroom */
#bedroom #content h2, #bedroom #content h3 {color:#f7a529;}
/* bathroom */
#bathroom #content h2 {color:#00adde;}
/* kitchen & dining */
#kitchen #content h2 {color:#ef3929;}
/* living room */
#product-nav li.living a:link, #product-nav li.living a:visited
/* garden */
#product-nav li.garden a:link, #product-nav li.garden a:visited {}
/* homepage */
#home #content .intro {margin:20px 0;padding:0;color:#eee; solid}
/* search */
#search #content #adv-search p {margin:0;border:0;padding:0;}
/* site map */
#content .site-map ul {margin:0;padding:0 0 0 25px;}
#content .site-map li {font-size:0.7em;}
#content .site-map li ul li {font-size:1em;}
/* footer */
#footer {}
#footer ul {}
#footer li {}
#footer a {color:#000;}
#footer a:link, #footer a:visited {color:#000;}
#footer a:hover, #footer a:active {color:#777;}
/* fin */
Examplified.
__________________
|
|
|
|