Mettre une image en bas d'un div
besten
Messages postés
90
Date d'inscription
Statut
Membre
Dernière intervention
-
besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention -
besten Messages postés 90 Date d'inscription Statut Membre Dernière intervention -
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 ?
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:
- Mettre une image dans une div
- Légender une image - Guide
- Créer une image iso - Guide
- Mettre une image en filigrane sur word - Guide
- Transformer une image en icone - Guide
- Rechercher une image - Guide
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.
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.
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 :
Le code CSS :
Je vois par comment améliorer ça.
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.
