Les listes dans le "Contenu"


En mauve sur l'image


Partie "Contenu > listes"

Nom de l'attribut Nom CSS Valeur Valeurs possibles
Puces de la liste list-style-type Forme de puce (ex : disc,circle,square,none)
Marge extérieure gauche margin-left Dimension (ex: 10px)

 

Code CSS de la Partie "Contenu > listes"

 

#contenu ul
{
list-style-type : square;
margin-left : 20px;
}

 

Dans le formulaire de l'assistant DizPerso, 2 modifications pour cette cette règle.

 

L'attribut marge extérieure gauche margin-left est le décalage contenant la puce, je l'ai mis à 20px pour une meilleur présentation

Le paramètrage  de la liste à puces par défaut, mon choix carré(plein), toutes ces listes seront avec le même style de puce. Si vous changez ultérieurement ce style toutes les listes auront la nouvelle puce sélectionnée dans la liste.

Nous verrons par la suite comment en cours de rédaction d'un article il vous sera possible de mettre une puce différente et même des conbinaisons multiples.

Vous devez vous satisfaire en utilisant cet assistant simple de cette seule possibilité qui vous permet quand même de réaliser une présentation correcte.

Dans le composeur, quand vous faites une liste à puces de plusieurs niveaux, les puces sont différentes, style "disc plein",  puis "cercle vide" et  "carré plein", dans l'ordre de la liste de choix.

 

Malheureusement après validation, en visualisant  dans le navigateur, je suis sous IE7, toutes les puces sont du style paramétré par défaut dans DizPerso. J'ignore actuellement si ce bogue peut être supprimé ou pas. 

 

Quelques exemples

 

Liste avec puces :

  • Element1
  • Element2
  • Element3

 

Liste avec numéros

  1. Element1
  2. Element2
  3. Element3

 

Liste composée, numéros et puces

  1. Element1
    • Option1
    • Option2
    • Optiont3
  2. Element2
    • Option1
    • Option2
    • Option3
  3. Element3
    • Option1
    • Option2
    • Option3

 

Liste à puces multiples 

  • Element1
    • Option1
    • Option2
    • Option3

     

  • Element2
    • Option1
    • Option2
    • Option3

     

  • Element3
    • Option1
      • Choix1
      • Choix2
      • Choix3

       

    • Option2
      • Choix1
      • Choix2
      • Choix3

       

    • Option3
      • Option1
      • Option2
      • Option3

       

 

Astuces

 

Liste à puces multiples, modifiée dans le code source HTML, pour résoudre le problème des puces qui prennent automatiquement dans le navigateur (IE7), le style par défaut paramétré dans DizPerso.

  • Element1
    • Option1
    • Option2
    • Option3
  • Element2
    • Option1
      • Choix1
      • Choix2 
    • Option2
      • Choix1
      • Choix2
      • Choix3
    • Option3
      • Choix1

       

Pour mettre les puces comme vous le souhaitez, il faut comme ci-dessous, mettre le style de puce directement dans la balise HTML "<UL>"

 

<P>Liste à puces multiples</P>
<UL style="LIST-STYLE-TYPE: square">
<LI>Element1 </LI>
<UL style="LIST-STYLE-TYPE: disc">
<LI>Option1
<LI>Option2
<LI>Option3</LI></UL>
<LI>Element2 </LI>
<UL style="LIST-STYLE-TYPE: disc">
<LI>Option1</LI>
<UL style="LIST-STYLE-TYPE: circle">
<LI>Choix1
<LI>Choix2</LI></UL>
<LI>Option2</LI>
<UL style="LIST-STYLE-TYPE: circle">
<LI>Choix1
<LI>Choix2
<LI>Choix3 </LI></UL>
<LI>Option3
<UL style="LIST-STYLE-TYPE: circle">
<LI>Choix1 </LI></UL>
</LI></UL></UL>

 

La création de vos listes sera plus facile avec ce Générateur de listes...

 

Liste des Astuces

 



23/05/2008
0 Poster un commentaire

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso