Exemple d'une page créée avec du CSS

Nous avons vue dans les étapes précédentes comment différents effets de style CSS avec un brun de HXTML mis bout à bout permettait de créer un site.

Cette page est une simple démonstration d'un site basé sur l'utilisation du CSS et du XHTML. Elle fait suite aux différents tutorielles concernant les Bases pour créer un site en CSS. Elle démontre et complète de façon simple (du moins je pense ^_^) et avec quelques petites différences et ajouts, qu'il est  tout à fait possible et sans trop se prendre la tête, de créer un site internet présentable et valide ;).

La partie CSS:

body {
background: #078FB9 url(bg-body.jpg) left top repeat-x;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 10px auto;
}
/*Conteneur --- On applique un overflow:auto pour éviter que le menu qui est en float 
sorte du cadre*/
#moncadre { width:700px; margin: 0px auto; background-color:#FFF; border:solid 1px #0072A1; overflow:auto; } /*Header*/ #cadrehaut { height:210px; background: #078FB9 url(header_intro.jpg) left top no-repeat; } #cadrehaut h1{ margin:40px; padding:40px; color:#FFF; font-size: 40px; position:absolute; border:none; } /*Menu de droite*/ .cadredumenudroite { float:right; text-align:left; width:140px; background-color:#FFF; border-left:1px solid #D5F4FF; color:#666666; margin:5px; padding:5px; } .cadredumenudroite h1{ color:#FFF; font-size: 15px; border: 1px solid #0072A1; background:#0072A1; margin:5px; padding:5px; text-align:center; } /* cadre du conteneur */ .cadrecentrale { width:520px; border:1px solid #D5F4FF; background-color:#FFF; margin:5px; padding:5px; } /*Pied de page*/ .footer { color:#669900; margin:5px; padding:5px; } /*liste*/ ul{ list-style-type: none; padding: 5px; } /*************Décoration*******************/ /*Titre*/ h1 {color:#0072A1;font-size: 25px;border-bottom: 1px solid #0072A1;} h2 {color:#669900;font-size: 20px; border-bottom: 1px solid #669900;} /*Lien du menu*/ a.menu { display : block; text-decoration : none; color : #0072A1; } a.menu:hover { display : block; background : #D5F4FF; text-decoration : none; color : #0072A1; } /*Couleur des liens*/ a {color : #FF0096; text-decoration:none;} a:hover {color : #FF0096; text-decoration:underline;} /*on enlève les bordures aux images*/ img {border:none;}

La partie XHTML:

<div id="moncadre">
 
<div id="cadrehaut">
<h1>Titre de 1er niveau</h1>
</div>
 
<div class="cadredumenudroite">
 
<h1>Navigation</h1>
<ul>
<li><a class="menu" href="#">Lien 0</a></li>
<li><a class="menu" href="#">Lien 1</a></li>
<li><a class="menu" href="#">Lien 2</a></li>
<li><a class="menu" href="#">Lien 3</a></li>
</ul>
 
</div>
 
<div class="cadrecentrale">
<h1>Titre 1er niveau</h1>
<p>Texte de la page</p>
<h2>Titre second niveau</h2>
<p>Texte de la page</p>
</div>
 
<div class="footer">
<p>Texte du pied de page</p>
</div>
 
</div>
Exe
Voir/déposer un commentaire (0) | Signaler un problème