cours 14

css de base pour un site Web

/** Styles
————————————————–
* Css of generic website
*
* 1. General styles
* 2. General classes
* 3. Page layout
* 4. Header layout
* 5. Main
* 6. Navigation
* 7. Main Content
*
*/

/** 1. General styles
————————————————–*/

html, body {height: 100%;}
body {
  margin: 0;
  padding:0;
  font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
}
html{
  background:#aab9bc /*url(‘../images/background.jpg’) center top no-repeat;*/
}
body, caption, th, td, input, textarea, select, option, legend, fieldset {
  font-family: Arial;
  font-size:14px;
}

/* When declaring Link states, remember: LoVe HA : Link | Hover | Visited | Active */
a:link, a:visited {
  color:#abe0fc;
  text-decoration: none;
}
a:hover, a:active {
  color: #ffffff;
  text-decoration: underline;
}

/* Titles */
h1 {
  font-size: 1.8em;
  line-height: 1.3em;
  padding: 0 0 0.5em;
  margin: 0;
  color:#069
}
/* Paragraph Styles */
p {
  margin: 1em 0;
}

/* List Styles */
ul, ol {
margin-left: 0;
}

/* Table Styles */
table {
  width: 99%;
}
tr.even td, tr.odd td {
  padding: 10px 5px;
}
tr.odd {
  background-color: #fff;
}

/* Code */
pre, code {
  font-family: “monaco”, “Courier New”, monospace;
}
pre {
  background-color: #efefef;
  display: block;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #aaa;
}

/* List Styles */
ul          { list-style-type: disc; }
ul ul       { list-style-type: circle; }
ul ul ul    { list-style-type: square; }
ul ul ul ul { list-style-type: circle; }
ol          { list-style-type: decimal; }
ol ol       { list-style-type: lower-alpha; }
ol ol ol    { list-style-type: decimal; }

/* Abbreviation */
abbr {
  border-bottom: 1px dotted #666;
  cursor: help;
  white-space: nowrap;
}
/** 2. General classes
————————————————–*/

/* Layout Helpers */

/* remove ff links border */
:active, :focus {outline:0;}

/* Clear Floats Without Structural Markup: */
.clearfix:after {
  content: “.”;
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.clear
{
  clear: left;
}

div.rounded_box{
  background-color: #ccdaff;
  color: #333;
  padding: 10px;
  border:0;
  margin: 0;
  zoom:1;
}
/* border with rounded corners */
div.rounded_border { background: #6666ff; padding: 8px; }

.section_header{

}

/** 3. Page layout
————————————————–*/
#page {
  width: 947px; /* edit to change the width of the page */
  margin: 24px auto; /* remove ‘auto’ and the width to switch to a fluid width */
  font-size: 14px; /* 16px x .75 = 12px */
  /*line-height: 1.286em; 14px x 1.286 = 18px */
  background:#fff;
}

#footer{
  float:left;
  display:inline;
  margin:20px 0 0 0;
  clear:both;
  width:100%;
  text-align: center;
  height:30px;
  font-size:10px;
  text-transform: uppercase;
  /*background:url(‘../images/footer.png’) repeat-x;*/

}
.h6_footer{

  /*float:center;*/
  color:#522c8c;
  font-size:10px;
  text-transform: uppercase;
  text-align: center;
  padding:10px 5px 0 5px;
}

/** 4. Header layout
————————————————–*/

#header{
  width:945px;
  height:125px;
  background:url(‘../images/header.jpg’) 2px 0px no-repeat;
  overflow:hidden;
}

/** 5. Main
————————————————–*/

#main{
  width: 100%;
  margin:4px 0 0 0;
  padding: 0 0 50px 0;
  overflow:hidden;
}

css reset de Yahoo

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
/**
* YUI Reset
* @module reset
* @namespace
* @requires
*/
html {
color: #000;
background: #FFF;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}