Bonjour,
Est-ce possible, simplement avec du css de ranger les éléments d'une liste par ligne de 2 éléments (une colonne de deux éléments par ligne...) ?
Bonjour,
Est-ce possible, simplement avec du css de ranger les éléments d'une liste par ligne de 2 éléments (une colonne de deux éléments par ligne...) ?
salut,
Tu peux faire quelque chose dans le genre:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 li { display:inline; float: left; width: 50%; }
il y aura surement des choses à adapter pour les éléments qui suivent ta liste dans le code source. Mais il te faudra nous donner un bout de code pour qu'on t'explique ou agir...
j'ai juste viré la propriété float qui influait sur des éléments intercalés et c'est bon. J'ai ce que je voulais !
Merci
oui, je fais une appli avec une interface web, pour une boîte où IE6 est la règle.. je teste chez moi le soir sur FF ce que ça donne.
Tu fais bien de me faire remarquer, je regarderai..
En effet ça ne fonctionne pas parfaitement sous FF, et sous IE6, suivant les versions c'est pas non plus toujours top...
Je vous poste le code de mes listes, généré par php. J'ai peut-être des pbs à ce niveau là..
En fait, le pb est que mes listes se répartissent sur 2 colonnes, comme je le souhaite, mais si je n'ai qu'un élément de liste, c'est le titre (<h3>) de la liste suivante qui est décalé à droite...
Code : 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
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
72
73
74
75
76 $query = "SELECT a.id_geo,a.identifiant FROM geometries a INNER JOIN (SELECT idveh FROM vehicules WHERE".$tabVehCrit[0]; for($i=1;$i<$vehCritCnt;$i++) $query = $query." AND".$tabVehCrit[$i]; $query = $query.") b ON a.idveh=b.idveh ORDER BY a.identifiant DESC"; echo "<ul type='square'><h3>Géométrie</h3>"; $result = mysql_query($query) or die(mysql_error()); if (mysql_num_rows($result) > 0) { while ($tab = mysql_fetch_array($result)) { echo "<li><a href='/mes/geo_affich.php?id_geo=\"".$tab['id_geo']."\"' target='_blank'>".$tab['identifiant']."</a></li>"; } } else echo "<li><b>Aucune fiche</b> géométrie enregistrée pour ce(s) véhicule(s).</li>"; echo '</ul><br/>'; $query = "SELECT a.id_hau,a.identifiant FROM hauteurs a INNER JOIN (SELECT idveh FROM vehicules WHERE".$tabVehCrit[0]; for($i=1;$i<$vehCritCnt;$i++) $query = $query." AND".$tabVehCrit[$i]; $query = $query.") b ON a.idveh=b.idveh ORDER BY a.identifiant DESC"; echo "<ul type='square'><h3>Hauteurs</h3>"; $result = mysql_query($query) or die(mysql_error()); if (mysql_num_rows($result) > 0) { while ($tab = mysql_fetch_array($result)) { echo "<li><a href='/mes/hau_affich.php?id_hau=\"".$tab['id_hau']."\"' target='_blank'>".$tab['identifiant']."</a></li>"; } } else echo "<li><b>Aucune fiche</b> hauteurs enregistrée pour ce(s) véhicule(s).</li>"; echo "</ul><br/>"; $query = "SELECT a.id_inc,a.identifiant FROM incidents a INNER JOIN (SELECT idveh FROM vehicules WHERE".$tabVehCrit[0]; for($i=1;$i<$vehCritCnt;$i++) $query = $query." AND".$tabVehCrit[$i]; $query = $query.") b ON a.idveh=b.idveh ORDER BY a.identifiant DESC"; echo "<ul type='square'><h3>Incidents</h3>"; $result = mysql_query($query) or die(mysql_error()); if (mysql_num_rows($result) > 0) { while ($tab = mysql_fetch_array($result)) { echo "<li><a href='/veh/incid_affich.php?id_inc=\"".$tab['id_inc']."\"' target='_blank'>".$tab['identifiant']."</a></li>"; } } else echo "<li><b>Aucune fiche</b> incidentelle enregistrée pour ce(s) véhicule(s).</li>"; echo "</ul><br/>"; $query = "SELECT a.id_ess,a.identifiant FROM essais a INNER JOIN (SELECT idveh FROM vehicules WHERE".$tabVehCrit[0]; for($i=1;$i<$vehCritCnt;$i++) $query = $query." AND".$tabVehCrit[$i]; $query = $query.") b ON a.idveh=b.idveh ORDER BY a.identifiant DESC"; echo "<ul type='square'><h3>Essais</h3>"; $result = mysql_query($query) or die(mysql_error()); if (mysql_num_rows($result) > 0) { while ($tab = mysql_fetch_array($result)) { echo "<li><a href='/veh/essai_affich.php?id_ess=\"".$tab['id_ess']."\"' target='_blank'>".$tab['identifiant']."</a></li>"; } } else echo "<li><b>Aucune fiche</b> essai enregistrée pour ce(s) véhicule(s).</li>"; echo "</ul><br/>";
est-ce que ça peut venir de <h3> ?
Autre bizarrerie :
lorsque j'ouvre la page en question dans une nouvelle fenêtre (avec un espace en largeur pourtant moins grand..), la liste se répartit sur deux colonnes. Elle reste sur une colonne si j'ouvre dans la même fenêtre. Et dès que je touche au redimensionnement de la fenêtre, la liste se remet sur une colonne..
Là, tu nous donnes le code php. Donne nous plutôt le code généré (que du html). Sinon, tu te prives de l'aide de tout ceux qui ne connaissent pas le php, c'est dommage...Envoyé par ziggotos
C'est normal, si tu vires le float qui fait passer automatiquement l'élément en display:block et que tu mets un display:inline, le width ne sera pas appliqué sur les navigateurs respectant les standards puisque le width ne s'applique pas aux éléments de type inline.Envoyé par ziggotos
Cela est probablement dû à l'arrondi mathématique que fait IE des %. Tant que la largeur de ta fenêtre est un nombre paire de pixels, tu pourras avoir 2 éléments d'une larguer de 50% côtées à côtes, mais si la largeur est impaires, tu auras comme largeur de colonnes x.5 et comme IE arrondit systématiquement au nombre supérieur, tu auras 1px de trop et donc tes 2 éléments ne pourrons pas être côtes à côtes.Envoyé par ziggotos
Merci pour vos réponses. Le coup de l'arrondi, je vois pas comment j'aurais trouvé autrement..!Envoyé par MasterOfChakhaL
Pour le code html, je ne sais pas si c'est possible... Le script php que je vous ai montré est la construction d'un innerHtml d'une fonction ajax... si j'affiche le code source, je ne l'ai pas.. Mais si c'est possible de lire le code interprété, même après une requête ajax, je veux bien que vous me disiez comment !
Developer Toolbar pour Internet Explorer 7.
Firebug pour Firefox.
C'est sur que c'est un peu plus compliqué comme ca...
Mais avec firefox et son extension firebug, c'est possible:
cf la page outils: http://xhtml.developpez.com/outils/?cat=plugins#firebug
Voilà une partie du code interprété :
Code : 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 <STYLE type="text/css"> LI {DISPLAY: inline;WIDTH: 50%} </STYLE> <DIV id="res"> <UL type="square"><H3>Géométrie</H3> <LI><A href='http://127.0.0.1/mes/geo_affich.php?id_geo="6"' target="_blank">GEO--Nouveau Spider--Concept--Maquette--6</A></LI> </UL> <BR /> <UL type="square"><H3>Hauteurs</H3> <LI><A href='http://127.0.0.1/mes/hau_affich.php?id_hau="3"' target="_blank">HAU--Nouveau Spider--Concept--Maquette--3</A></LI> </UL> <BR /> <UL type="square"><H3>Incidents</H3> <LI><B>Aucune fiche</B> incidentelle enregistrée pour ce(s) véhicule(s).</LI> </UL> <BR /> <UL type="square"><H3>Essais</H3> <LI><A href='http://127.0.0.1/veh/essai_affich.php?id_ess="4"' target="_blank">ESS--Nouveau Spider--Concept--Maquette--4</A></LI> <LI><A href='http://127.0.0.1/veh/essai_affich.php?id_ess="3"' target="_blank">ESS--Nouveau Spider--Concept--Maquette--3</A></LI> <LI><A href='http://127.0.0.1/veh/essai_affich.php?id_ess="2"' target="_blank">ESS--Nouveau Spider--Concept--Maquette--2</A></LI> <LI><A href='http://127.0.0.1/veh/essai_affich.php?id_ess="1"' target="_blank">ESS--Nouveau Spider--Concept--Maquette--1</A></LI> </UL> <BR /> </DIV>
marche très bien sur FF, pas de répartition sur 2 colonnes avec IE6.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 li { display:inline; float:left; width:50%; }
pas de répartition sur 2 colonnes avec FF, problème de l'arrondi au pixel de IE6..
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 li { display:inline; width:50%; }
Les marges et les padding s'ajoutent a la largeur que tu définis. Si tu ne t'en est pas ocuppé, alors, il y en a par défaut.
tu peux ajouter ca au début de ton css
le * sélectionne tous les éléments de ta page.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 * { margin: 0; padding: 0; }
Si tu veux limiter cela à tes listes, alors il faut modifier un peu le sélecteur
(s'applique aux listes et à tout ce qui se trouve dans les listes)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 ul, ul * { margin: 0; padding: 0; }
EDIT:
Pour le coup de l'arrondi mathématiques dont te parlait candygirl, commence par faire tes tests avec 49%.
Tu verras ensuite s'il y a lieu de s'attarder la dessus (1%, ca fait pas une énorme de différence...)
vu que je dois respecter le "standard IE" (oui je sais, ça fait mal aux yeux!), j'ai mis un width:49% et viré le float...
Pas très propre mais suffisant pour l'instant...
Merci à tous
edit: Les mentions de padding et margin ne changent pas le pb de l'arrondi au pixel. Avec un width:49% (qui fonctionne bien), IE doit faire un arrondi en amont, et j'imagine que la largeur relative réelle est un coup 48%, un autre 49% ou encore 50%.. mais la somme des 2 ne dépasse jamais 100%, comme ça pouvait être le cas avec width:50% ..
edit2 : on s'est croisé, on s'est compris
Comme ça ?
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 <style type="text/css"> ul#menu, ul#menu ul{ list-style:none; margin:0; padding:0; } ul#menu>li>ul>li{ display:inline; } </style> <ul id="menu"> <li> <h3>Géométrie</h3> <ul> <li><a href='http://127.0.0.1/mes/geo_affich.php?id_geo="6"' target="_blank">GEO--Nouveau Spider--Concept--Maquette--6</a></li> </ul> </li> <li> <h3>Hauteurs</h3> <ul> <li><a href='http://127.0.0.1/mes/hau_affich.php?id_hau="3"' target="_blank">HAU--Nouveau Spider--Concept--Maquette--3</a></li> </ul> </li> <li> <h3>Incidents</h3> <ul> <li><b>Aucune fiche</b> incidentelle enregistrée pour ce(s) véhicule(s).</li> </ul> </li> <li> <h3>Essais</h3> <ul> <li><a href='http://127.0.0.1/veh/essai_affich.php?id_ess="4"' target="_blank">ESS--Nouveau Spider--Concept--Maquette--4</a></li> <li><a href='http://127.0.0.1/veh/essai_affich.php?id_ess="3"' target="_blank">ESS--Nouveau Spider--Concept--Maquette--3</a></li> </ul> <ul> <li><a href='http://127.0.0.1/veh/essai_affich.php?id_ess="2"' target="_blank">ESS--Nouveau Spider--Concept--Maquette--2</a></li> <li><a href='http://127.0.0.1/veh/essai_affich.php?id_ess="1"' target="_blank">ESS--Nouveau Spider--Concept--Maquette--1</a></li> </ul> </li> </ul>
Pas mieux..
La solution de mettre 49% me convient très bien. La version de l'appli est temporaire et ne sera utilisée que sur IE..
merci quand même
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager