Feuille de style modèle graphique N°17
html {
height:100%;
}
body { /* Corps */
height:100%:
padding:0; /* Ne pas toucher */
margin:0; /* On initialise tout à 0 pour les différents navigateurs */
background-color:#fff; /* Fond blanc */
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
}
a{
font-weight:bold; /* Liens en gras */
text-decoration:none; /* Pas de décoration */
color:#333;
}
a:hover{
text-decoration:underline;
color:#202020;
}
img {
border:0; /* Comme ça on a pas de décalages */
}
ul , li {
margin:0;
padding:0;
list-style-type:none;
}
#conteneur { /* Conteneur Unique */
width:100%; /* Largeur obligatoire pour le centrage */
margin:0; /* Collage aux bords */
}
#header { /* Header unique */
width:580px;
height:39px; /* On règle la largeur et la hauteur du header pour que le fond s'ajuste */
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/header.jpg); /* On fait venir le fond */
padding-top:85px;
padding-left:70px;
margin-left:0 !important; /* HACK IE : */
margin-left:-352px; /* Collage aux bords */
}
#header_extensible {
width:100%;
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/header_ext.png);
border-bottom:#d4d4d2 solid 2px; /* On crée une petite bordure grise en bas */
margin-top:-1px;
}
#centre { /* Centre unique, contenant Menu et Texte */
width:100%; /* Doit prendre toute la page */
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/centre_fond.png); /* On fait venir le fond */
padding-top:5px; /* Une marge en haut pour que les éléments ne collent pas à la bordure */
}
#menu { /* Menu unique */
width:165px;/* On règle la largeur du header pour que le Texte s'ajuste */
float:left; /* Pour que le Texte s'imbrique correctement */
color:white;
}
#menu ul{
width:150px;
}
#menu a{
color:#fff; /* En blanc de préférence */
text-decoration:none; /* Pas souligné */
margin-left:5px; /* Pour faire beau */
}
#menu a:hover{
color:#ccc;
font-weight:bold;
}
#menu a:before {
content: "* "; /* Pour mettre la petite asterisque devant tous les liens */
}
#texte {
color:#555; /* En gris */
min-height:400px;
padding-left:25px;
padding-top:15px; /* Pour pas coller */
margin-left:150px; /* Pour etre au milieu */
border-bottom:3px solid #d4d4d2;
}
#texte h2 {
font-size:0.9em; /* En gras */
font-weight:bold; /* En gras */
display:inline; /* Sans sauter de ligne avant et après */
}
#texte a{
color:#404040; /* En blanc de préférence */
text-decoration:underline; /* Pas souligné */
}
#texte a:hover{
color:#ccc;
font-weight:bold;
text-decoration:none; /* Pas souligné */
}
#footer {
color:#555; /* On fait gris */
background-color:#e2e1df; /* On met le fond */
padding-top:6px;/* On décolle le texte */
margin:0; /* Pour éviter la traditionnelle marge en haut et en bas de la balise p */
margin-left:170px; /* Pour ne pas aller dans le bleu */
margin-top:10px;
}
#footer a{
color:#444; /* On fait gris */
text-decoration:none; /* On enlève le soulignage */
}
#menu h2 {
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/menu.png); /* Le fond du bouton */
color:#555; /* La couleur du texte */
padding-top:5px; /* Pour ne pas coller au haut */
padding-left:5px; /* Ni a gauche */
width:163px; /* Pour que le bouton soit complet */
height:25px; /* idem */
font-size:14px;
}
.texte {
font-size:0.8em; /* On fait la taille */
margin-top:2px; /* On décale le bloc du haut */
border-top:1px solid #000; /* On fait une bordure (le filet) */
}
h3 {
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/o.gif);
background-repeat:no-repeat;
padding-left:25px;
border-bottom:1px solid;
font-weight:bold;
font-style: italic;
}
#texte li {
line-height: 20px;
}
height:100%;
}
body { /* Corps */
height:100%:
padding:0; /* Ne pas toucher */
margin:0; /* On initialise tout à 0 pour les différents navigateurs */
background-color:#fff; /* Fond blanc */
font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size:12px;
}
a{
font-weight:bold; /* Liens en gras */
text-decoration:none; /* Pas de décoration */
color:#333;
}
a:hover{
text-decoration:underline;
color:#202020;
}
img {
border:0; /* Comme ça on a pas de décalages */
}
ul , li {
margin:0;
padding:0;
list-style-type:none;
}
#conteneur { /* Conteneur Unique */
width:100%; /* Largeur obligatoire pour le centrage */
margin:0; /* Collage aux bords */
}
#header { /* Header unique */
width:580px;
height:39px; /* On règle la largeur et la hauteur du header pour que le fond s'ajuste */
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/header.jpg); /* On fait venir le fond */
padding-top:85px;
padding-left:70px;
margin-left:0 !important; /* HACK IE : */
margin-left:-352px; /* Collage aux bords */
}
#header_extensible {
width:100%;
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/header_ext.png);
border-bottom:#d4d4d2 solid 2px; /* On crée une petite bordure grise en bas */
margin-top:-1px;
}
#centre { /* Centre unique, contenant Menu et Texte */
width:100%; /* Doit prendre toute la page */
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/centre_fond.png); /* On fait venir le fond */
padding-top:5px; /* Une marge en haut pour que les éléments ne collent pas à la bordure */
}
#menu { /* Menu unique */
width:165px;/* On règle la largeur du header pour que le Texte s'ajuste */
float:left; /* Pour que le Texte s'imbrique correctement */
color:white;
}
#menu ul{
width:150px;
}
#menu a{
color:#fff; /* En blanc de préférence */
text-decoration:none; /* Pas souligné */
margin-left:5px; /* Pour faire beau */
}
#menu a:hover{
color:#ccc;
font-weight:bold;
}
#menu a:before {
content: "* "; /* Pour mettre la petite asterisque devant tous les liens */
}
#texte {
color:#555; /* En gris */
min-height:400px;
padding-left:25px;
padding-top:15px; /* Pour pas coller */
margin-left:150px; /* Pour etre au milieu */
border-bottom:3px solid #d4d4d2;
}
#texte h2 {
font-size:0.9em; /* En gras */
font-weight:bold; /* En gras */
display:inline; /* Sans sauter de ligne avant et après */
}
#texte a{
color:#404040; /* En blanc de préférence */
text-decoration:underline; /* Pas souligné */
}
#texte a:hover{
color:#ccc;
font-weight:bold;
text-decoration:none; /* Pas souligné */
}
#footer {
color:#555; /* On fait gris */
background-color:#e2e1df; /* On met le fond */
padding-top:6px;/* On décolle le texte */
margin:0; /* Pour éviter la traditionnelle marge en haut et en bas de la balise p */
margin-left:170px; /* Pour ne pas aller dans le bleu */
margin-top:10px;
}
#footer a{
color:#444; /* On fait gris */
text-decoration:none; /* On enlève le soulignage */
}
#menu h2 {
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/menu.png); /* Le fond du bouton */
color:#555; /* La couleur du texte */
padding-top:5px; /* Pour ne pas coller au haut */
padding-left:5px; /* Ni a gauche */
width:163px; /* Pour que le bouton soit complet */
height:25px; /* idem */
font-size:14px;
}
.texte {
font-size:0.8em; /* On fait la taille */
margin-top:2px; /* On décale le bloc du haut */
border-top:1px solid #000; /* On fait une bordure (le filet) */
}
h3 {
background-image:url(http://heezee.blog4ever.s3.amazonaws.com/templates/17/o.gif);
background-repeat:no-repeat;
padding-left:25px;
border-bottom:1px solid;
font-weight:bold;
font-style: italic;
}
#texte li {
line-height: 20px;
}
...