Faire une liste avec deux éléments par ligne

Version imprimable

11/04/2007, 15h49
pc.bertineau

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...) ?
11/04/2007, 16h02
MasterOfChakhaL
salut,

Tu peux faire quelque chose dans le genre:
Code:

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...
11/04/2007, 16h11
pc.bertineau

ok, je teste!
merci
11/04/2007, 16h19
pc.bertineau

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
11/04/2007, 17h00
MasterOfChakhaL

Tu n'as testé que avec IE ?
11/04/2007, 17h17
pc.bertineau

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

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
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/>";

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...
est-ce que ça peut venir de <h3> ?

12/04/2007, 09h52
pc.bertineau

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.. :aie: 8O :aie:
12/04/2007, 10h55
MasterOfChakhaL

Citation:

Envoyé par ziggotos

...Je vous poste le code de mes listes, généré par php. J'ai peut-être des pbs à ce niveau là...

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...
12/04/2007, 11h16
Candygirl

Citation:

Envoyé par ziggotos

En effet ça ne fonctionne pas parfaitement sous FF

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.

Citation:

Envoyé par ziggotos

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

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.
12/04/2007, 12h15
pc.bertineau

Citation:

Envoyé par MasterOfChakhaL

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

Merci pour vos réponses. Le coup de l'arrondi, je vois pas comment j'aurais trouvé autrement..!

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 !
12/04/2007, 12h49
Macintoc

Developer Toolbar pour Internet Explorer 7.

Firebug pour Firefox.
12/04/2007, 12h51
MasterOfChakhaL

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:

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>

12/04/2007, 13h31
pc.bertineau
Code:

1 2 3 4 5 li { display:inline; float:left; width:50%; }
marche très bien sur FF, pas de répartition sur 2 colonnes avec IE6.
Code:

1 2 3 4 li { display:inline; width:50%; }
pas de répartition sur 2 colonnes avec FF, problème de l'arrondi au pixel de IE6..
12/04/2007, 13h42
MasterOfChakhaL
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
Code:

1 2 3 4 * { margin: 0; padding: 0; }
le * sélectionne tous les éléments de ta page.

Si tu veux limiter cela à tes listes, alors il faut modifier un peu le sélecteur
Code:

1 2 3 4 ul, ul * { margin: 0; padding: 0; }
(s'applique aux listes et à tout ce qui se trouve dans les listes)

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...)
12/04/2007, 13h43
pc.bertineau

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% .. :king:

edit2 : on s'est croisé, on s'est compris :P

Comme ça ?

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

12/04/2007, 14h47
pc.bertineau

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