Deux listes ordonnées continues

**captain_torche** · 26 Octobre 2007

Pour des besoins de présentation, j'ai besoin de séparer une liste ordonnée (OL) en deux colonnes.

J'ai bien sûr pensé à la séparer en deux listes différentes en float: left, mais la numérotation de la seconde recommence à un.

J'ai alors pensé à rajouter des éléments vides en haut de la seconde liste, et à les styler pour qu'ils n'apparaissent pas :

<li style="visibility: hidden; height: 0"></li>

Ca fonctionne très bien sous Firefox et Opera (la première liste semble se continuer sur la seconde), mais les versions d'IE que j'ai testées n'interprètent pas le height: 0 que j'ai donné. Les éléments vides conservent leur "place", et la seconde liste apparaît beaucoup plus bas qu'elle n'est censée être.

Comment puis-je gérer ce que j'essaye de faire ?

Une CSS à laquelle je n'aurais pas pensé ?

Ou y a t'il un autre principe, en conservant une seule liste ?

Merci d'avance.

**Portekoi** · 26 Octobre 2007

Essaie avec un font-size à 0 sur un " " pour voir

**captain_torche** · 26 Octobre 2007

Ca marche presque, il me laisse juste l'espace d'un élément supplémentaire.

(Il me fait pareil sous firefox quand j'omets le visibility: hidden. Apparemment, le li conserve malgré tout une hauteur de 2px).

On touche au but !

**Portekoi** · 26 Octobre 2007

Même en laissant le height dans le style du Li ?

Callisto · 26 Octobre 2007

Essaye avec :

<li style="display:none;"></li>

La différence entre visibility et display, c'est que le premier se contente de cacher l'élément tout en le laissant agir sur le flux du document, alors que le deuxième le retire complètement du flux du document.

Modifié 26 Octobre 2007 par Callisto

**captain_torche** · 29 Octobre 2007

Justement, en display: none; son numéro n'est plus conservé, et j'ai besoin de le garder pour simuler une continuité de numérotation.

marcb · 29 Octobre 2007

Apparemment, le li conserve malgré tout une hauteur de 2px).

Tu as essayé de mettre le line-height: 0;

Sinon, tu peux mettre un exemple du html/css de là où tu en es pour qu'on teste ?

M

**captain_torche** · 29 Octobre 2007

Non, ça ne change rien.

Voici le code que j'utilise :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Test OL</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		ol {
			margin-left: 50px;
		}
		.hidden {
			visibility: hidden;
			font-size: 0;
			height: 0;
			line-height: 0;
		}
	</style>
</head>
<body>
<ol>
	<li>Élément 1</li>
	<li>Élément 2</li>
	<li>Élément 3</li>
	<li>Élément 4</li>
	<li>Élément 5</li>
	<li>Élément 6</li>
	<li>Élément 7</li>
	<li>Élément 8</li>
	<li>Élément 9</li>
	<li>Élément 10</li>
</ol>
<ol>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li class="hidden"> </li>
	<li>Élément 11</li>
	<li>Élément 12</li>
	<li>Élément 13</li>
	<li>Élément 14</li>
	<li>Élément 15</li>
	<li>Élément 16</li>
	<li>Élément 17</li>
	<li>Élément 18</li>
	<li>Élément 19</li>
	<li>Élément 20</li>
</ol></body>
</html>

Sarc · 29 Octobre 2007

Définition

L'attribut HTML START de la balise HTML OL spécifie le nombre du départ de la liste ordonnée.<OL START="2"> </OL> 1 étant le départ par défaut.

Exemples :

<ol start="2" type="1">

<li>Liste 0</li>

<li>Liste 1</li>

</ol>

J'ai vu que tu avais un doctype en HTML (bien que d'après eux, il soit également valide xhtml), tu ne peux pas utiliser cet attribut ? S'il marche, bien sûr... je n'ai pas testé !

Source : aliasdmc

**captain_torche** · 29 Octobre 2007

Ca marche du tonnerre !

Merci Sarc !

Connexion

Deux listes ordonnées continues

Sujets conseillés

captain_torche

Portekoi

captain_torche

Portekoi

Callisto

captain_torche

marcb

captain_torche

Sarc

captain_torche

Veuillez vous connecter pour commenter

Parcourir

Activité