Positionner une image dans le bas d'une div.

Bonjour.

J'ai un souci avec le positionnement de plusieurs images, de dimensions et d'orientations différentes, de manière que toutes les images soient toujours à la même position à partir du bas de la div. Présentement, elles se positionnent à partir du haut.

Mon souci, c'est qu'il doit y avoir une autre div dessous où sont écrites deux lettres (image) qui doivent toujours demeurer à la même position.

Voici les deux pages de test pour vous montrer:

http://www.citronlime.com/manon_BMW2/IY/00.html
http://www.citronlime.com/manon_BMW2/IY/000.html

et voici le dossier des css où vous trouverez principale.css et galerie.css

Bref, j'ai beau chercher et je ne trouve pas comment faire. Quelqu'un a une idée?

Merci de votre aide.

Bonjour Largowin,

J'ai pas regardé ton code en détail mais il me semble qu'un background-position:0% 0%; devrait faire l'affaire.

Change les % pour comprendre comment ca fonctionne car il ne vont pas répondre à ton problème.

Par contre je suis pas convaincu que tes images doivent être dans le css... Car elles sont le contenu je trouve.

J'espère que ca va résoudre ton problème.

Les images ne sont pas en background; je ne peux donc pas utiliser ce que tu proposes. Merci quand même.

Inline-block?

Patidou a écrit :
Inline-block?

Non. J'ai essayé de plusieurs manières, mais ça ne fonctionne pas. Merci quand même.

Bonjour,

largowin a écrit :
Les images ne sont pas en background; je ne peux donc pas utiliser ce que tu proposes. Merci quand même.

Oui desole j'avais regarde trop vite.
Bein je sais pas du coup mais en meme temps je ne vois pas qu'elle image tu veux descendre dans tes deux exemples.

Bon courage
Modifié par Florent V. (21 Mar 2010 - 17:06)

L'image de l'homme est ok. Ce que je veux faire, c'est de positionner l'image du couple à la même hauteur (à partir du bas) que celle de l'homme, car la personne à qui appartient le site doit pouvoir changer elle-même ses photos sans aller jouer dans le code.

Ex. Ma ligne de commande appelle la photo 00.jpg; elle doit donc remplacer cette photo dans le dossier photo par une autre qui portera elle aussi le nom 00.jpg. Je veux pouvoir lui offrir la possibilité de le faire sans avoir à changer la photo horizontale pour nécessairement une autre photo horizontale.

