captain_torche Posté 26 Octobre 2007 Partager Posté 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 26 Octobre 2007 Partager Posté 26 Octobre 2007 Essaie avec un font-size à 0 sur un " " pour voir Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 26 Octobre 2007 Auteur Partager Posté 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 ! Lien vers le commentaire Partager sur d’autres sites More sharing options...
Portekoi Posté 26 Octobre 2007 Partager Posté 26 Octobre 2007 Même en laissant le height dans le style du Li ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
Callisto Posté 26 Octobre 2007 Partager Posté 26 Octobre 2007 (modifié) 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 29 Octobre 2007 Auteur Partager Posté 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
marcb Posté 29 Octobre 2007 Partager Posté 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 29 Octobre 2007 Auteur Partager Posté 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> Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 29 Octobre 2007 Partager Posté 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
captain_torche Posté 29 Octobre 2007 Auteur Partager Posté 29 Octobre 2007 Ca marche du tonnerre ! Merci Sarc ! Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant