Cette page illustre différents exemples utilisés dans Initiation au Positionnement CSS 1.flux et position relative.
Code HTML :
<p class="rouge">Une boîte rouge</p> <p class="vert">Une boîte verte</p>
Code CSS :
.rouge {background-color: #ff9999;} .vert {background-color: #99cc99;}
Résultat :
Une boîte jaune
Une boîte verte
Code HTML :
<p> <span class="rouge">Une boîte rouge</span> <span class="vert">Une boîte verte</span> </p>
code CSS :
p {border: 1px dotted #000000;} .rouge {background-color: #ff9999;} .vert {background-color: #99cc99;}
Résultat :
Une boîte jaune Une boîte verte
Code HTML:
<p>Lorem <span class="jaune">boîte en position relative</span> ipsum dolor.</p>
Code CSS:
.jaune { position: relative; bottom: 5px; background-color: #ffff00; }
Résultat :
Loremboîte en position relative ipsum dolor.
Code HTML:
<p>Lorem <span class="jaune">boîte en position relative</span> ipsum dolor.</p>
Code CSS:
.jaune { position: relative; bottom: 5px; left: 3em; background-color: #ffff00; }
Résultat :
Loremboîte en position relative ipsum dolor.
Accueil OpenWeb | Plan du site | Conditions de réutilisation
Cette page est valide Xhtml et Css
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi