Visuels pour CV HTML

Télécharger le dossier des visuels

Dans certaines situations de composition d’images, en mosaïque notamment, lorsqu’on veut coller des éléments, il arrive que des défauts d’espace apparaissent, aussi bien en bas que sur les côtés.

L’espace sous une image dans un bloc

Quand on place une image dans un conteneur de type block, il arrive qu’un espace indésirable de quelques pixels apparaisse sous l’image.

Testez le code HTML suivant (à placer dans body), attribuez dans les css une couleur d’arrière plan gris à body et blanc à la div, et observez le phénomène, un espace blanc sous l’image :

<div class="espace_h"><img src="image.jpg" alt ="" /></div>

Cela s’explique par le fait qu’une image a le même comportement que du texte et qu’elle est alignée par défaut sur la ligne de base du texte. La partie descendante du texte (même s’il n’y en a pas), correspond à l’espace observé.

Pour le supprimer, il faut modifier l’alignement vertical de l’image par défaut, sur la valeur bottom ou middle, dans les css.

.espace_h img {
   vertical-align: bottom;
}

Plus de détails sur ce phénomène en consultant le lien suivant :

https://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html

L’espace sur les côtés des blocs (white space)

Lorsqu’on utilise la propriété css inline-block pour aligner des éléments de type block à l’horizontale, il se produit un espace vertical indésirable d’environ 4 pixels entre les blocs. C’est un défaut d’interprétation des navigateurs récents, dû aux espaces présents dans le code HTML lui-même.

Testez le code HTML suivant (à placer dans body), attribuez dans les css une couleur d’arrière plan gris à body et blanc à la div, et observez le phénomène, un espace gris entre les deux images :

<div class="espace_v"><img src="image1.jpg" alt ="" /></div>
<div class="espace_v"><img src="image2.jpg" alt ="" /></div>


Il n’y a pas de moyen rationnel d’y remédier, mais plusieurs astuces.

La première solution consiste à coller le code des éléments séparés par un espace, directement dans le HTML. Ainsi, le code ci-dessus deviendrait, et le problème serait résolu :

<div class="espace_v"><img src="image1.jpg" alt ="" /></div><div class="espace_v"><img src="image2.jpg" alt ="" /></div>

C’est la solution la plus efficace et la plus sûre, mais elle rend le code inconfortable à lire. Une solution intermédiaire consiste à utiliser des commentaires HTML (ici en rouge). Cette solution fonctionne plutôt bien, à condition de prendre soin de ne taper aucun espace entre le code normal et le code du commentaire, exactement comme ci-dessous :

<div class="espace_v"><img src="image1.jpg" alt ="" /></div><!--
--><div class="espace_v"><img src="image2.jpg" alt ="" /></div>

Enfin, d’autres solutions existent, en utilisant le css. Elles sont moins fiables que les précédentes. La plus courante consiste à placer un font-size: 0;  sur le parent, soit ici body :

body { font-size: 0; }

Plus de détails sur ce phénomène en consultant le lien suivant :

https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

La méthode traditionnelle pour mettre un menu à l’horizontale est de faire flotter les éléments de la liste (li). Cela rend très compliqué le centrage global du menu dans un conteneur. Pour résoudre le problème, il faut modifier le comportement des (li) par la propriété inline-block qui présente l’avantage de inline (le comportement inline place naturellement les éléments les uns à côté des autres) et certains avantages de block (permettre un dimensionnement, des marges, etc.)

Il faut donc au niveau (li) du menu, placer une propriété : display: inline-block; On peut centrer le texte dans la boîte des (li) par text-align: center dans (li). Mais surtout, il faut centrer le contenu de la liste (ul) par text-align: center; ce qui donne l’effet souhaité car cela centre les (li) compte tenu de leur comportement inline.

Vous pouvez voir le résultat avec le code css largement commenté en téléchargeant le fichier joint :

tutos_HTML