28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

d'habitude je n'envoie pas de message mais là vraiment je ne comprends pas pourquoi mon code foire, alors je m'adresse à vous.

Pour un de mes sites, je veux mettre des images légendées à la manière de Wikipédia, le problème c'est que je me suis rendu compte que la bordure qui doit entourer mon image laisse un blanc tout en bas de celle-ci.

En cherchant sur internet, je suis tombé sur cette page http://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html qui correspond bien à mon problème, le seul soucis c'est que j'ai beau faire ce qu'ils disent ça ne change rien, il y a toujours un blanc en dessous de l'image.

Dans l'espoir d'avoir de l'aide de votre part, voici le code (je pense que le problème vient de là mais impossible de le trouver moi-même) :


<h1>Mon image</h1>
<div class="imgbox">
	<div class="bdimg"><a href="lien_vers_limage_en_grand.html"><img src="image_originale_raptissee.png" width="300" height="71"></a></div>
	<div class="legd">Légende de l'image</div>
</div>


et là css :


.imgbox {float:right;background:#f9f9f9;border-width:1px 1px 1px 1px;border-style:solid;border-color:#aaa;font-family:Arial;font-size:0.75em;color:#252525;margin-left:15px;margin-top:-3px;margin-right:15px;margin-bottom:5px;padding:4px}
.bdimg {border-width:1px 1px 1px 1px;border-style:solid;border-color:#aaa;background:#fff;height:auto;vertical-align:middle}
.legd {height:20px;line-height:20px}


Si une âme charitable peut m'aider ça serait pas de refus Smiley cligne

Merci d'avance
Modifié par Ze_Noob (29 Sep 2015 - 14:21)
Les images (<img>) se comportent comme des simili display:inline-block.

Un display:inline(-block) a comme valeur par défaut de vertical-align un text-bottom, tel du texte. Le text-bottom définit une ligne basse avec un peu d'espace en bas pour permettre d'afficher des lettres comme le p ou le q (en gros). Pour afficher une image sans espace inférieur, il faut alors la déclarer en vertical-align:bottom (sinon, en display:block).

Le tuto sur Alsa est toujours d'actualité et tout à fait juste, voici un exemple d'application de cette règle sur codepen :

http://codepen.io/anon/pen/rOjNpX

Bien sur il faut appliquer un vertical-align:bottom à l'image, et non à son conteneur.
Modifié par Nigel (29 Sep 2015 - 13:53)
Merci BEAUCOUP Matthieu et Nigel

Nigel a écrit :
Bien sur il faut appliquer un vertical-align:bottom à l'image, et non à son conteneur.

C'était ça le problème en effet, j'ai tout essayé dans les conteneurs mais pas dans l'image !

Sinon l'astuce de Matthieu fonctionne très bien aussi !