List display : Image et paragraphe

[isitien]

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 :

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]

Et si tu faisais :

Code html :

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]

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

[oceane751]

j'arrive plus à suivre là..

[isitien]

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>

[oceane751]

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

[isitien]

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]

oui
tu mets l'image en

Code :

float:left;

, idem pour le texte

[isitien]

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>

[oceane751]

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?

[isitien]

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]

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>

[isitien]

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

[Emyleen]

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

Code html :

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 :

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.

[isitien]

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

[Emyleen]

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

[isitien]

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?