Exemples
Code dans <HEAD> de cette page
<style type="text/css">
body
{ font-family: arial, verdana, sans-serif ; font-size: 10pt ; color: black ; background-color: #FFFFFF ; }
b.haut {
position: relative ;
bottom: 10px ; }
.rouge {
position: relative ;
font-weight: bold ;
background-color: #00FFFF ;
top: 10px ; }
</STYLE>
Premier exemple en code HTML traditionnel
Code 1 dans BODY ( en HTML)
=== voici un texte normal <b>BRAVO</b> je suis content ===
Résultat de l'exemple 1 (en HTML)
=== voici un texte normal BRAVO je suis content ===
Positionnement relatif
Deuxième exemple : Maintenant le même texte avec cette fois un positionnement du mot BRAVO toujours en gras mais 10 pixels au dessus du texte courant.
Code 2 dans Body
<P align="center">=== voici un texte adapté <b class="haut">BRAVO</b> je suis content ===</P>
Résultat exemple 2
=== voici un texte adapté BRAVO je suis content ===
Troisième exemple : Rien n'oblige à utiliser systématiquement le positionnement relatif en ligne dans toute une page, mais tout simplement il est possible de le placer au coup par coup sur un élément d'une page. Il est préférable alors d'utiliser la balise "SPAN".
A partir du code CSS inséré ici dans le code source de la page, ou reporté sur une feuille de styles externe, vous pouvez ainsi présenter le mot BRAVO en gras et 10 pixels au dessous du texte courant. et pour la beauté du résultat un peu de couleur avec "background-color: #00FFFFFF ;
Code 3 dans BODY
<p class="marron">=== voici un texte adapté
<span class="rouge">BRAVO</span>
je suis content === </p>
Résultat exemple 3
=== voici un texte adapté BRAVO je suis content ===
