Colonnes à div multiples

Version imprimable

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 : http://img24.imageshack.us/img24/7333/capturejuv.png

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:

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:

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

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:

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

16/05/2013, 09h27
rodolphebrd

Bonjour,

Citation:

Envoyé par Zalawy

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.
16/05/2013, 10h56
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...
16/05/2013, 11h08
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.
16/05/2013, 11h36
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.
16/05/2013, 11h56
stikmou94

http://codepen.io/anon/pen/zeImE

Ici j'ai bien trois colonnes, mais les lignes de contenu ne se situent que sous la première, ce qui est normal vu le css, mais justement j'aimerais que le contenu de contcol1 soit sous Colonne 1, contcol2 sous Colonne 3 etc
16/05/2013, 12h52
rodolphebrd

C'est quelque chose comme cela que tu veux obtenir?
http://codepen.io/anon/pen/bhEiJ
...juste pour être sûr du résultat.
16/05/2013, 13h15
stikmou94

Exactement :)
Mais le problème est que tu fais ça en plaçant les div "contcol" dans les div "col", mais dans mon code, je ne peux pas adopter cette solution vu que l'id des div est modifié en php a chaque itération du while ...
16/05/2013, 14h40
Candygirl

Bonjour,

J'avoue ne pas trouver tes explications très claires ^^

Citation:

Envoyé par stikmou94

Une de mes pages contient beaucoup de lignes semblables pouvant avoir 3 id différents : materielP, materielR, materiel.

Sachant qu'un id doit être unique sur la page tu ne devrais pas avoir plus de 3 lignes :roll:
peut-être devrais-tu appliquer des classes ?

Ensuite, tu dois statuer quel type de données tu présentes afin de choisir les éléments html les plus adaptés. Est-ce qu'il s'agit de données tabulaires ? auquel cas la proposition de Zalawy est pertinente. S'agit-il de listes ? ,...

Si j'ai bien compris, tu souhaites attribuer une classe, en fonction de critère x ou y, à une suite d'item et, ensuite, les répartir dans diverses colonnes, par le biais du css, en fonction de leur classe ?

Ce n'est pas à css de faire ce travail de "classement", dans le sens où il s'agit de structuration des données. tu devrais donc passer par un traitement côté php/mysql qui répartit tes données dans les bonnes colonnes/liste/... qu'ensuite css se chargera de mettre en page.

Après, je n'ai peut-être rien compris au problème ^^
16/05/2013, 15h01
stikmou94

C'est ca Candy, mais étant donné que je touchais presque au but ( image uploadée ), il me semblait qu'un simple ajustement css pourrait afficher le tout correctement, et un tri préalable en php serait lourd étant donné que cette page est destinée à afficher une quantité importante de lignes ( +-5000 ). Mais j'ai l'impression que je n'aurai pas le choix.
Enfin, si quelqu'un peut m'aiguiller sur du css, je reste à l'écoute et merci encore à rodolphe qui a passé du temps à m'aider :)

Voici une solution avec la propriété column qui ne fonctionne que sur safari et Chrome :?
Le problème provenant de la propriété column-break-after qui n'est pas reconnue ailleurs.
Mais bon, c'est juste pour montrer que ça peut être réalisé en css ;) :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html>
<meta charset="UTF-8">
<head>
<meta httdiv-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home</title>
<style>
* {
        margin: 0;
        padding: 0;
}
.box {
        display: table;
        height: 80px;
        border-collapse: separate;
        width: 1000px;
        border-spacing: 1em;
}
.col {
        display: table-cell;
        background-color: #CCC
}
.colum {
        width:1000px;
        -webkit-column-gap : 20px;
           -moz-column-gap : 20px;
                   column-gap : 20px;
        padding: 10px;
           -moz-column-count: 3;
        -webkit-column-count: 3;
                    column-count: 3;
}   
.break{
        -webkit-column-break-after: right;
         break-after:right;
}
.contcol1 {
        color: salmon;
        background:lightblue;
}
.contcol2 {
        color: red;
        background:lightblue;
}
.contcol3 {
        color: green;
        background:lightblue;
}
</style>
</head>
<body>
<div class="box">
  <div class="col">colonne 1 </div>
  <div class="col">Contenu 2 </div>
  <div class="col">Contenu 3 </div>
</div>
<div class="colum">
  <div class="contcol1"> blabla </div>
  <div class="contcol1 break"> bloblo </div>
  <div class="contcol2 "> BLABLA </div>
  <div class="contcol2 "> BLABLA </div>
  <div class="contcol2 break"> BLABLA </div>
  <div class="contcol3"> abc </div>
  <div class="contcol3"> ghi </div>
  <div class="contcol3"> DEF </div>
  <div class="contcol3"> DEF </div>
  <div class="contcol3"> DEF </div>
  <div class="contcol3"> DEF </div>
</div>
</body>
</html>

17/05/2013, 09h17
stikmou94

Merci encore de ton aide précieuse,
Mais le problème réside dans le fait que mes div ne sont pas ordonnées, ainsi, si on place un contcol1 après un contcol3, il sera situé dans la colonne3 :
http://codepen.io/anon/pen/EuaCo
Comme le disait candy j'ai bien peur que le css ne puisse pas résoudre ce problème... à mon grand regret :/
17/05/2013, 09h22
rodolphebrd

Ah oui effectivement.
Bon courage.
17/05/2013, 09h53
Candygirl

Citation:

Envoyé par stikmou94

Comme le disait candy j'ai bien peur que le css ne puisse pas résoudre ce problème...

Ouh là, Jamais je ne me permettrais d'affirmer une impossibilité !! ;)

J'ai dit c'est que ce n'est pas la fonction du CSS que de trier les données, pas que "résoudre" ton cas avec du css était impossible. Par contre, si solution il y a, elle doit être assez tordue je pense ^^