diff options
Diffstat (limited to 'files/fr/web/css/list-style-position/index.md')
| -rw-r--r-- | files/fr/web/css/list-style-position/index.md | 94 |
1 files changed, 46 insertions, 48 deletions
diff --git a/files/fr/web/css/list-style-position/index.md b/files/fr/web/css/list-style-position/index.md index 213038f27a..4ae92f6774 100644 --- a/files/fr/web/css/list-style-position/index.md +++ b/files/fr/web/css/list-style-position/index.md @@ -1,35 +1,32 @@ --- title: list-style-position slug: Web/CSS/list-style-position -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/list-style-position +browser-compat: css.properties.list-style-position --- {{CSSRef}} -La propriété **`list-style-position`** permet de définir la position du marqueur (cf. {{cssxref("::marker")}} de liste par rapport à la boîte principale. +La propriété **`list-style-position`** permet de définir la position du marqueur (cf. [`::marker`](/fr/docs/Web/CSS/::marker)) de liste par rapport à la boîte principale. {{EmbedInteractiveExample("pages/css/list-style-position.html")}} -Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}. +Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie [`list-style`](/fr/docs/Web/CSS/list-style). -> **Note :** -> -> - Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `). [Par défaut](https://www.w3.org/TR/html5/rendering.html#lists), cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}). -> - Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec `list-style-position: inside`. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations. +> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels [`display`](/fr/docs/Web/CSS/display) vaut `list-item`). [Par défaut](https://www.w3.org/TR/html5/rendering.html#lists), cela inclut les éléments [`<li>`](/fr/docs/Web/HTML/Element/li). Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à [`<ol>`](/fr/docs/Web/HTML/Element/ol) ou à [`<ul>`](/fr/docs/Web/HTML/Element/ul)). + +Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec `list-style-position: inside`. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir [le bug 36854 de Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=36854) pour plus d'informations. ## Syntaxe ```css -/* Valeurs avec mot-clé */ +/* Valeurs avec un mot-clé */ list-style-position: inside; list-style-position: outside; /* Valeurs globales */ list-style-position: inherit; list-style-position: initial; +list-style-position: revert; list-style-position: unset; ``` @@ -38,50 +35,38 @@ La propriété `list-style-position` est définie avec l'un des mots-clés suiva ### Valeurs - `inside` - - : La boîte du marqueur ({{cssxref("::marker")}}) est la première boîte en ligne (_inline_) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur. + - : La boîte du marqueur ([`::marker`](/fr/docs/Web/CSS/::marker)) est la première boîte en ligne (_inline_) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur. - `outside` - - : La boîte du marqueur ({{cssxref("::marker")}}) est en dehors de la boîte principale. - -### Syntaxe formelle + - : La boîte du marqueur ([`::marker`](/fr/docs/Web/CSS/::marker)) est en dehors de la boîte principale. -{{csssyntax}} +## Définition formelle -## Exemples +{{CSSInfo}} -### CSS +## Syntaxe formelle -```css -.one { - list-style:square inside; -} +{{csssyntax}} -.two { - list-style-position: outside; - list-style-type: circle; -} +## Exemples -.three { - list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); - list-style-position: inherit; -} -``` +### Définition de la position des éléments d'une liste -### HTML +#### HTML ```html -<ul class="one"> Liste 1 +<ul class="un">Liste 1 <li>Élément 1-1</li> <li>Élément 1-2</li> <li>Élément 1-3</li> <li>Élément 1-4</li> </ul> -<ul class="two"> Liste 2 +<ul class="deux">Liste 2 <li>Élément 2-1</li> <li>Élément 2-2</li> <li>Élément 2-3</li> <li>Élément 2-4</li> </ul> -<ul class="three"> Liste 3 +<ul class="trois">Liste 3 <li>Élément 3-1</li> <li>Élément 3-2</li> <li>Élément 3-3</li> @@ -89,26 +74,39 @@ La propriété `list-style-position` est définie avec l'un des mots-clés suiva </ul> ``` -### Résultat +#### CSS -{{EmbedLiveSample("Exemples","200","420")}} +```css +.un { + list-style-position: inside; + list-style-type: square; +} -## Spécifications +.deux { + list-style-position: outside; + list-style-type: circle; +} -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}} | {{Spec2('CSS3 Lists')}} | Aucun changement. | -| {{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}} | {{Spec2('CSS2.1')}} | Définition initiale. | +.trois { + list-style-position: inside; + list-style-image: url("starsolid.gif"); +} +``` + +#### Résultat + +{{EmbedLiveSample('', 200, 420)}} + +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.list-style-position")}} +{{Compat}} ## Voir aussi -- {{cssxref("list-style")}} -- {{cssxref("list-style-type")}} -- {{cssxref("list-style-image")}} -- {{cssxref("::marker")}} +- [`list-style`](/fr/docs/Web/CSS/list-style) +- [`list-style-type`](/fr/docs/Web/CSS/list-style-type) +- [`list-style-image`](/fr/docs/Web/CSS/list-style-image) |