Aide:Boîte déroulante : Différence entre versions

De WikiGenWeb
Aller à : navigation, rechercher
m (→‎Inconvénients)
m
 
(42 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
−
 
−
Cette page est un état des lieux concernant les boîtes déroulantes.
 
−
 
−
== Vocabulaire ==
 
 
Un ''modèle déroulant'' est un [[Aide:Modèle|modèle]] qui a un bouton enrouler/dérouler pour cacher/afficher son contenu : [[:Catégorie:Modèle déroulant]].
 
Un ''modèle déroulant'' est un [[Aide:Modèle|modèle]] qui a un bouton enrouler/dérouler pour cacher/afficher son contenu : [[:Catégorie:Modèle déroulant]].
  
Ligne 41 : Ligne 37 :
 
== Usage ==
 
== Usage ==
  
−
=== Boîtes adaptées ===
+
=== Boîte adaptée ===
 
* Dans les articles :
 
* Dans les articles :
 
** En tenant compte des contraintes techniques, les modèles déroulants sont <u>en général à bannir du corps des articles</u>;
 
** En tenant compte des contraintes techniques, les modèles déroulants sont <u>en général à bannir du corps des articles</u>;
Ligne 115 : Ligne 111 :
  
 
=== Paramètres ===
 
=== Paramètres ===
−
{| class="wikitable-center"
+
{{boîte déroulante/début
 +
|couleurFondT=#66CC80
 +
|largeur=1100px
 +
|alignB=center
 +
|titre=Paramètres par catégories
 +
}}
 +
{| class="wikitable-center" style="width:100%"
 
|----
 
|----
 
! colspan="4" | <big>Paramètres obligatoires</big>
 
! colspan="4" | <big>Paramètres obligatoires</big>
Ligne 123 : Ligne 125 :
 
| <code>titre</code> || Titre affiché de la boîte || colspan="2" | Totalement libre, mais le caractère « | » par exemple ne passe pas.
 
| <code>titre</code> || Titre affiché de la boîte || colspan="2" | Totalement libre, mais le caractère « | » par exemple ne passe pas.
 
|----
 
|----
−
| <code>contenu</code> || Texte  contenu dans la boîte || colspan="2" | Totalement libre, mais certains  caractères spéciaux ne passent pas, comme la barre verticale. Utiliser  dans ce cas :<br /><code>{{M|Boîte déroulante/début}}  ''contenu'' {{M|Boîte déroulante/fin}}</code>.
+
| <code>contenu</code> || Texte  contenu dans la boîte || colspan="2" | Totalement libre
 
|----
 
|----
 
! colspan="4" | <big>Paramètres facultatifs</big>
 
! colspan="4" | <big>Paramètres facultatifs</big>
Ligne 129 : Ligne 131 :
 
! &nbsp;paramètre&nbsp; || &nbsp;effet&nbsp; || &nbsp;valeur par défaut&nbsp; || &nbsp;valeurs possibles&nbsp;
 
! &nbsp;paramètre&nbsp; || &nbsp;effet&nbsp; || &nbsp;valeur par défaut&nbsp; || &nbsp;valeurs possibles&nbsp;
 
|----
 
|----
−
| <code>arrondi</code>  (désactivé) || arrondi des angles || <code>0</code> || Les  angles peuvent apparaître arrondis si le navigateur le permet.<br   />Visible sur les navigateurs Mozilla, non visible sur Internet   Explorer.<br />Valeur conseillée : <code>0.6em</code>,  s’exprime en '''pt''', '''px''' ou '''em'''
+
| <code>arrondi</code>  (activé) || arrondi des angles || <code>0.6em</code> || Les  angles peuvent apparaître arrondis si le navigateur le permet.<br />Visible sur les navigateurs Mozilla, non visible sur Internet Explorer.<br />Valeur conseillée : <code>0.6em</code>,  s’exprime en '''pt''', '''px''' ou '''em'''
 
|----
 
|----
−
| <code>image</code> || image à gauche || || L’image   facultative apparaît à l’ouverture de la boîte.<br />Elle doit   être totalement renseignée.<br />Exemple :  <code><nowiki>[[Fichier:Wiki.png|32px]]</nowiki></code>
+
| <code>image</code> || image à gauche || [[Image:Wiki.png|20px]] || L’image facultative apparaît à l’ouverture de la boîte.<br />Elle doit être totalement renseignée.<br />Exemple :  <code><nowiki>[[Fichier:Wiki.png|20px]]</nowiki></code>
 +
|-
 +
| <code>style</code> || style complémentaire ||  || Style complémentaire pour l'image, terminé par un « ; ».
 
|----
 
|----
 
| <code>alignB</code> || alignement de la boîte || <code>left</code> || <code>left</code>, <code>right</code>, <code>center</code> ou <code>justify</code>
 
| <code>alignB</code> || alignement de la boîte || <code>left</code> || <code>left</code>, <code>right</code>, <code>center</code> ou <code>justify</code>
Ligne 139 : Ligne 143 :
 
|  <code>margeHaut</code> || marge haut (avant la boîte) ||  <code>0em</code> || La hauteur doit être exprimée avec une  unité valable.<br />Il est possible de mettre 0
 
|  <code>margeHaut</code> || marge haut (avant la boîte) ||  <code>0em</code> || La hauteur doit être exprimée avec une  unité valable.<br />Il est possible de mettre 0
 
|----
 
|----
−
| <code>margeBas</code> || marge bas (après la boîte) || <code>1em</code> || La hauteur doit être exprimée avec une unité valable.<br />Il est possible de mettre 0
+
| <code>margeBas</code> || marge bas (après la boîte) || <code>0em</code> || La hauteur doit être exprimée avec une unité valable.<br />Il est possible de mettre 0
 
|----
 
|----
−
| <code>largeur</code> || largeur de la boîte || <code>100%</code> || La largeur doit être exprimée avec une unité valable.
+
| <code>marge</code> || marges L, H, D, B || 0 || marges autour du contenu
 
|----
 
|----
−
|  <code>couleurBordure</code> || couleur de la bordure ||  <code>#AAAAAA</code> || rowspan="3" | Expression de couleur valide<br />{{Boîte   déroulante|titre=Table des  couleurs|arrondi=0.6em|align=center|largeur=98%|couleurFondB=#eee|couleurFondT=#fff|couleurFond=#fff|  contenu={{Principales couleurs}}}}
+
| <code>largeur</code> || largeur de la boîte || <code>99%</code> || La largeur doit être exprimée avec une unité valable.
 +
|----
 +
|  <code>couleurBordure</code> || couleur de la bordure ||  <code>#AAAAAA</code> || rowspan="3" | Expression de couleur valide<br />{{Boîte déroulante/début|titre=Table des  couleurs|arrondi=0.6em|align=center|largeur=98%}} {{Principales couleurs}} {{Boîte déroulante/fin}}
 
|----
 
|----
 
| <code>couleurFondB</code> || couleur de fond de la boîte || <code>#FFFFFF</code>  
 
| <code>couleurFondB</code> || couleur de fond de la boîte || <code>#FFFFFF</code>  
 
|----
 
|----
 
| <code>couleurFond</code> || couleur de fond du contenu || <code>white</code>  
 
| <code>couleurFond</code> || couleur de fond du contenu || <code>white</code>  
 +
|----
 +
| <code>label</code> || "title" pour accessibilité || <code><nowiki>[Liste déroulante]</nowiki></code> || Totalement libre. texte affiché sur le survol de la boîte.
 
|----
 
|----
 
! colspan="4" | <big>Texte</big>
 
! colspan="4" | <big>Texte</big>
Ligne 155 : Ligne 163 :
 
| <code>alignT</code> || alignement du titre || <code>center</code>  
 
| <code>alignT</code> || alignement du titre || <code>center</code>  
 
|----
 
|----
−
| <code>taille</code> || taille de police du contenu || <code>1em</code> || libre, de préférence exprimé en ''em'' : 1em, 0.9em, etc.
+
| <code>taille</code> || taille de police du contenu || <code>100%</code> || libre, de préférence exprimé en ''em'' ou % : 1em, 0.9em, 150% etc.
−
|----
 
−
| <code>label</code> ||  texte du lien de droite || <code><nowiki>[Dérouler] /  [Enrouler]</nowiki></code> || Totalement libre. Le caractère  "/" permet de séparer les deux libellés. Exemple : <code>[  afficher ] / [ masquer ]</code>.
 
 
|----
 
|----
−
|  <code>couleurFondT</code> || couleur de fond du titre ||  <code>#CCCCFF</code> || rowspan="2" | Expression de couleur valide<br />{{Boîte   déroulante|titre=Table des   couleurs|arrondi=0.6em|align=center|largeur=98%|couleurFondB=#eee|couleurFondT=#fff|couleurFond=#fff|  contenu={{Principales couleurs}}}}
+
|  <code>couleurFondT</code> || couleur de fond du titre ||  <code>#CCCCFF</code> || rowspan="2" | Expression de couleur valide<br />{{Boîte déroulante/début|titre=Table des   couleurs|arrondi=0.6em|align=center|largeur=98%}} {{Principales couleurs}} {{Boîte déroulante/fin}}
 
|----  
 
|----  
 
| <code>couleurTexteT</code> || couleur du texte de titre || <code>black</code>  
 
| <code>couleurTexteT</code> || couleur du texte de titre || <code>black</code>  
Ligne 165 : Ligne 171 :
 
| <code>thinning</code> || titre pas en gras || <code>no</code> || yes/no  
 
| <code>thinning</code> || titre pas en gras || <code>no</code> || yes/no  
 
|}
 
|}
 +
{{boîte déroulante/fin}}
  
 +
{{boîte déroulante/début
 +
|couleurFondT=#66CC80
 +
|largeur=1100px
 +
|alignB=center
 +
|titre=Paramètres par sections
 +
}}
 +
{| class="wikitable-center" style="width:100%"
 +
|----
 +
! &nbsp;paramètre&nbsp; || &nbsp;effet&nbsp; ||  &nbsp;valeur par défaut&nbsp; || &nbsp;valeurs  possibles&nbsp;
 +
|----
 +
! colspan="4" | <big>Boîte</big>
 +
|----
 +
| <code>arrondi</code>    (activé) || arrondi des angles || <code>0.6em</code> || Valeur conseillée :  <code>0.6em</code>,  s’exprime en '''pt''', '''px''' ou  '''em'''
 +
|----
 +
| <code>alignB</code> ||  alignement de la boîte || <code>left</code> ||  <code>left</code>, <code>right</code>,  <code>center</code>
 +
|----
 +
|  <code>hauteur</code> || hauteur de la boîte repliée ||    <code>1.6em</code> || La hauteur doit être exprimée avec une  unité valable.<br />Ne pas mettre une hauteur inférieure à 1.6em  sous peine d’effets indésirables
 +
|----
 +
|  <code>margeHaut</code> || marge haut (avant la boîte) ||  <code>0em</code> || La hauteur doit être exprimée avec une  unité valable.<br />Il est possible de mettre 0.
 +
|----
 +
| <code>margeBas</code> || marge bas (après la boîte) || <code>0em</code> || La hauteur doit être exprimée avec une unité valable.<br />Il est possible de mettre 0
 +
|----
 +
| <code>largeur</code> || largeur de la boîte || <code>99%</code> || La largeur doit être exprimée avec une unité valable.
 +
|----
 +
|  <code>couleurBordure</code> || couleur de la bordure ||  <code>#AAAAAA</code> || Expression de couleur  valide
 +
|----
 +
| <code>couleurFondB</code><br /> || couleur de fond de la boîte<br /> || <code>#FFFFFF</code> || Expression de couleur valide
 +
|----
 +
| <code>label</code> || "title" pour accessibilité ||  <code><nowiki>[Liste déroulante]</nowiki></code> ||  Totalement libre. texte affiché sur le survol de la boîte.
 +
|----
 +
! colspan="4" | <big>Titre de la boîte</big>
 +
|----
 +
| <code>image</code> || image à  gauche || [[Image:Wiki.png|20px]] || L’image facultative apparaît à  l’ouverture de la boîte.<br />Elle doit être totalement  renseignée.<br />Exemple :    <code><nowiki>[[Fichier:Wiki.png|20px]]</nowiki></code>
 +
|-
 +
| <code>style</code> || style complémentaire ||  || Style complémentaire pour l'image, terminé par un « ; ».
 +
|----
 +
| <code>titre</code> || Titre affiché de la boîte || || Totalement libre, mais le caractère « <nowiki>|</nowiki> » par exemple ne passe pas.
 +
|----
 +
|  <code>alignT</code> || alignement du titre ||  <code>center</code> ||<code>left</code>,  <code>right</code>,  <code>center</code>
 +
|----
 +
|  <code>couleurFondT</code> || couleur de fond du titre ||  <code>#CCCCFF</code> || Expression de couleur valide
 +
|----
 +
| <code>couleurTexteT</code> || couleur du texte de titre || <code>black</code> || Expression de couleur valide
 +
|----
 +
| <code>thinning</code> || titre pas en gras || <code>no</code> || yes/no
 +
|----
 +
! colspan="4" | <big>Contenu</big>
 +
|----
 +
| <code>couleurFond</code> || couleur de fond  du contenu || <code>white</code> || Expression de couleur  valide
 +
|----
 +
| <code>marge</code> || marges L, H, D, B || 0 ||  marges autour du contenu
 +
|----
 +
| <code>align</code> || alignement du contenu || <code>left</code> || <code>left</code>, <code>right</code>, <code>center</code> ou <code>justify</code>
 +
|----
 +
|  <code>taille</code> || taille de police du contenu ||  <code>100%</code> || libre, de préférence exprimé en ''em'' ou en % :  1em, 0.9em, 150% etc.
 +
|}
 +
{{boîte déroulante/fin}}
 +
 +
===Exemples de boîtes ===
 
{| width="100%"
 
{| width="100%"
−
| width="48%" | {{boîte déroulante|image=[[Fichier:Gtk-dialog-info.svg|15px]]|align=left|align=left|titre=par défaut (align=left, alignT=center)|contenu=
+
| width="48%" | {{boîte déroulante/début|image=[[Fichier:Raymond SÉNÈQUE.jpg|20px]]|align=left|titre=par défaut (align=left, alignT=center)}}
 
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
 
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
−
Ut   enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit  in voluptate velit esse cillum dolore eu fugiat nulla  pariatur.}}
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  aliquip ex ea commodo consequat. Duis aute irure dolor in   
 +
reprehenderit  in voluptate velit esse cillum dolore eu fugiat nulla   
 +
pariatur.
 +
{{Boîte déroulante/fin}}
 
| width="4%" | &nbsp;
 
| width="4%" | &nbsp;
−
| width="48%" | {{boîte déroulante|align=right|titre=Contenu à droite (align=right)|contenu=
+
| width="48%" | {{boîte déroulante/début|image=[[Fichier:Raymond SÉNÈQUE.jpg|20px]]|align=right|titre=Contenu à droite (align=right)}}Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
−
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi  
−
Ut   enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit  in voluptate velit esse cillum dolore eu fugiat nulla  pariatur.}}
+
ut  aliquip ex ea commodo consequat. Duis aute irure dolor in   
 +
reprehenderit  in voluptate velit esse cillum dolore eu fugiat nulla   
 +
pariatur.
 +
{{Boîte déroulante/fin}}
 
|----
 
|----
−
| width="48%" | {{boîte déroulante|align=center|alignT=left|titre=Contenu centré, titre à gauche  (align=center, alignT=left)|contenu=
+
| width="48%" | {{boîte déroulante/début|align=center|alignT=left|titre=Contenu centré, titre à gauche  (align=center, alignT=left)
 +
}}
 
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
 
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
−
Ut   enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit  in voluptate velit esse cillum dolore eu fugiat nulla  pariatur.}}
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi  
 +
ut  aliquip ex ea commodo consequat. Duis aute irure dolor in   
 +
reprehenderit  in voluptate velit esse cillum dolore eu fugiat nulla   
 +
pariatur.
 +
{{Boîte déroulante/fin}}
 
| width="4%" | &nbsp;
 
| width="4%" | &nbsp;
−
| width="48%" | {{boîte déroulante|align=justify|alignT=right|titre=Contenu justifié,  titre à droite (align=justify, alignT=right)|contenu=
+
| width="48%" | {{boîte déroulante/début|align=justify|alignT=right|titre=Contenu justifié,  titre à droite (align=justify, alignT=right)
 +
}}
 
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
 
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
−
Ut   enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  aliquip ex ea commodo consequat. Duis aute irure dolor in  reprehenderit  in voluptate velit esse cillum dolore eu fugiat nulla  pariatur.}}
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi  
−
|----
+
ut  aliquip ex ea commodo consequat. Duis aute irure dolor in   
−
| width="48%" | &nbsp;
+
reprehenderit  in voluptate velit esse cillum dolore eu fugiat nulla   
−
| width="4%" | &nbsp;
+
pariatur.
−
| width="48%" | {{Boîte déroulante|titre=Boîte déroulante avec angles ronds (arrondi=0.6em)|arrondi=0.6em|contenu =Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
{{Boîte déroulante/fin}}
−
Ut enim ad minim veniam, quis  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  consequat. Duis aute irure dolor in reprehenderit in voluptate velit  esse cillum dolore eu fugiat nulla pariatur.}}
 
 
|----
 
|----
 
|}
 
|}
 +
 +
== Fonction complète ==
 +
 +
<pre>
 +
{{boîte déroulante/début
 +
<!-- Boîte -->
 +
|arrondi=0.6em
 +
|alignB=left
 +
|hauteur=1.6em
 +
|margeHaut=0em
 +
|margeBas=0em
 +
|largeur=100%
 +
|couleurBordure=#AAAAAA
 +
|couleurFondB=#FFFFFF
 +
<!-- Titre -->
 +
|image=
 +
|style=
 +
|titre=Titre de la boîte
 +
|alignT=center
 +
|label=
 +
|couleurFondT=#CCCCFF
 +
|couleurTexteT=black
 +
|thinning=no
 +
<!-- Contenu-->
 +
|marge=0px
 +
|couleurFond=white
 +
|align=left
 +
|taille=100%
 +
}}
 +
 +
<-- ici le contenu -->
 +
 +
{{Boîte déroulante/fin}}
 +
</pre>
 +
{{boîte déroulante/début
 +
<!-- Boîte -->
 +
|arrondi=0.6em
 +
|alignB=left
 +
|hauteur=1.6em
 +
|margeHaut=0em
 +
|margeBas=0em
 +
|largeur=100%
 +
|couleurBordure=#AAAAAA
 +
|couleurFondB=#FFFFFF
 +
<!-- Titre -->
 +
|image=
 +
|style=
 +
|titre=Titre de la boîte
 +
|alignT=center
 +
|label=
 +
|couleurFondT=#CCCCFF
 +
|couleurTexteT=black
 +
|thinning=no
 +
<!-- Contenu-->
 +
|marge=0px
 +
|couleurFond=white
 +
|align=left
 +
|taille=100%
 +
}}
 +
 +
<-- ici le contenu -->
 +
 +
{{Boîte déroulante/fin}}
 +
  
  
 
{{Palette aide}}
 
{{Palette aide}}
 
[[Catégorie:Aide|{{PAGENAME}}]]
 
[[Catégorie:Aide|{{PAGENAME}}]]

Version actuelle en date du 28 mars 2011 à 14:16

Un modèle déroulant est un modèle qui a un bouton enrouler/dérouler pour cacher/afficher son contenu : Catégorie:Modèle déroulant.

Une boîte déroulante fait référence aux modèles {{Boîte déroulante}}, {{Boîte déroulante/début}} et {{Boîte déroulante/fin}}.

Une palette de navigation est un modèle dont le nom commence par « Palette ... » et utilisant un mécanisme de boîte déroulante ({{Méta palette de navigation}}).

Exemple de base avec {{Boîte déroulante/début}} : 

{{Boîte déroulante/début|titre=Titre de la boîte}}
Contenu de la boîte
{{Boîte déroulante/fin}}
Wiki.png
Titre de la boîte

Contenu de la boîte

 

Avantages, limites et inconvénients

Il faut distinguer les problèmes d'utilité, d'ergonomie, d'accessibilité, d'interopérabilité et d'esthétique.

Avantages

  • Réduit la place occupée par des paragraphes, des longues listes et/ou des images d'importance secondaire.
  • Ajoute des menus de navigation ciblés, sans encombrer les pages d'articles.
  • Masque certains passages pour des raisons diverses.

Limites techniques

  • l'enroulement nécessite un navigateur Web compatible avec les Feuilles de style et JavaScript. Sans support de javascript, le contenu est affiché déroulé.
  • ces modèles sont actuellement paramétrés pour occuper toute la largeur de la page : ils ne peuvent se placer à côté de contenus flottants comme les images, les infobox et les boîtes utilisateurs.

Inconvénients

  • Dans tous les cas, le contenu de ces modèles est visible pendant le chargement de la page.
  • Même si elle propose un contenu caché, elle nécessite d'être téléchargée, ce qui peut pénaliser les personnes utilisant un internet bas débit si son contenu est particulièrement lourd, c'est-à-dire principalement s'il s'agit d'images multiples.
  • Casse les liens ancrés et les liens sur référence qui sont placés dedans, si la boîte n'est pas ouverte.
  • Gène la fonction « recherche » des navigateurs web.
  • Accessibilité correcte mais améliorable notamment pour les utilisateurs de lecteurs d'écrans.
  • Occasionne parfois des surprises à l'impression.
  • Pour les boîtes de défilement à ascenseur, la navigation est impossible au clavier si la boîte ne contient pas de liens

Usage

Boîte adaptée

  • Dans les articles :
    • En tenant compte des contraintes techniques, les modèles déroulants sont en général à bannir du corps des articles;
    • Des exceptions sont tolérées pour les sommaires personnels;
    • Ils sont admis en bas des articles, sous la forme de palettes de navigation.
  • Hors des articles:
    • Leur usage est pratique dans les explications et les discussions, surtout pour les listes longues;
    • Les boîtes déroulantes sont également utiles dans les pages personnelles des utilisateurs.

Boîte déroulante dans les articles

De manière générale, ne pas utiliser les boîtes déroulantes dans le coeur des articles car les boîtes déroulantes s'alignent mal avec les contenus « flottants » ajoutés aux pages, comme les infobox, les images et les boîtes utilisateurs.

Un modèle déroulant, selon les écrans utilisés, risque de cacher une partie de l'article ou de nuire à sa mise en page générale. C'est pour cette raison que sont tolérées en principe seulement les palettes de navigation, placées tout en bas de page.

Donc, en cas d'utilisation dans un article, placer une fonction {{Clear}} avant la boîte déroulante.

Présentation et paramètrage

Pour des raisons de commodité, standardisation, possibilités et efficacité, WikiGenWeb déconseille le modèle {{Boîte déroulante}} et impose l'utilisation des modèles : {{Boîte déroulante/début}} et {{Boîte déroulante/fin}}

Tableaux

{{Boîte déroulante/début
|titre=La boite déroulante
}}
{| class="wikitable"
|-
|Case 1
|Case 2
|-
|Case 3
|Case 4
|}
{{Boîte déroulante/fin}}
Wiki.png
La boite déroulante
Case 1 Case 2
Case 3 Case 4
 

Boîte déroulante dans une boîte déroulante

Formellement interdit.

Boîte déroulante dans une infobox

Formellement interdit.

Syntaxe

Boîte déroulante par défaut

Wikitext Rendu 
{{boîte déroulante/début
|titre=Titre de la boîte
}}
Contenu de la boîte
{{boîte déroulante/fin}}
Wiki.png
Titre de la boîte

Contenu de la boîte

 

Paramètres

Wiki.png
Paramètres par catégories
Paramètres obligatoires
 paramètre   effet   valeurs possibles 
titre Titre affiché de la boîte Totalement libre, mais le caractère « | » par exemple ne passe pas.
contenu Texte contenu dans la boîte Totalement libre
Paramètres facultatifs
 paramètre   effet   valeur par défaut   valeurs possibles 
arrondi (activé) arrondi des angles 0.6em Les angles peuvent apparaître arrondis si le navigateur le permet.
Visible sur les navigateurs Mozilla, non visible sur Internet Explorer.
Valeur conseillée : 0.6em, s’exprime en pt, px ou em
image image à gauche Wiki.png L’image facultative apparaît à l’ouverture de la boîte.
Elle doit être totalement renseignée.
Exemple : [[Fichier:Wiki.png|20px]]
style style complémentaire Style complémentaire pour l'image, terminé par un « ; ».
alignB alignement de la boîte left left, right, center ou justify
hauteur hauteur de la boîte repliée 1.6em La hauteur doit être exprimée avec une unité valable.
Ne pas mettre une hauteur inférieure à 1.6em sous peine d’effets indésirables
margeHaut marge haut (avant la boîte) 0em La hauteur doit être exprimée avec une unité valable.
Il est possible de mettre 0
margeBas marge bas (après la boîte) 0em La hauteur doit être exprimée avec une unité valable.
Il est possible de mettre 0
marge marges L, H, D, B 0 marges autour du contenu
largeur largeur de la boîte 99% La largeur doit être exprimée avec une unité valable.
couleurBordure couleur de la bordure #AAAAAA Expression de couleur valide
Wiki.png
Table des couleurs
Principales couleurs
Couleurs classiques Couleurs claires
#E5E5E5 #ECECEC #DFDFDF #B2B2B2 #868686
#FFE5E5 #FFB2B2 #FF8080 #CC6666 #994C4C
#FFEFE5 #FFCFB2 #FFAE80 #CC8B66 #99694C
#FFF9E5 #FFECB2 #FFDF80 #CCB266 #99864C
#FCFFE5 #F6FFB2 #F0FF80 #C0CC66 #90994C
#F2FFE5 #D9FFB2 #BFFF80 #99CC66 #73994C
#E9FFE5 #BDFFB2 #90FF80 #74CC66 #57994C
#E5FFEC #B2FFC6 #80FF9F #66CC80 #4C9960
#E5FFF5 #B2FFE2 #80FFCE #66CCA5 #4C997C
#E5FFFF #B2FFFF #80FFFF #66CCCC #4C9999
#E5F6FF #B2E3FF #80D0FF #66A7CC #4C7D99
#E5ECFF #B2C6FF #809FFF #6680CC #4C6099
#E8E5FF #BBB2FF #8E80FF #7266CC #554C99
#F2E5FF #D9B2FF #BF80FF #9966CC #734C99
#FCE5FF #F5B2FF #EE80FF #BE66CC #8F4C99
#FFE5F9 #FFB2EC #FF80DF #CC66B2 #994C86
#FFE5EF #FFB2D0 #FF80B0 #CC668D #994C6A
15% 20% 25%
#FFD9D9 #FFCCCC #FFBFBF
#FFD9FF #FFCCFF #FFBFFF
#EDD9FF #E6CCFF #DFBFFF
#E3D9FF #D9CCFF #CEBDFF
#D9D9FF #CCCCFF #BFBFFF
#D9EDFF #CCE6FF #BFDFFF
#D9FFF6 #CCFFF2 #BFFFEF
#D9FFD9 #CCFFCC #BFFFBF
#EDFFD9 #E6FFCC #DFFFBF
#F6FFD9 #F2FFCC #EFFFBF
#F0F0CC #F0F0C0 #F0F0B4
#FFFFD9 #FFFFCC #FFFFB1
#FFE7D9 #FFDFCC #FFD6BF
#FFEBD9 #FFE4CC #FFDDBF
Sources et crédits Cet article est largement inspiré et adapté de la page WikiPédia [http://fr.wikipedia.org/w/index.php?title=Aide:Couleurs&oldid=62332183 Aide:Couleurs], publiée sous licence [http://creativecommons.org/licenses/by-sa/3.0/deed.fr CreativeCommons CC BY-SA 3.0].
 
couleurFondB couleur de fond de la boîte #FFFFFF
couleurFond couleur de fond du contenu white
label "title" pour accessibilité [Liste déroulante] Totalement libre. texte affiché sur le survol de la boîte.
Texte
align alignement du contenu left left, right, center ou justify
alignT alignement du titre center
taille taille de police du contenu 100% libre, de préférence exprimé en em ou % : 1em, 0.9em, 150% etc.
couleurFondT couleur de fond du titre #CCCCFF Expression de couleur valide
Wiki.png
Table des couleurs
Principales couleurs
Couleurs classiques Couleurs claires
#E5E5E5 #ECECEC #DFDFDF #B2B2B2 #868686
#FFE5E5 #FFB2B2 #FF8080 #CC6666 #994C4C
#FFEFE5 #FFCFB2 #FFAE80 #CC8B66 #99694C
#FFF9E5 #FFECB2 #FFDF80 #CCB266 #99864C
#FCFFE5 #F6FFB2 #F0FF80 #C0CC66 #90994C
#F2FFE5 #D9FFB2 #BFFF80 #99CC66 #73994C
#E9FFE5 #BDFFB2 #90FF80 #74CC66 #57994C
#E5FFEC #B2FFC6 #80FF9F #66CC80 #4C9960
#E5FFF5 #B2FFE2 #80FFCE #66CCA5 #4C997C
#E5FFFF #B2FFFF #80FFFF #66CCCC #4C9999
#E5F6FF #B2E3FF #80D0FF #66A7CC #4C7D99
#E5ECFF #B2C6FF #809FFF #6680CC #4C6099
#E8E5FF #BBB2FF #8E80FF #7266CC #554C99
#F2E5FF #D9B2FF #BF80FF #9966CC #734C99
#FCE5FF #F5B2FF #EE80FF #BE66CC #8F4C99
#FFE5F9 #FFB2EC #FF80DF #CC66B2 #994C86
#FFE5EF #FFB2D0 #FF80B0 #CC668D #994C6A
15% 20% 25%
#FFD9D9 #FFCCCC #FFBFBF
#FFD9FF #FFCCFF #FFBFFF
#EDD9FF #E6CCFF #DFBFFF
#E3D9FF #D9CCFF #CEBDFF
#D9D9FF #CCCCFF #BFBFFF
#D9EDFF #CCE6FF #BFDFFF
#D9FFF6 #CCFFF2 #BFFFEF
#D9FFD9 #CCFFCC #BFFFBF
#EDFFD9 #E6FFCC #DFFFBF
#F6FFD9 #F2FFCC #EFFFBF
#F0F0CC #F0F0C0 #F0F0B4
#FFFFD9 #FFFFCC #FFFFB1
#FFE7D9 #FFDFCC #FFD6BF
#FFEBD9 #FFE4CC #FFDDBF
Sources et crédits Cet article est largement inspiré et adapté de la page WikiPédia [http://fr.wikipedia.org/w/index.php?title=Aide:Couleurs&oldid=62332183 Aide:Couleurs], publiée sous licence [http://creativecommons.org/licenses/by-sa/3.0/deed.fr CreativeCommons CC BY-SA 3.0].
 
couleurTexteT couleur du texte de titre black
thinning titre pas en gras no yes/no
 
Wiki.png
Paramètres par sections
 paramètre   effet   valeur par défaut   valeurs possibles 
Boîte
arrondi (activé) arrondi des angles 0.6em Valeur conseillée : 0.6em, s’exprime en pt, px ou em
alignB alignement de la boîte left left, right, center
hauteur hauteur de la boîte repliée 1.6em La hauteur doit être exprimée avec une unité valable.
Ne pas mettre une hauteur inférieure à 1.6em sous peine d’effets indésirables
margeHaut marge haut (avant la boîte) 0em La hauteur doit être exprimée avec une unité valable.
Il est possible de mettre 0.
margeBas marge bas (après la boîte) 0em La hauteur doit être exprimée avec une unité valable.
Il est possible de mettre 0
largeur largeur de la boîte 99% La largeur doit être exprimée avec une unité valable.
couleurBordure couleur de la bordure #AAAAAA Expression de couleur valide
couleurFondB
 couleur de fond de la boîte
 #FFFFFF Expression de couleur valide
label "title" pour accessibilité [Liste déroulante] Totalement libre. texte affiché sur le survol de la boîte.
Titre de la boîte
image image à gauche Wiki.png L’image facultative apparaît à l’ouverture de la boîte.
Elle doit être totalement renseignée.
Exemple : [[Fichier:Wiki.png|20px]]
style style complémentaire Style complémentaire pour l'image, terminé par un « ; ».
titre Titre affiché de la boîte Totalement libre, mais le caractère « | » par exemple ne passe pas.
alignT alignement du titre center left, right, center
couleurFondT couleur de fond du titre #CCCCFF Expression de couleur valide
couleurTexteT couleur du texte de titre black Expression de couleur valide
thinning titre pas en gras no yes/no
Contenu
couleurFond couleur de fond du contenu white Expression de couleur valide
marge marges L, H, D, B 0 marges autour du contenu
align alignement du contenu left left, right, center ou justify
taille taille de police du contenu 100% libre, de préférence exprimé en em ou en % : 1em, 0.9em, 150% etc.
 

Exemples de boîtes

Raymond SÉNÈQUE.jpg
par défaut (align=left, alignT=center)

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 
  
Raymond SÉNÈQUE.jpg
Contenu à droite (align=right)
Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 
Wiki.png
Contenu centré, titre à gauche (align=center, alignT=left)

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 
  
Wiki.png
Contenu justifié, titre à droite (align=justify, alignT=right)

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

Fonction complète

{{boîte déroulante/début
<!-- Boîte -->
|arrondi=0.6em
|alignB=left
|hauteur=1.6em
|margeHaut=0em
|margeBas=0em
|largeur=100%
|couleurBordure=#AAAAAA
|couleurFondB=#FFFFFF
<!-- Titre -->
|image=
|style=
|titre=Titre de la boîte
|alignT=center
|label=
|couleurFondT=#CCCCFF
|couleurTexteT=black
|thinning=no
<!-- Contenu-->
|marge=0px
|couleurFond=white
|align=left
|taille=100%
}}

<-- ici le contenu -->

{{Boîte déroulante/fin}}
Wiki.png
Titre de la boîte

<-- ici le contenu -->

 




Wiki.png
Liste des manuels d'utilisation
Projet:Aide
Lecteurs Manuel du lecteur Wiki.png
Éditeurs Manuel de l'éditeur
Administrateurs Manuel de l'administrateur
 
Récupérée de « https://www.francegenweb.net:80/wiki/index.php?title=Aide:Boîte_déroulante&oldid=13460 »