Si je ne peux le faire, je vais faire une classe (la classe fond présentement mais qui n'a rien dans la css) pour placer la photo horizontale au même niveau que l'autre et le tour sera joué, mais je veux voir s'il est possible d'éviter ça.

Ou à la limite, pouvoir centrer chaque image dans la div ne serait pas si mal non plus, mais je n'y arrive pas non plus...
Modifié par largowin (09 Mar 2010 - 05:16)

Ok je vois ce que tu veux mais,

a écrit :
Si je ne peux le faire, je vais faire une classe (la classe fond présentement mais qui n'a rien dans la css) pour placer la photo horizontale au même niveau que l'autre et le tour sera joué, mais je veux voir s'il est possible d'éviter ça.

C'est ce que je t'aurais dit ^^

Par contre je trouve que le positionnement des images comme elles sont actuellement est mieux que ce que tu tente de faire. Placer ta photo horizontale en bas c'est pas une des meilleurs idées que tu puisse avoir je pense (c'est mon avis) Car si tu la place à partir du bas, il y aura un gros vide au dessus, un vide que le visiteur ne comprendra pas surtout que tes flèches sont placées en haut.
D'ailleurs pourquoi donne tu une hauteur fixe? Pourquoi tu ne définirais pas la hauteur de cette partie de tel manière que la hauteur s'adapte à l'image? Comme ça, ton image J&P est toujours à la même distance que la photo.

J'espère que quelqu'un de plus connaisseur que moi va venir t'aider car là, mes connaissances en css sont trop limite pour t'aider convenablement.

Bon courage

Dim a écrit :

D'ailleurs pourquoi donne tu une hauteur fixe? Pourquoi tu ne définirais pas la hauteur de cette partie de tel manière que la hauteur s'adapte à l'image? Comme ça, ton image J&P est toujours à la même distance que la photo.

Oui, en effet, ce pourrait être une solution qui ferait en sorte que les lettres soient toujours à la même distance par rapport aux images verticales ou horizontales. J'étais parti avec l'idée de toujours mettre les lettres au même endroit comme elle voulait parce que ses images verticales ou horizontales n'avaient pas toutes la même hauteur. J'avais donc ajouté directement les lettres à la photo (comme on peut le voir dans cette version http://www.citronlime.com/manon_BMW/CJ-L/CJ-L25.php ), mais elle n'est pas satisfaite de la qualité de la photo (sauvegardée en 72ppi, des photos qui sont au départ en 300ppi), car elle est photographe professionnelle. Je vais voir ce qu'elle en pense. merci.
Modifié par largowin (09 Mar 2010 - 14:23)

largowin a écrit :
J'avais donc ajouté directement les lettres à la photo

C'est imposer a ta cliente des manipulations sur ces futures images... C'est pas forcement une bonne idee. Qui plus est tu telecharge une grande image sans beaucoup de contenu. Car la proportion de la photo par rapport a l'ensemble de l'image est minime.

Sinon, je vais peut etre dire une betise mais pourquoi ne pas placer le "logo" en position absolut? (J'ai jamais utilise ce systeme de positionnement donc je sais pas trop comment il fontionne.)

Sinon, peut etre un vertical-align, mais pareil, je connais pas trop cette fonctionnalite css ni sur quoi on peut l'appliquer.

Tiens moi au courant j'aimerais bien connaitre la fin de l'histoire.

Bonjour,

Désolé d'intervenir sans t'apporter de solution.

Je me pose la même question que toi à savoir positionner simplement une image .jpg le bas d'une DIV. Et je ne trouve pas de solution.

J'ai fait de nombreux sites "old style" à base de tableaux (à la grande satisfaction des destinataires) et j'essaie d'évoluer et de me mettre sérieusement à apprendre l'utilisation des CSS.

Et je trouve décourageant qu'à une simple question on ne puisse pas trouver de solution évidente et simple. A moins d'avoir déjà bien progressé dans l'étude des CSS.

Pour contourner l'obstacle, en attendant de trouver mieux, je vais créer une "fausse" image à la taille exacte de la DIV en question et comme ça je pourrais positionner l'image exactement où je veux dans cette DIV.

C'est un horrible bidouillage d'accord. Mais ça marche.

Finalement j'ai trouvé une solution plus propre en m'inspirant de cet article de notre site favori :

http://www.alsacreations.com/astuce/lire/22-comment-positionner-un-texte-ou-un-bloc-au-bas-dun-conteneur.html

J'ai créé un bloc "#positionimage" en positon absolue dans ma DIV "#petitephoto" et j'ai mis la photo dans ce bloc.

#petitephoto {
	position:relative;
	width:200px;
	height:420px;
	background-color: #ffffff;
	float: right;
}
/* position petite image */
#positionimage {
	position: absolute;
	bottom: 5px;
	left: 40px;
}

<div id="petitephoto"><img src="img/portemanto-small.png" id="positionimage" width="100" height="153" /></div>

Je ne sais pas si c'est orthodoxe mais ça marche !

Je suppose que je ne comprends pas très bien ce que tu veux, car il est facile de positionner une seule image dans une div.

Tu n'as qu'à mettre ton image en background dans ta div et la positionner au bas avec bottom.

Non car cette image possède un lien cliquable…

Mais ma solution décrite ci-dessus marche bien, donc pour la moi le problème est résolu !

Je passe aux nombreux autres qui restent à éclaircir

Bonjour,

Pour commencer, la solution qui consiste à utiliser un tableau à une cellule en vertical-align:bottom n'est pas foncièrement mauvaise. C'est moins propre qu'un code plus léger et sans tableaux de mise en forme, mais ça ne pose pas de problème particulier. Si vous ne trouvez pas mieux, gardez celle-là.

Ensuite, les solutions possibles, en supposant un conteneur de hauteur minimale 500px et une image à placer en bas de ce conteneur:

1. Conteneur DIV (ou autre) en display:table-cell; height: 500px; vertical-align: bottom. Avantage: code HTML moins lourd qu'un <table><tr><td>, et pas de détournement de la sémantique des tableaux. Inconvénient: implémenté dans Internet Explorer seulement à partir de la version 8 (sortie au printemps 2009, pour mémoire).

2. Conteneur DIV (ou autre) en line-height: 500px, image en vertical-align: bottom. Avantage: code HTML léger, implémenté partout (à vérifier s'il n'y a pas de bug de rendu dans IE 6-7, mais dans l'absolu ça devrait être bon). Inconvénient: si on veut placer plusieurs éléments en bas du conteneur, par exemple une image et sa légende, ça peut être compliqué/impossible sans recourir à display:inline-block (implémenté dans IE seulement à partir de la version 8, même si contrairement à table-cell il y a des moyens de ruser pour IE 6-7).

3. Conteneur DIV (ou autre) en position: relative; height: 500px, et image en position: absolute; bottom: 0. Avantage: fonctionne dans tous les navigateurs, code HTML léger, permet de positionner ainsi un bloc entier (par exemple une image et sa légende) si nécessaire. Inconvénient: si le contenu dépasse la hauteur du conteneur pour une raison ou une autre (image plus grande que prévu, agrandissement du texte par l'utilisateur...), il dépassera du conteneur (par le haut).

Je pense avoir fait le tour.

Une remarque en passant sur les pages de test comme celle-ci: http://www.citronlime.com/manon_BMW2/IY/000.html
Les images pour le titre "Lifestyle", les éléments décoratifs qui tiennent lieu de lien avant/après et le lien retour... ne devraient pas être des JPEG. On peut voir clairement les artefacts de la compression JPEG. Augmenter la qualité des JPEG serait possible mais augmenterait sensiblement le poids des images. Non, vu la composition de ces images il devrait être possible de les traiter en PNG-8 avec 8 ou 16 couleurs (suffisant pour des aplats dans deux teintes), et on devrait même réduire par deux ou trois le poids des JPEG actuels tout en ayant un résultat visuel nickel.