Les listes dans le

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

Element1
Element2
Element3

Liste composée, numéros et puces

Element1
- Option1
- Option2
- Optiont3
Element2
- Option1
- Option2
- Option3
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