Discussion :

[guano]

Bon, je comprends pô...
J'ai du code php qui récupère des messages et les réponses correspondantes.
J'aimerais afficher ça en 2 colonnes :
une à gauche avec les message
une à droite avec la réponse.

Et bien entendu j'aimerais que la réponse soit aligner avec le message.
Or, je n'y arrive pas....Ca marche très bien pour une ligne (un message et une réponse) mais pour deux c'est la mort.

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
 
<div class=conteneur>
	<div class=message>
	MESSAGE
	</div>
 
	<div class=reponse>
	REPONSE
	</div>
 
	<div class=message>
	MESSAGE2
	</div>
 
	<div class=reponse>
	REPONSE2
	</div>
</div>

CSS:

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
 
.message
{
	float : left;
	border: solid 1px #FF0000 ; 
	font-family:verdana, sans-serif;
	font-size:80%;
	color:blue;
	background-color:yellow;
	width:30%;
	/*margin:1px;*/
 
}
 
.reponse
{
	float: right;
	border: solid 1px #FF0000 ; 
	font-family:verdana, sans-serif;
	font-size:80%;
	color:blue;
	background-color:cyan;
	width:30%;
	/*margin:1px;*/
 
}

Ca m'enerrrrrrrrve le positionnement en CSS....

[Trunks]

c'est simple, utilise un conteneur par ligne :

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
<div class=conteneur>
   <div>
      <div class=message>
      MESSAGE
      </div>
 
      <div class=reponse>
      REPONSE
      </div>
   </div>
 
   <div>
      <div class=message>
      MESSAGE2
      </div>
 
      <div class=reponse>
      REPONSE2
      </div>
   </div>
</div>

Ou bien oriente-toi vers la propriété clear: both; qui empeche d'avoir un flottant à côté, ça met automatiquement à la ligne. Mais pour ton cas, ce n'est pas approprié, choisis donc ma soluce

[guano]

Je comprends pas , ca marche pas...
tu laisses bien les float ?

[SpaceFrog]

Code :

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

<div class=message>

syntaxe permissive d'IE

Code :

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

<div class="message">

[guano]

Merci , mais j'utilise mozilla.
Purée ça me saoule ce merdier, ça se place n'importe comment...

[Trunks]

Oui je laisse bien les float. Il faut juste ajouter les div normalement. Les div étant de type 'block', par défaut se mettent les uns en dessous des autres, donc ça devrait marchait. As-tu ton exemple en ligne?

[SpaceFrog]

ben raison de plus il faut le quotes !!!

[guano]

http://viroflaybf.free.fr/test2.htm
http://viroflaybf.free.fr/styleessai.css

[Trunks]

fallait ajouter un overflow: auto;

CSS:

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
31
32
33
34
35
36
.conteneur
{
border: solid 1px #FF0000 ; 
font-family:verdana, sans-serif;
font-size:80%;
color:blue;
background-color:green;
width: 80%;
height:100%;
margin: 1px;
padding: 20px;
}
 
.ligne
{
overflow: auto;
}
 
.message, .reponse
{
float : left;
border: solid 1px #f00;
font-size:80%;
color:blue;
width:30%;
}
 
.message
{
background-color:yellow;
}
 
.reponse
{
background-color:cyan;
}

et pour le HTML:

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
31
32
<div class=conteneur>
   <div class="ligne">
      <div class="message">
      MESSAGE
      </div>
 
      <div class="reponse">
      REPONSE
      </div>
   </div>
 
   <div class="ligne">
      <div class="message">
      MESSAGE2
      </div>
 
      <div class="reponse">
      REPONSE2
      </div>
   </div>
</div>
 
   <div class="ligne">
      <div class="message">
      MESSAGE3
      </div>
 
      <div class="reponse">
      REPONSE3
      </div>
   </div>
</div>

[guano]

Yes !!
Merci !!
Enfin...pour moi un bon vieux tableau c'est ce qui y'a de plus simple !

Merci en tout cas !!

[Trunks]

Tu peux mettre Résolu.
Les tableaux sont à éviter sémantiquement s'il ne s'agit pas de données tabulaires. Content de t'avoir aidé