Positionner un texte par rapport à une imageRésolu/Fermé

Question

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-inclusiv...id=1024&spk=en

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 !

Fujin · Answer

Regarde la propriete css float

Tu trouveras ton bonheur ici sinon :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#ss_part_3

rom117 · Answer

Bonjour ! Oui Fujin j'ai utilisé la propriété float. Voici plus de précision sur ce que j'ai essayé de faire (toujours pour la même page http://www.make-development-inclusive.org/resourcecenters.php?) :

texte de l'image a aligner en bas à droite

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*/ } J'ai utilisé la propriété bottom pour mettre le texte en bas mais comme je ne connais pas tres bien le css,je me dis que cette propriété ne marche pas pour ce genre de choses. ?? Merci d'avance pour votre aide.

Fujin · Answer

J'appliquerais le float directement sur la balise img (.photo_align_bas img) donc  et non sur le div comme tu as fait.

Sinon voila un bon cours sur les flottants ;)
Courage !

rom117 · Answer

J'ai donc changé mon css en ajoutant :
.photo_align_bas img
{  
	float:left;
}

et en enlevant la propriété float de .photo_align_bas...


Mais rien n'y fait c'est toujours pareil. :(
Cela dit je ne desépère pas... :)

Merci en tout cas pour ton aide.

Fujin · Answer

J'ai oublie de te mettre ce lien qui peut certainement d'aider

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#ss_part_2

rom117 · Answer

En effet tu as oublié... car c'était exactement ce qu'il me fallait !!

Mon problème a un peu changé entre temps... Je ne veux plus positionner le texte en bas de l'image mais au centre par rapport à la hauteur de l'image car c'est beaucoup mieux je trouve. Je n'y suis pas encore arrivé mais je cherche...

Le deuxième problème était : le titre des articles était positionné trop haut, tellement qu'ils étaient à côté de l'image du texte précédent ! Je l'ai résolu grace à une propriété css que j'ai trouvée dans ton lien : clear: both;

Cela dit ce n'est pas tout à fait résolu 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 retourne sur le lien http://www.make-development-inclusive.org/resourcecenters.php?wid=1024&spk=en

As-tu la solution ?

Merci beaucoup pour le lien et si tu trouve le reste du problème... t'es un champion !!

Fujin · Answer

Réutilise float avec le menu (le div du menu) et le corps de texte (et le div qui contient tes articles)

Un article qui va certainement t'aider (j'espère) : https://openclassrooms.com/fr/courses

rom117 · Answer

Bonjour !

Je n'ai pas utilisé ta solution Fujin mais j'ai résolu mon problème !! Merci quand même cela dit. Ton lien m'a été utile pour comprendre d'autres choses (ah il est fort ce m@teo21 !!)

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 :)

Positionner un texte par rapport à une image

8 réponses

Discussions similaires

Newsletters