et mes lignes ?

Version imprimable

Bonjour

J'ai fait ça :

http://img234.imageshack.us/img234/750/colonnesfx0.png

Sachant que je construis dynamiquement la liste des données affichées et je voudrais mettre

01.tototot | [date]
02.tutututtt | [date]
03.dazoed
daedaed... | [date]

c'est à dire que l'information date soit toujours à la même absisse dans ma page.
J'ai donc réalisé deux "colonnes" à l'aide de <div> et de css... la première collonne reçoit le contenu et la deuxième les dates.
Mais lorsque le contenu est sur deux lignes, les dates quant à elles ne sont pas sur deux lignes... et tout est décalé :?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 div#nvl_main_content { text-align:left; float:left; width:260px; height:140px; background-color:#33FF99; } div#nvl_main_date { float:left; width:90px; height:140px; background-color:#33FF99; }
Peut-être n'a t'on pas besoin de 2 colonnes pour séparer le contenu de la date "proprement" ? :oops:

Merci de vos pistes ! :D

27/11/2006, 22h24
Bisûnûrs

Rajoute

Code:

clear:both;

à div#nvl_main_content.

Je tiens quand même à préciser qu'un id est unique.

Si je rajoute clear:both dans div#nvl_main_content, tout le texte disparait :?
En fait, je cherche à ce que les dates correspondent au texte qui est en face...
Si je mets deux colonnes, les dates s'empilent les unes sous les autres sans pour autant savoir si le texte correspondant (a gauche des dates) a été mis sur 1 ou deux lignes.

En changeant les couleurs pour montrer que j'utilise bien des id unique :
http://img122.imageshack.us/img122/5...lonnes2hz4.png

J'aimerai que la 1ère date corresponde au champ 01.
la deuxième au champ 02. et ainsi de suite.
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#nvl_main { float:left; width:350px; height:140px; background-color:#33FF99; } div#nvl_main_icone { text-align:left; float:left; width:70px; height:140px; background-color:#438F79; } div#nvl_main_content { text-align:left; float:left; width:195px; height:140px; background-color:#43FF99; } div#nvl_main_date { float:left; width:85px; height:140px; background-color:#330F69; }
Le nvl_main inclut : icone + content + date

en fait, lorsque j'utilisais des tableaux, je pouvais mettre la date correspondant à son texte, dans la colonne suivante, sur la même ligne.
Cependant, je n'ai plus cette notion de LIGNE :cry:
Je dois m'y prendre mal :roll:

27/11/2006, 23h24
Bisûnûrs

Il faut que tu englobes, non pas le texte de gauche dans un seul div et les dates dans un autre, mais ligne par ligne.

Tu mets dans un div, deux autre div tous les deux en float:left, ces deux div contiennent pour celui de gauche le text et celui de droite la date.

Pour que le div d'en-dessous qui contient deux autres div, le texte 2 et la date deux se mettent correctement tu utilises clear:both sur ce div.
28/11/2006, 09h53
Sepiaan

Merci Bisûnûrs, j'essaierai ça... je craignais cette solution de créer autant de div que j'ai de données...

J'ai réussi à obtenir ça :

http://img293.imageshack.us/img293/1...lonnes3vk5.png

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#nvl_main {
	float:left;
	width:350px;
	height:140px;
	background-color:#33FF99;
	}
div#nvl_main_icone {
	text-align:left;
	float:left;
	width:20%;
	height:100%;
	background-color:#438F79;
	}
div.nvl_main_content {
	text-align:left;
	float:left;
	width:55%;
	height:20%;
	background-color:#43FF99;
	}
div.nvl_main_date {
	float:left;
	width:25%;
	height:20%;
	background-color:#330F69;
	}

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
 
<div id='nvl_main'>
			<div id='nvl_main_icone'></div>
			<div>
				<div class='nvl_main_content'>Content1......................................................................................................................</div>
				<div class='nvl_main_date'>Date1</div>
			</div>
			<div>
				<div class='nvl_main_content'>Content2</div>
				<div class='nvl_main_date'>Date2</div>
			</div>
			<div>
				<div class='nvl_main_content'>Content3</div>
				<div class='nvl_main_date'>Date3</div>
			</div>
			<div>
				<div class='nvl_main_content'>Content4</div>
				<div class='nvl_main_date'>Date4</div>
			</div>
			<div>
				<div class='nvl_main_content'>Content5</div>
				<div class='nvl_main_date'>Date5</div>
			</div>
 
		</div>

Sauf que le content1 qui est tres long avec les ......... est coupé par la colonne des dates qui apparait (à juste titre)
Comment puis-je faire pour qu'un retour à la ligne s'effectue ?

Merci :)

28/11/2006, 13h51
Bisûnûrs

Utilise

Code:

word-wrap: break-word;
28/11/2006, 15h18
Sepiaan
Code:

1 2 3 4 5 6 7 8 9 div.nvl_main_content { word-wrap:break-word; text-align:left; float:left; width:55%; height:20%; background-color:#43FF99; }
ne coupe pas le texte du content1......, le meme phenomene apparait. :(

Décidement, le langage CSS est riche :D ;)
28/11/2006, 15h33
Bisûnûrs

Alors si tu peux, utilise la fonction wordwrap() de PHP.