Positionner un texte à côté d'une image

Bonjour à tous !

Je viens vous demander quelque chose de très souvent dit mais que je n'arrive pas à faire !
Voila je voudrais insérer un texte et une image de sorte que l'image soit à gauche, que le texte soit à droite et aligné suivant le bas de l'image.
Vous pouvez voir l'exemple sur les 3 premiers article de cette page : http://www.make-development-inclusive.org/resourcecenters.php? (quand je dis exemple, je veux dire que c'est là dessus qu'il faut travailler !!)

Je voudrais éviter l'utilisation des tableaux car ça alourdit la page (et puis c'est trop facile ).

Faut-il utiliser un div ? ou plusieurs (un pour l'image, un pour le texte) ? Que faut-il comme propriété css ??

Vous verrez que le titre de chaque article est décalé car il est positionné à côté de l'image de l'article précédent. Cela ne devrait plus poser problème si j'arrive à positionner le texte en bas de chaque image, ce qui n'est pas le cas actuellement.


Merci d'avance pour tous ceux qui pourront m'aider.

Et vive les forums !

Bonjour,

Si tu nous montrais déjà ce que tu as écrit comme code, histoire de voir pourquoi ça ne fonctionne pas (ou alors le site que tu as présenté est celui qui te pose problème, mais tu ne l'as pas bien exprimé...).

Dans tous les cas, je te conseille de lire cet article qui pourrait être intéressant pour toi.

Bonjour !

Oui le lien est bien le site sur lequel je travaille. Si je ne donne pas de code css (désolé), c'est parce que j'en ai essayé quelque uns et qu'à chaque fois ça ne marchait pas donc j'ai tout supprimé.

Merci pour le lien, je vais regarder si je trouve mon bonheur .

Voici en gros ce que j'ai essayé de faire (toujours pour la même page http://www.make-development-inclusive.org/resourcecenters.php?) :
<div class="photo_align_bas"><img src blabla /><p>texte de l'image a aligner en bas à droite
</p></div>

Mon code css :

.photo_align_bas p
{
    	position: relative;/*permet de définir sa position par rapport au div*/
        text-align: left;
    	/*margin: 0;
    	padding: 0;*/
    	bottom: 0px;/*distance par rapport au bord inferieur du div*/ 
}

.photo_align_bas
{   
	float:left;
	position: relative;/*permet de positionner son contenu*/
}

Modifié par rom117 (10 Jul 2009 - 13:58)

Et est-ce bien ce que tu souhaitais faire ?

Je ne suis pas sûre de comprendre où se situe le problème.


ps. merci d'éditer ton message et d'ajouter [ code] et [ /code] (sans espaces) autour de tes portions de code (pour plus de lisibilité sur le forum.

Désolé pour les balises [ code] et [ /code] mais ça ne marchait pas tout à l'heure !
(C'est bon là ca remarche !) Comment je fais pour éditer le message précédent ?

Pour en revenir à mon problème...
Sur la page du site, il y a par exemple, en tout premier, une image violette et à côté il y a du texte (A new resource publication on disability.......international, national as well as local level [...].). Je voudrais que ce texte soit parfaitement aligné en bas avec le coté droit de l'image. Pour l'instant il n'est pas tout à fait aligné, mais c'est parce que j'ai utilisé la balise <br /> pour descendre un peu le texte. D'ailleurs, pour l'article et l'image suivante, le texte est beaucoup moins long donc le texte reste positionné au milieu par rapport à l'image

Pour que ce soit plus clair, j'ai mis en ligne un fichier .doc où il y a un exemple avec la 2ème image : http://www.make-development-inclusive.org/image_texte.doc

J'espère avoir été clair cette fois-ci !
Modifié par rom117 (10 Jul 2009 - 11:29)

Quelque chose qui n'a rien à voir mais assez désagréable...
Quand je rajoute des balises de lien, de langage ou autre sur ce forum, automatiquement elles se mettent à la fin du message et pas là où se trouve le pointeur de la souris !! C'est normal ?
(C'est pour ça que tout à l'heure je n'arrivais pas à encadre mon code css !!)

rom117 a écrit :
Je viens vous demander quelque chose de très souvent dit mais que je n'arrive pas à faire !

Euh non, ce n'est pas très demandé car d'un point de vue ergonomique c'est très douteux, donc en général on évite.

Le problème ici, c'est qu'aligner le texte en bas fait qu'il peut se retrouver très loin du titre qui le décrit. Et du coup ce titre peut se retrouver plus proche d'un contenu qu'il ne décrit pas (cas du deuxième titre utilisant ce procédé) que du contenu qu'il décrit. Ça s'appelle enfreindre la loi de proximité, et c'est mal.

En l'absence de titre, par contre, ça devient moins gênant d'aligner le texte en bas de l'image.

D'un point de vue purement technique, le moyen le plus efficace de gérer cet alignement vertical est d'utiliser le mode de rendu des cellules de tableau. Soit en utilisant des éléments TABLE et TD, soit en utilisant des DIV (ou autres conteneurs) en display: table-cell. Comme cette dernière solution n'est supportée dans Internet Explorer qu'à partir de la version 8, le tableau de mise en page est sans doute la solution la plus fiable.

rom117 a écrit :
Quand je rajoute des balises de lien, de langage ou autre sur ce forum, automatiquement elles se mettent à la fin du message et pas là où se trouve le pointeur de la souris !! C'est normal ?

Oui, ce n'est pas optimal mais c'est «normal».

Ok merci des conseils Florent .
Alors finalement je veux mettre le texte non plus en bas de l'image mais le centrer par rapport à la hauteur de l'image (ca serait mieux, comme ca ?? )

Si je voulais mettre le texte en bas, c'est parce que le titre de chaque article se positionne en fonction du texte de l'article précédent. Ce qui fait que si le texte est tres court, alors le titre de l'article suivant vient se positionner à côté de l'image précédente, et c'est tres moche !! Il faudrait qu'il se positionne par rapport à l'élément le plus bas, c'est-à-dire l'image (si le texte n'est pas assez long). Est-ce possible ?

J'espère être clair...

J'y suis presque. J'ai résolu une partie du problème en utilisant la propriété clear: both;
J'ai dit en partie car le clear: both place tous les articles en dessous du menu de gauche. Il faudrait pouvoir ne pas appliquer le clear: both au menu. Pour mieux comprendre il faut retourner sur la page http://www.make-development-inclusive.org/resourcecenters.php?wid=1024&spk=en

Si quelqu'un a la solution... je suis preneur !!

[quote=rom117]Il faudrait qu'il se positionne par rapport à l'élément le plus bas, c'est-à-dire l'image (si le texte n'est pas assez long). Est-ce possible ?
Oui.

Si tu utilises un tableau ou un rendu équivalent, que ton texte (et ton image) soient en vertical-align:middle, top ou bottom, le titre suivant passera de toute façon à la ligne (il sera en dessous du tableau).

Si tu places ton image en float:left (ce qui est la pratique la plus courante), et que tu veux éviter que le titre suivant ne vienne se mettre à côté de l'image, alors tu as besoin de la propriété clear. Un clear: left sur les titres, et c'est réglé.

Bonjour !

J'ai utilisé la propriété clear: left uniquement sur les titres au lieu de clear : both mais ca n'a rien changé !!

Cela dit j'ai résolu mon problème

Le problème que j'ai signalé plus haut (le décalage des articles sous le menu) n'apparaissait que dans Firefox et pas dans Internet Explorer !! (Bizarre... c'est pas l'inverse d'habitude ?!!). Je l'ai résolu en rajoutant la propriété overflow:hidden qui permet de gérer les dépassements.

Merci encore et à bientôt sur le forum
Modifié par rom117 (11 Jul 2009 - 22:06)

Re.

Comment j'indique que le problème est résolu ??