List display : Image et paragraphe

**isitien** · 15/10/2011, 13h57

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/

alors que je veux un resultat comme:

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

voila le code utilise:

Code :

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

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

**oceane751** · 17/10/2011, 12h06

Et si tu faisais :

Code html :

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

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.

**isitien** · 17/10/2011, 16h05

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 :

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

1
2
text text
text texttext texttext text

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

merci

**oceane751** · 18/10/2011, 16h18

j'arrive plus à suivre là..

**isitien** · 19/10/2011, 09h32

Envoyé par oceane751

j'arrive plus à suivre là..

tu peux tester ce code:

Code :

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

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>

**oceane751** · 19/10/2011, 11h30

tu peux faire un truc du style :

Code :

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

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...

**isitien** · 20/10/2011, 05h57

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/

Merci

**oceane751** · 20/10/2011, 08h46

oui
tu mets l'image en

Code :

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

float:left;

, idem pour le texte

**isitien** · 20/10/2011, 09h53

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 :

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

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>

**oceane751** · 20/10/2011, 10h11

Code :

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

span

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

Code :

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

float:left;

Code :

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

div

est de type block donc là tu peux mettre un

Code :

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

float:left;

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

**isitien** · 23/10/2011, 04h02

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/

merci

**oceane751** · 23/10/2011, 15h19

un truc du style :

Code :

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

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>

**isitien** · 24/10/2011, 03h32

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

**Emyleen** · 28/10/2011, 17h06

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

Code html :

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

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 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
 
.article{
    margin: 0;
    padding: 0;
    float: none;
    clear: both;
}
.article img {
    width: 150px;
    display: inline-block;
}
.article p {
    display: inline-block;
    padding: 10px;
}