Sur les sites à fort contenu éditorial on a souvent une liste d’actualités accompagnées d’une illustration, dans ce genre là :
La plupart du temps il s’agit d’une simple image placée avant le titre à laquelle on a donné un float:left.
#news li {
clear:both;
}
#news img {
float:left;
}
<ul id="news"> <li> <img src="1.jpg" alt="" /> <h2>Lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit amet, ...</p> </li> <li> <img src="2.jpg" alt="" /> <h2>Lorem ipsum dolor</h2> <p>Lorem ipsum dolor sit amet, ...</p> </li> [...] </ul>
Hors ce n’est pas des plus logiques d’avoir l’image d’illustration avant le titre. Dans notre code l’image devrait être placée après le titre (elle pourrait aussi être placée après la description).
<ul id="news"> <li> <h2>Lorem ipsum dolor</h2> <img src="1.jpg" alt="" /> <p>Lorem ipsum dolor sit amet, ...</p> </li> <li> <h2>Lorem ipsum dolor</h2> <img src="2.jpg" alt="" /> <p>Lorem ipsum dolor sit amet, ...</p> </li> [...] </ul>
Ce qui, avec un float:left pose problème au niveau de la présentation souhaitée (le titre serai placé au-dessus de l’image).
La solution est d’utiliser le positionnement. Appliquons un positionnement relatif au conteneur de l’actualité (normalement un li si il s’agit d’une liste d’actualités comme ci-dessus) puis un positionnement absolu à l’image et plaçons la dans le coin supérieur gauche.
Petits détails supplémentaires :
- Ajouter un padding à gauche égal à la largeur de votre image (ou un peu plus grand si vous voulez une marge entre l’image et le texte) afin que le texte ne passe pas en dessous.
- Ajouter une hauteur minimum au conteneur, sinon, lorsque le texte sera trop court, nos actualités vont se superposer (hack pour IE6 afin “d’émuler” le min-height, si possible à mettre dans une feuille de style séparée avec des commentaires conditionnels).
A noter que l’ajout d’une hauteur permet d’activer le hasLayout sous IE6, ce qui corrige un bug par la même occasion (oui, un hack pour une chose corrige un bug pour une autre, IE6 est vachement bien pensé en fait…).
#news li {
position:relative;
padding-left:160px;
min-height:90px;
height:auto !important;
height:90px;
}
#news img {
position:absolute;
left:0;
top:0;
}
Vous pouvez voir le résultat final sur cette page.
