Discussion :

[Sepiaan]

Bonjour

J'ai fait ça :



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 CSS :

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

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" ?

Merci de vos pistes !

[Bisûnûrs]

Rajoute

Code CSS :

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

clear:both;

à div#nvl_main_content.

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

[Sepiaan]

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 :


J'aimerai que la 1ère date corresponde au champ 01.
la deuxième au champ 02. et ainsi de suite.

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
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
Je dois m'y prendre mal

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

[Sepiaan]

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

[Sepiaan]

J'ai réussi à obtenir ça :

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
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 HTML :

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

[Bisûnûrs]

Utilise

Code CSS :

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

word-wrap: break-word;

[Sepiaan]

Code CSS :

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

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

[Bisûnûrs]

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