[CSS] Listes imbriquées.

Listes imbriquées. [CSS] - Programmation

Marsh Posté le 14-02-2001 à 11:10:54    

chalut,
 
je suis en train de créer une CSS(1) pour formatter l'affichage d'un texte XML sous XMetaL2.0 ...
 
les users ont besoin de 4 types de liste différenciables par des puces :

  • liste 1: disque noir,
  • liste 2: numérotation,
  • liste 3: un tiret,
  • liste 4: un point.


je joue donc avec UltraEdit pour leur pondre une CSS mais voilà... il faut que lorsque les listes sont imbriquées:
 

  • qu'elles respectent la puce assignée au type,

 

  • qu'elles s'indentent visuellement sur la page.


le fait qu'elles utilisent leurs puces assignées est codé mais c'est lors de l'imbrication que cela coince...
 
effectivement je ne peux pas écrire tous les cas...
Liste[TYPE="1"]>Liste[TYPE="2"]>ITEM{...}
Liste[TYPE="2"]>Liste[TYPE="4"]>ITEM{...}
 
sachant que l'on peut descendre à 4 niveaux de profondeur, c'est de la folie douce.
 
d'où ma question (oui oui elle arrive :D): Comment déclare-t-on une indentation par rapport à un élément père ?
 
style: la première liste est toujours à .25in de la marge, le premier fils toujours à .15in de la marge de son père donc .40in de la marge de la feuille, ... jusqu'au 4ème niveau...
 
voici ma CSS actuelle:
 
/* Toute liste */
LIST{
  margin-left: .25in;
}
 
/* Liste de type 1: disque noir */
LIST[TYPE="1"]>ITEM{
  display: list-item;
  list-style-type: disc;
  list-style: outside;
}
 
/* Liste de type 2: numéro */
LIST[TYPE="2"]>ITEM{
  display: list-item;
  list-style-type: decimal;
  list-style: outside;
}
 
/* Liste de type 3: tiret */
LIST[TYPE="3"]>ITEM:before{
  content: "- ";
  display: list-item;
  list-style: outside;
  list-style-type: none;
}
 
/* Liste de type 4: petit point */
LIST[TYPE="4"]>ITEM:before{
  content: ". ";
  display: list-item;
  list-style: outside;
  list-style-type: none;
}
 
 
merchi du coup de paluche ;)
 

 


--Message édité par TBone--


---------------
A straight line is a special case of a curve. It's a curve which is uncurved. -- Susskind.
Reply

Marsh Posté le 14-02-2001 à 11:10:54   

Reply

Marsh Posté le 14-02-2001 à 11:37:58    

:bounce:


---------------
A straight line is a special case of a curve. It's a curve which is uncurved. -- Susskind.
Reply

Marsh Posté le 14-02-2001 à 11:59:55    

un éclair de lucidité m'a foudrouyé... :D ou plutôt, c'est par erreur que j'ai trouvé :lol:
 
il suffisait de créer une description générique:
 
LIST{
  display: block;
  margin-left: .25in;
}
l'erreur que j'avais commise était d'avoir déclaré 'display: list-item;'
 
c'est cool de se répondre à soi-même ... j'ai l'impression de partager mon bureau :D
 
sorry pour le dérangement...


---------------
A straight line is a special case of a curve. It's a curve which is uncurved. -- Susskind.
Reply

Marsh Posté le 14-02-2001 à 12:06:25    

si tu le dis :)
est ce qu'on truc comme ca: http://www.w3schools.com/css/tryit [...] n_relative
aurait marché dans ton cas ?

Reply

Marsh Posté le 14-02-2001 à 13:36:10    

pas si lucide que ça l'éclair tout compte fait... j'ai un bug à l'usage...
 
pour répondre à ton interrogation, non ça ne fait pas l'affaire ton brol car XMetaL 2.0 est bouché à l'émeri... il ne comprend qu'une partie de la recommandation CSS... cela étant, je l'ai bookmarqué ton truc car c'est bien utile !
 
bon! remettons-nous au travail... même si la digestion va s'avérer longue et difficile au vu de ce que je viens de manger... soit c'est pas le propos du post :D
 
euh... voici ce que j'ai comme problème:
l'imbrication et l'identation successive se passent bien. sauf pour les listes de type 3 et 4 car je dois utiliser des puces non-standards: le '.' et le '-'.
dans ce cas, je dois passer par la description ":before" (frère de ... ":after" ) de l'élément permetant de glisser un contenu devant le contenu réel XML: le ". " ou le "- " dans mon cas.
Le problème vient de XMetaL qui ne veut pas passer à la ligne avec ce genre de description.  
 
<LISTE TYPE="3">
   <ITEM>gnap</ITEM>
   <ITEM>gnap2</ITEM>
   <ITEM>gnap3</ITEM>
</LISTE>
 
donne:  
- gnap - gnap2 - gnap3  
 
au lieu de:
- gnap
- gnap2
- gnap3
 
il faudrait alors écrire "display: block;" pour qu'il le fasse mais dans ce cas, le ":before" passe avant:
 
-  
gnap
-  
gnap2
-  
gnap3
 
 
 
/* Liste de type 3: tiret */  
LIST[TYPE="4"]>ITEM:before{  
  content: "- ";  
  display: list-item;  
  list-style: outside;  
  list-style-type: none;  
}  
 
QQ'un utilise XMetaL 2.0 ???? ainsi que les CSS qui vont avec ?


---------------
A straight line is a special case of a curve. It's a curve which is uncurved. -- Susskind.
Reply

Sujets relatifs:

Leave a Replay

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