Voici un premier exemple de postionnement. Le texte dans le cadre ci-dessous n'est pas une image. Les mots ont été positionnés dans le cadre à l'aide de la propriété CSS 'position: absolute'.
This
Text
Is
Crazy
Comment utiliser le positionnement CSS dans vos articles?
La propriété CSS 'position' peut prendre différentes valeurs. Toutefois dans le cadre de cet article nous nous limiterons à 'absolute'. 4 autres propriétés complémentaires peuvent être utilisées en coordination avec 'position: absolute' pour placer des éléments: top, bottom, left, right.
Position:Absolute
L'élément qui possède la propriété 'position: absolute' dans son style CSS sera placé en fonction de son ancêtre le plus proche (qui n'est pas positionné de façon absolue!) à l'aide des autres propriétés complémentaires: left, right, top, bottom. Dans l'exemple suivant:Feuille de style CSS:
#mydiv1 {
position : relative;
}
#mydiv2 {
position : absolute;
top: 10px;
left: 10px;
}
Page HTML:
<div id="mydiv1">
<div id="mydiv2">
...
</div>
</div>
L'élément 'mydiv2' sera affiché 10px en dessous de la bordure haute de 'mydiv1' et 10px à droite de la bordure gauche de 'mydiv1'. 'mydiv1' est en effet le premier ancêtre de 'mydiv2' qui n'a pas de positionnement absolu.
Un exemple pratique : Ajouter un Texte à une Image
Voici l'image d'une plage en Floride:
Le texte que nous voulons placer sur la photo est le suivant:
I love Florida
Voici le code HTML nécessaire à l'affichage du texte:
<div style="color: deeppink; font-size: 24px; font-weight: bold; text-align: center; text-shadow: 2px 2px #FFC0CB;">
I love Florida
</div>
Comment puis-je placer le texte sur la photo?
1) Insérez l'image là où vous souhaitez qu'elle apparaisse dans votre article.
2) Ouvrez l'éditeur HTML de l'article et placez la souris just après la balise suivante:
<div class="separator" style="clear: both; text-align: center;"> qui a été ajoutée automatiquement par Blogger.com lors de l'insertion de l'image.
3) Ajoutez les balises suivantes:
</div>
<div style="margin: auto; position: relative; width: 400px;">
Notez que la largeur (400px dans l'exemple) doit être remplacée par la largeur de l'image insérée en pixel.
4) Ajoutez le code HTML nécessaire à l'affichage du texte juste avant la balise de fermeture
</div> qui a été créée automatiquement lors de l'ajout de l'image.5) Ajoutez à la balise
<div> qui encadre le texte ajouté les propriétés suivantes:- position: absolute
- la position du texte à partir du coin supérieur droit de l'image. Dans notre exemple on ajoute: left : 130px (130 pixels depuis le bord gauche de l'image) et top: 110px (110 pixels depuis le bord haut de l'image.
<div style="color: deeppink; font-size: 24px; font-weight: bold; left: 130px; position: absolute; text-shadow: 2px 2px #FFC0CB; top: 110px;">
I love Florida
</div>
Voici le résultat obtenu:
I love Florida
Voici le code HTML complet (image + texte) :
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin: auto; position: relative; width: 400px;">
<!-- Original image inserted with blogger -->
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqKcrBBAPMTipMqnJP6-AaexP4FYHC8kZFaUZw7PF9hIxiLLnbN2Kaj3PJPjFrf-jvJFcc1jClPUGd-WxtcMjGW8OmC8LITotRFIFc1ubNMYTGD1cSPywqOPn8N2UdcxNk6BJLXKTkDQ/s1600/sea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqKcrBBAPMTipMqnJP6-AaexP4FYHC8kZFaUZw7PF9hIxiLLnbN2Kaj3PJPjFrf-jvJFcc1jClPUGd-WxtcMjGW8OmC8LITotRFIFc1ubNMYTGD1cSPywqOPn8N2UdcxNk6BJLXKTkDQ/s1600/sea.jpg" /></a>
<!-- Text over the image -->
<div style="color: deeppink; font-size: 24px; font-weight: bold; left: 130px; position: absolute; text-shadow: 2px 2px #FFC0CB; top: 110px;">
I love Florida
</div>
</div>
(En bleu: le code ajouté manuellement suivant la procédure présentée).
Bon blog!
Aucun commentaire:
Enregistrer un commentaire