Positionner un texte par rapport à une image

Résolu/Fermé
rom117 - 10 juil. 2009 à 00:25
rom117 Messages postés 9 Date d'inscription dimanche 19 octobre 2008 Statut Membre Dernière intervention 24 novembre 2009 - 11 juil. 2009 à 21:47
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 !

8 réponses

Fujin Messages postés 92 Date d'inscription mardi 31 mars 2009 Statut Membre Dernière intervention 30 septembre 2009 4
10 juil. 2009 à 15:03
1
Fujin Messages postés 92 Date d'inscription mardi 31 mars 2009 Statut Membre Dernière intervention 30 septembre 2009 4
10 juil. 2009 à 00:30
0
rom117 Messages postés 9 Date d'inscription dimanche 19 octobre 2008 Statut Membre Dernière intervention 24 novembre 2009 7
10 juil. 2009 à 10:36
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?) :
<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*/
}


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.
0
Fujin Messages postés 92 Date d'inscription mardi 31 mars 2009 Statut Membre Dernière intervention 30 septembre 2009 4
10 juil. 2009 à 11:55
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 !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
rom117 Messages postés 9 Date d'inscription dimanche 19 octobre 2008 Statut Membre Dernière intervention 24 novembre 2009 7
10 juil. 2009 à 13:43
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.
0
rom117 Messages postés 9 Date d'inscription dimanche 19 octobre 2008 Statut Membre Dernière intervention 24 novembre 2009 7
10 juil. 2009 à 15:39
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 !!
0
Fujin Messages postés 92 Date d'inscription mardi 31 mars 2009 Statut Membre Dernière intervention 30 septembre 2009 4
10 juil. 2009 à 15:56
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
0
rom117 Messages postés 9 Date d'inscription dimanche 19 octobre 2008 Statut Membre Dernière intervention 24 novembre 2009 7
11 juil. 2009 à 21:47
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 :)
0