<ul> (pas <li>) en inline - HTML/CSS - Programmation
Marsh Posté le 16-05-2010 à 01:30:55
Je me trompe peut-être, mais une liste <ul></ul> est forcément en display block, qui s'oppose au display inline...
La seule moyen est donc bien le float:left... ca ne te convient pas ?
Marsh Posté le 16-05-2010 à 09:55:12
pour le display block, on peut normalement changer le réglage dans css non ?
sinon pour le "float: left" le problème c'est que je dois régler finement la position par un ajustement avec "position: relative" et que ça me fait un gros trou juste en dessous (ce qui est en dessous des blocs réglés par position relative ne va pas combler l'espace laissé par cet ajustement)
Marsh Posté le 16-05-2010 à 14:35:20
Houla, j'ai vraiment du mal à comprendre, tu peux poster un code html et css ?
Marsh Posté le 16-05-2010 à 18:05:43
Pas de positionnement relatif si tu ne veux pas un gros trou justement ... et le positionnement absolu (qui sortirait un bloc du flux de ton document) est déconseillé si tu n'es pas certain de ne pas avoir de superposition ...
Révisions : http://openweb.eu.org/articles/initiation_flux/ (3 articles)
Tes listes ont une largeur ? Tu fais flotter la première et tu mets un clear: left; sur ce qui suit la seconde liste pour que ce soit bien sous tes deux listes, quelle que soit la plus longue des deux.
Il n'y a pas que tes ul à prendre en compte, tu as aussi tes li qui ont par défaut un display: list-item;
Marsh Posté le 17-05-2010 à 08:19:27
oliparcol a écrit : pour le display block, on peut normalement changer le réglage dans css non ? sinon pour le "float: left" le problème c'est que je dois régler finement la position par un ajustement avec "position: relative" et que ça me fait un gros trou juste en dessous (ce qui est en dessous des blocs réglés par position relative ne va pas combler l'espace laissé par cet ajustement) |
phosphoreloaded a écrit : Pas de positionnement relatif si tu ne veux pas un gros trou justement ... et le positionnement absolu (qui sortirait un bloc du flux de ton document) est déconseillé si tu n'es pas certain de ne pas avoir de superposition ... Tes listes ont une largeur ? Tu fais flotter la première et tu mets un clear: left; sur ce qui suit la seconde liste pour que ce soit bien sous tes deux listes, quelle que soit la plus longue des deux. Il n'y a pas que tes ul à prendre en compte, tu as aussi tes li qui ont par défaut un display: list-item; |
En general ya pas besoin de s'embeter avec ça, tu met un "overflow: hidden;" sur ton UL, et ça va l'empecher de foutre du bordel en dehors de ce UL (donc pas de marge trop grosses etc.)
Me semble que c'etait pas prévu pour ça a la base
Mais ça marche sur tous les navigateurs que j'ai rencontrés, et c'est devenu une pratique assez courante
(oui, meme IE 6 )
Marsh Posté le 24-05-2010 à 16:25:53
excusez moi pour le retard, j'ai eu pas mal de choses à faire.
effectivement, le overflow: hidden fait ce que je veux,
merci
Marsh Posté le 25-05-2010 à 05:45:26
ZePRiNCE a écrit : |
contexte de formatage toussa toussa, pour IE6 faut appliquer du haslayout, le overflow:hidden il s'en contre-fout, il n'a pas de notion de contexte de formatage avec l'overflow ce con.
Marsh Posté le 25-05-2010 à 21:19:43
gatsu35 a écrit :
|
Bouaip, nan mais je disais avec un overflow:hidden ça marche pas mal
Apres, si IE5.5/6 fait encore chier, suffit de rajouter en general un "height: 1%" dans la div recalcitrante, via un CSS en commentaire conditionnel (je sais pas si c'est comme ça qu'on dit )
J'ai jamais eu besoin de faire autre chose
Marsh Posté le 26-05-2010 à 00:03:50
ZePRiNCE a écrit :
Apres, si IE5.5/6 fait encore chier, suffit de rajouter en general un "height: 1%" dans la div recalcitrante, via un CSS en commentaire conditionnel (je sais pas si c'est comme ça qu'on dit ) J'ai jamais eu besoin de faire autre chose |
C'est bien ce que je disais, tu appliques du "contexte de formatage" à ton conteneur.
Ton height:1% entraine le haslayout sous IE6, qui lui même entraine un comportement proche du contexte de formatage. La propriété la plus propre pour éviter de toucher à des propriétés telles que height, width, position, float (qui activent le haslayout), il suffit de mettre : zoom:1;
En fait j'essaye juste de t'expliquer le concept qu'il y a derrière l'application du overflow:hidden.
Marsh Posté le 15-05-2010 à 10:58:24
Bonjour,
j'aimerai mettre deux listes côte à côte mais avec leur points qui soient bien en descendant. Donc avec les ul en inline mais pas les li. Mais malheureusement je n'ai pas réussi... la seule manière d'obtenir ce que je veux est de jouer avec le positionnement relatif et en mettant le premier inline en "float: left".
Je me dis que ça peut-être un lien avec la taille des blocs <li> qui sont à l'intérieur des <ul> en inline mais je n'arrive pas à régler le bouzin pour que ça fonctionne.
L'effet recherché est celui-ci:
Merci d'avance !