Mettre une image en bas d'un div

Fermé
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023 - 20 mars 2015 à 18:05
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023 - 21 mars 2015 à 01:22
Bonjour,
Je me sens bête de demander ça mais j'ai besoin d'aide.
Je n'arrive par à mettre mon image tout en bas de mon bloc. J'ai essayé avec des astuces comme position relative ou padding-top puisque je connais la hauteur de mon bloc. Cependant, sur Mozilla ça marche parfaitement mais pas sur Google Chrome qui me met un décalage de 1 pixel en dessous de mon bloc.
Comment je peux faire ?
A voir également:

4 réponses

Salut,

je vois je vois..ah non
Je suis plus maximum que médium alors je ne peut deviner votre code source.

Moi je ferais comme ceci:

<div>
<div style="width:100%">
contenu au dessus de l'image
</div>
<image src="monimage.jpg" alt="image en bas du premier div"/>
</div>

Quant aux écarts de 1 à plusieurs pixels entre les navigateurs ils viennent de la différence d'interprétation du HTML et CSS par ceux ci.
Ceux ci sont indiqués sur le site du consortium web(W3C), ceux qui ont fait les normes du web.

N'oubliez pas que DIV viens de divide, la traduction littérale n'est donc pas bloc(même si on parle de 2 types de comportements pour les balises: bloc et inline) mais division(de la page, d'un autre élément). Donc il serais dommage de n'utiliser cette balise dans un sens uniquement de bloc ce que sont toutes les balises d'affichage du HTML.

ps: vous avez aussi float qui sert au positionnement.
0
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
20 mars 2015 à 22:41
Bonsoir,


Je veux que le bloc soit de cette façon avec un titre (que je n'ai pas encore formaté) et une image (représentée par le rectangle jaune) qui touche le bas du cadre du bloc.

le code HTML :
<div id="bloc_fournisseurs">
	<a href="fournisseurs.html">Les fournisseurs</a>
	<img src="image_fournisseurs.jpeg" alt="photo des fournisseurs" />
</div>


Le code CSS :
#bloc_fournisseurs {
	display: inline-block;
	float: left;
	width: 178px;
	height: 250px;
	background-color: #C963D1;
	margin-left: 12px;
	text-align: center;
}

#bloc_fournisseurs img {
	padding-top: 36px;
}


Je vois par comment améliorer ça.
0
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
20 mars 2015 à 23:23
Salut,
Avec une recherche minimale dans Gg, chez alsaCreations et bien d'autres
0
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023
21 mars 2015 à 01:22
Ou alors, est-ce qu'on peut, à partir d'un bloc global, placer de manière relative (à partir du coin en haut à gauche) des éléments dans ce bloc ?
Et si oui, est-ce que cela a des effets différents selon les navigateurs ?
0