Discussion :

[rom117]

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 !

[rom117]

Bonjour !

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

Mon code css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.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.

[jaduta]

Slt,

voici un super tuto
j'ai appris grâce à la doc

http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

[rom117]

Oui je le connais ce tuto il est tres bien !
Le problème c'est qu'il utilise les propriété width et height. Moi je ne peux pas les utiliser car mes photos n'ont pas (ou n'auront pas) toutes la même taille !!

[jaduta]

au lieu de spécifier une taille fixe
essaye avec les xx% (pourcentage)

[rom117]

Bonjour Jaduta !

J'ai finalement résolu mon problème !

En fait si je voulais mettre les textes tout en bas de l'image c'était pour que les titres des articles ne viennent se positionner à côté des images des articles précédents (je suis clair ?). On m'a déconseillé cette méthode et conseillé d'utiliser la propriété css clear : left pour renvoyer tous les titres en dessous des images. Ce que j'ai fait !!

Ca a résolu le problème pour IE mais pas pour Firefox (Bizarre... c'est pas l'inverse d'habitude ?!!). Mais c'est pas grave ! Grâce à la propriété overflow:hidden qui permet de gérer les dépassements, le problème a disparu dans firefox !!

Le problème est donc résolu !!

Merci de m'avoir aidé et à bientôt sur le forum