List display : Image et paragraphe

Bonjour,

Je voudrais aligner une liste comportant une image en face d'un paragraphe, mais le paragraphe se trouve au pied de l'image, voici une photo explicative:

http://imageshack.us/photo/my-images/204/faux.png/

http://imageshack.us/photo/my-images/204/faux.png/

alors que je veux un resultat comme:

http://imageshack.us/photo/my-images/194/vrair.png/

http://imageshack.us/photo/my-images/194/vrair.png/

voila le code utilise:

Code:

---

1 2 3 4 5 6 7 8 9 10

<ul> <li style="display: inline"> <img src="noProfile.png" width="50" height="50" /> </li> <li style="display: inline;"> text textxt<br /> du text aussi </li> </ul>

---

merci

Et si tu faisais :

Code:

---

1 2 3

<span><img src="noProfile.png" width="50" height="50" /></span> <span>text textxt<br />du text aussi</span>

---

Les listes sont pour lister... et non pour mettre des éléments l'un à coté de l'autre.

j'ai deja essaye par un span, mais je trouve un probleme au niveau de width, si je fais un background, cette couleur ne couvre que le partie texte, par exemple:

Code:

---

1 2	text text text texttext texttext text

---

alors la premiere et la 2eme ligne auront un background juste sur le texte.

merci

j'arrive plus à suivre là..

Citation:

---

Envoyé par oceane751

j'arrive plus à suivre là..

---

tu peux tester ce code:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<div style="width: 600px; margin-right: auto; margin-left: auto;"> <span style="width: 200px; background-color: red; float: right;"> Texte droite Texte droite Texte droite Texte droite </span>   <span style="width: 400px; background-color: blue; float: left;"> Texte gauche Texte gauche Texte gauche <br /> Texte gauche Texte gauche Texte gauche Texte gauche <br /> Texte gauche </span> </div>   <br /><br />   <div style="width: 600px; margin-right: auto; margin-left: auto;"> <span style="width: 200px; background-color: red; float: right;"> DROITEDROITEDROITEDROITE DROITEDROITEDROITEDROITE DROITEDROITEDROITEDROITE DROITEDROITEDROITEDROITE </span>   <span style="width: 400px; background-color: blue; float: left;"> GAUCHEGAUCHEGAUCHEGAUCHEGAUCHE GAUCHEGAUCHEGAUCHEGAUCHEGAUCHE GAUCHEGAUCHEGAUCHEGAUCHEGAUCHE   </span> </div>

---

tu peux faire un truc du style :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div style="width:800px; height:200px;"> <div style="width: 400px; background-color: blue; float: left; height:100%; "> Texte gauche Texte gauche Texte gauche <br /> Texte gauche Texte gauche Texte gauche Texte gauche Texte gauche </div> <div style="width: 400px; background-color: red; float: left;height:100%; "> DROITEDROITEDROITEDROITE DROITEDROITEDROITEDROITE DROITEDROITEDROITEDROITE DROITEDROITEDROITEDROITE </div> </div>

---

ou sinon, tu créés une image que tu mettras en BG (pour tes 2 div) et tu fais repeter en x...

est ce qu'on peut faire quelque chose du genre:

Image a gauche
Texte a droite sans que le texte retourne a la ligne au-dessous de l'image.

exemple:

http://imageshack.us/photo/my-images/854/imagetext.png/

http://imageshack.us/photo/my-images/854/imagetext.png/

Merci

oui
tu mets l'image en

Code:

---

float:left;

---

, idem pour le texte

ca donne un decalage pour le texte s'il est petit, de plus si je veux ecrire quelque chose apres mon dernier < / div>, je dois mettre des < br />:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div style="width: 500px; margin-right: auto; margin-left: auto;"> <img src="logo.png" style="float: left" width="50" height="50" /> <span dir="ltr" style="width: 450px; float: left; background-color: red;"> text text text text text text <br /> text text text text text text <br /> text text text text text text <br />text text text text text text <br /> text text text text text text <br /> </span> </div>   <div style="width: 500px; margin-right: auto; margin-left: auto;"> <img src="logo.png" style="float: left" width="50" height="50" /> <span dir="ltr" style="width: 450px; float: left; background-color: green;"> BOM bom BOM bom BOM bom bom </span> </div>   <div style="width: 500px; margin-right: auto; margin-left: auto;"> <img src="logo.png" style="float: left" width="50" height="50" /> <span dir="ltr" style="width: 450px; float: left; background-color: orange;"> text text text text text text <br /> text text text text text text <br /> text text text text text text <br />text text text text text text <br /> text text text text text text <br /> </span> </div>

---

Code:

---

span

---

est de type inline donc tu n'es pas obligé de mettre un

Code:

---

float:left;

---

Code:

---

div

---

est de type block donc là tu peux mettre un

Code:

---

float:left;

---

en faite, c'est le cadre orange que tu n'arrive pas à aligner avec l'encadré rouge c'est ça?

voila ce que je veux avoir en resultat final:

+ un arriere plan,
+ une image a droite,
+ du texte a gauche, sans qu'il s'aligne au-dessous de l'image

l'image et le texte doivent represente 2 colonnes, comme sur l'exemple ci-dessous:

http://imageshack.us/photo/my-images...emplatevj.png/
http://imageshack.us/photo/my-images...emplatevj.png/



merci

un truc du style :

Code:

---

1 2 3 4

<div style="background-color:#a5a5f0; overflow:hidden; width:600px;"> <div style="float:left; width:380px; background-color:#7171e7; margin:10px;">kkkkkkkkkk<br />bbbbbbbbbbbb<br />jjjjjjjjjjjj</div> <div style="float:left; width:180px; background-color:#3838db; margin:10px;">llll</div> </div>

---

j'avais le meme code mais sans la propriete overflow, c'est quoi son role?

Je ne sais pas si ton problème est résolu mais vu l'énoncé je te proposerai la structure suivante :

Code:

---

1 2 3 4 5

<div class="article"> <img src="mon-image.jpg" title="Mon image"/> <p>Mon paragraphe avec mon texte</p> </div>

---

Accompagné avec le css suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.article{ margin: 0; padding: 0; float: none; clear: both; } .article img { width: 150px; display: inline-block; } .article p { display: inline-block; padding: 10px; }

---

En espérant avoir répondu à ta demande.

merci Emyleen, c'est tres gentil, je voudrais savoir le role de la propriete overflow :ccool:

La propriété overflow permet de gérer l'affichage des barres de défilement d'une page.

Citation:

---

Envoyé par Emyleen

La propriété overflow permet de gérer l'affichage des barres de défilement d'une page.

---

dans cet exemple c'est quoi son role?