Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2332 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  <ul> (pas <li>) en inline

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

<ul> (pas <li>) en inline

n°1993183
oliparcol
Murphy's Law Master
Posté le 15-05-2010 à 10:58:24  profilanswer
 

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 !

mood
Publicité
Posté le 15-05-2010 à 10:58:24  profilanswer
 

n°1993397
Pascal le ​nain
Posté le 16-05-2010 à 01:30:55  profilanswer
 

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
n°1993409
oliparcol
Murphy's Law Master
Posté le 16-05-2010 à 09:55:12  profilanswer
 

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)

n°1993436
Pascal le ​nain
Posté le 16-05-2010 à 14:35:20  profilanswer
 

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

n°1993461
phosphorel​oaded
Posté le 16-05-2010 à 18:05:43  profilanswer
 

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;

n°1993553
ZePRiNCE
Coucou, tu veux voir ma RTX ?
Posté le 17-05-2010 à 08:19:27  profilanswer
 

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
n°1995601
oliparcol
Murphy's Law Master
Posté le 24-05-2010 à 16:25:53  profilanswer
 

excusez moi pour le retard, j'ai eu pas mal de choses à faire.
 
effectivement, le overflow: hidden fait ce que je veux,
 
merci

n°1995692
gatsu35
Blablaté par Harko
Posté le 25-05-2010 à 05:45:26  profilanswer
 

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
n°1996081
ZePRiNCE
Coucou, tu veux voir ma RTX ?
Posté le 25-05-2010 à 21:19:43  profilanswer
 

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
n°1996092
gatsu35
Blablaté par Harko
Posté le 26-05-2010 à 00:03:50  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  <ul> (pas <li>) en inline

 

Sujets relatifs
Convertir inline CSS en règles ? Converts inline style into CSS rulesinline ralentie appli
Profiling et fonctions inlineinline et pointeur sur fonction
run-time library et inlineprécision: template et inline
virtual inline{HTML} Une <hr> inline
[JS]Events et javascript "inline" (Mootools,mais pas seulement)[CSS] Div en Inline
Plus de sujets relatifs à : <ul> (pas <li>) en inline


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR