<ul> (pas <li>) en inline

<ul> (pas <li>) en inline - HTML/CSS - Programmation

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:
 

Code :
  1. * Point 1 de la liste 1      * Point 1 de la liste 2
  2. * Point 2 de la liste 1      * Point 2 de la liste 2
  3. * Point 3 de la liste 1      * Point 3 de la liste 2
  4. * etc...                        * etc.


 
 
Merci d'avance !

Reply

Marsh Posté le 15-05-2010 à 10:58:24   

Reply

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 ?


Message édité par Pascal le nain le 16-05-2010 à 01:31:45
Reply

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)

Reply

Marsh Posté le 16-05-2010 à 14:35:20    

Houla, j'ai vraiment du mal à comprendre, tu peux poster un code html et css ?

Reply

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;

Reply

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


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 [:amel_the_white]
Mais ça marche sur tous les navigateurs que j'ai rencontrés, et c'est devenu une pratique assez courante [:daaadou:1]
(oui, meme IE 6 :o )

Message cité 1 fois
Message édité par ZePRiNCE le 17-05-2010 à 08:20:03

---------------
A VENDRE: Razer Chroma ARGB Controller / Boitier / Support Triple Screen / Ventirad / Carte USB3
Reply

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

Reply

Marsh Posté le 25-05-2010 à 05:45:26    

ZePRiNCE a écrit :


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 [:amel_the_white]  
Mais ça marche sur tous les navigateurs que j'ai rencontrés, et c'est devenu une pratique assez courante [:daaadou:1]  
(oui, meme IE 6 :o )


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.


---------------
Blablaté par Harko
Reply

Marsh Posté le 25-05-2010 à 21:19:43    

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


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  [:petrus75] )

 

J'ai jamais eu besoin de faire autre chose [:clooney15]

Message cité 1 fois
Message édité par ZePRiNCE le 25-05-2010 à 21:19:59

---------------
A VENDRE: Razer Chroma ARGB Controller / Boitier / Support Triple Screen / Ventirad / Carte USB3
Reply

Marsh Posté le 26-05-2010 à 00:03:50    

ZePRiNCE 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  [:petrus75] )

 

J'ai jamais eu besoin de faire autre chose [:clooney15]


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.


Message édité par gatsu35 le 26-05-2010 à 00:04:21

---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed