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%; 
}