Menu

Positionner un texte par rapport à une image [Résolu/Fermé]

- - Dernière réponse : 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 !
Afficher la suite 

8 réponses

Meilleure réponse
Messages postés
92
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
30 septembre 2009
4
1
Merci
J'ai oublie de te mettre ce lien qui peut certainement d'aider

http://www.siteduzero.com/tutoriel-3-13566-mise-en-boite-partie-2-2.html#ss_part_2

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 39170 internautes nous ont dit merci ce mois-ci

Messages postés
92
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
30 septembre 2009
4
0
Merci
Regarde la propriete css float

Tu trouveras ton bonheur ici sinon :
http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html#ss_part_3
Messages postés
9
Date d'inscription
dimanche 19 octobre 2008
Statut
Membre
Dernière intervention
24 novembre 2009
7
0
Merci
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.
Messages postés
92
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
30 septembre 2009
4
0
Merci
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 !
Messages postés
9
Date d'inscription
dimanche 19 octobre 2008
Statut
Membre
Dernière intervention
24 novembre 2009
7
0
Merci
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.
Messages postés
9
Date d'inscription
dimanche 19 octobre 2008
Statut
Membre
Dernière intervention
24 novembre 2009
7
0
Merci
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 !!
Messages postés
92
Date d'inscription
mardi 31 mars 2009
Statut
Membre
Dernière intervention
30 septembre 2009
4
0
Merci
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) : http://www.siteduzero.com/tutoriel-3-13572-creons-le-design-de-votre-site-web.html
Messages postés
9
Date d'inscription
dimanche 19 octobre 2008
Statut
Membre
Dernière intervention
24 novembre 2009
7
0
Merci
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 :)