Discussion :

[stikmou94]

Bonjour,

Je développe une application web et je tente de faire en sorte qu'elle soit lisible grâce à un peu de CSS, et le peu dont j'ai besoin me donne du fil à retordre, c'est pourquoi j'en viens à vous.
Une de mes pages contient beaucoup de lignes semblables pouvant avoir 3 id différents : materielP, materielR, materiel. Ces ids sont générés par du code php/mysql.
J'aurais voulu me servir de ces id de div pour pouvoir faire 3 colonnes, mais les lignes étant à la suite dans le code, cela donne a l'affichage :

Uploaded with ImageShack.us

Voila, j'espère que vous voyez le problème, même si une colonne ne comporte que deux lignes, ces lignes vont être espacées d'autant de lignes qui les séparent dans le code html... Mouais, pas clair, mais l'image est parlante.

Merci d'avance pour votre aide.

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
echo '<div id= "materielP" name = "Titre"> Purpan : </div>';
		echo '<div id= "materielR" name = "Titre"> Rangueil : </div>';
		echo '<div id= "materiel" name = "Titre"> Non assign&eacute : </div>';
		 while ($donnees = $req->fetch()) 
		{	
			// Si le materiel en cours de traitement appartient au dhcp selectionné par l'utilisateur
			if($_POST["dhcp"] == $donnees['Id_dhcp'])
			{
				$site = substr($donnees['Loc_Mat'],0,1);
				echo "<div id= materiel$site > " . ($nouveauCommentaire = '# ' . ($donnees['Id_Materiel']==$donnees['Mac_Eth_Mat'] ? $donnees['Hostname_Eth_Mat'] : $donnees['Hostname_Wifi_Mat']) . ' Date de sortie prevue le : ' . $donnees['Date_Sortie'] . "\r\n")  ; echo '</BR>';
				echo $nouvelleLigne = 'host	'.($donnees['Id_Materiel']==$donnees['Mac_Eth_Mat'] ? $donnees['Hostname_Eth_Mat'] : $donnees['Hostname_Wifi_Mat']) .'  {	hardware ethernet	'.$donnees['Id_Materiel'].'  ;  fixed-address  '.($donnees['Id_Materiel']==$donnees['Mac_Eth_Mat'] ? $donnees['IP_Eth_Mat'] : $donnees['IP_Wifi_Mat']).'	 ; }' ."\r\n" . "\r\n" ;echo '</div>' . '</BR>';
				echo '</BR>';

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
#materielP
{
 width:33%; 
 float:left; 
 position:relative; 
 
}
#materielP,#materielR
{
 width:67%; 
 float:right; 
 position:relative; 
}
#materielR
{
 width:50%; 
 float:right; 
 position:relative; 
}
#materiel
{ 
	float: left; 
	position: relative; 
	width:50%; 
}

[Zalawy]

Bonsoir,

Si j'ai bien compris que tu voulais faire : réaliser la ligne avec 3 colonnes. Je te conseille de faire un tableau (il existe sans bordure). Tu as beaucoup utilisé div car la balise div ne fait pas un tableau mais je peux te donner l'exemple de code suivant :

Code php :

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
 
echo '<div id= "materiel" >';
echo '<table border="4" cellspacing="0" cellpadding="3">';
               echo '<tr>
					<th width="8%" >Purpan : </th>
					<th width="15%">Rangueil :</th>
					<th width="8%">Non assign&eacute :</th>
 
				</tr>';
		 while ($donnees = $req->fetch()) 
		{	
			// Si le materiel en cours de traitement appartient au dhcp selectionné par l'utilisateur
			if($_POST["dhcp"] == $donnees['Id_dhcp'])
			{
				$site = substr($donnees['Loc_Mat'],0,1);
                                echo '<tr> ';
				echo '<td width="8%"  align="left"> ' . ($nouveauCommentaire = '# ' . ($donnees['Id_Materiel']==$donnees['Mac_Eth_Mat'] ? $donnees['Hostname_Eth_Mat'] : $donnees['Hostname_Wifi_Mat']) . ' Date de sortie prevue le : ' . $donnees['Date_Sortie'] . "\r\n")  ; echo '</td>';
				echo '<td width="15%" align="left">'.$nouvelleLigne = 'host	'.($donnees['Id_Materiel']==$donnees['Mac_Eth_Mat'] ? $donnees['Hostname_Eth_Mat'] : $donnees['Hostname_Wifi_Mat']) .'  {	hardware ethernet	'.$donnees['Id_Materiel'].'  ;  fixed-address  '.($donnees['Id_Materiel']==$donnees['Mac_Eth_Mat'] ? $donnees['IP_Eth_Mat'] : $donnees['IP_Wifi_Mat']).'	 ; }' ."\r\n" . "\r\n" ;echo '</td></tr>';
 
tu mets div et table après l accolade
}
				echo '</table></div>';

Tu peux remplacer div par table et td (ça marche bien chez moi )
Pour le reste,tu peux modifier le design de tableau que tu souhaites.
à plus

[rodolphebrd]

Bonjour,

Tu as beaucoup utilisé div car la balise div ne fait pas un tableau

Ce n'est pas tout à fait exact...
• Il y a le modèle tabulaire un Css avec les propriété display:table, display:table-cell, display:table-row, etc.

• Il y a la propriété columns qui n'est pas bien supporté par tous les navigateurs (IE notamment).

Il n'est donc pas obligatoire de modifier le code html pour avoir une disposition en tableau.

[stikmou94]

Merci de ta réponse zalawi,
mais ta solution met les lignes commencant par # ( commentaires) dans une colonne et le reste dans une autre mais je voudrais que chaque colonne comporte les ensembles ( commentaire et ligne ) qui lui sont propres : les ensembles ou $site = P dans la colonne purpan et les ensembles ou $site = R dans la colonne Rangueil et le reste dans non assigné, comme sur l'image que j'ai postée où le contenu des colonnes est juste. Le problème est que les lignes ne se suivent pas verticalement dans les colonnes... Si quelqu'un comprend quelque chose à mon charabia, il aura le mérite de mieux le comprendre que moi-même...

[stikmou94]

Rodolphe, merci de ta réponse,
Je creuse donc au niveau du format tabulaire ( diplay:table/table-row etc ), mais je m'y perd, pourrais tu me donner un exemple simple afin que je puisse observer le comportement de ces proprietés ?
Merci d'avance.

[rodolphebrd]

Bon on va partir d'un exemple simple.
Je te laisse le soin de le compléter pour pouvoir t'aider: codepen
Il te suffit de mettre le code que tu souhaites et de cliquer sur Fork puis de copier l'url.