From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- files/fr/web/css/css_positioning/index.html | 2 -- .../understanding_z_index/adding_z-index/index.html | 8 ++++---- .../css/css_positioning/understanding_z_index/index.html | 2 +- .../understanding_z_index/stacking_and_float/index.html | 16 +++++++++------- .../stacking_context_example_1/index.html | 11 +++++++---- .../stacking_context_example_2/index.html | 9 ++++----- .../stacking_context_example_3/index.html | 10 +++++----- .../stacking_without_z-index/index.html | 10 +++------- .../the_stacking_context/index.html | 11 +++++++---- 9 files changed, 40 insertions(+), 39 deletions(-) (limited to 'files/fr/web/css/css_positioning') diff --git a/files/fr/web/css/css_positioning/index.html b/files/fr/web/css/css_positioning/index.html index 518a4abaeb..7271af1172 100644 --- a/files/fr/web/css/css_positioning/index.html +++ b/files/fr/web/css/css_positioning/index.html @@ -16,7 +16,6 @@ translation_of: Web/CSS/CSS_Positioning

Propriétés

-
  • {{cssxref("bottom")}}
  • {{cssxref("clear")}}
    • @@ -27,7 +26,6 @@ translation_of: Web/CSS/CSS_Positioning
  • {{cssxref("top")}}
  • {{cssxref("z-index")}}
-

Guides

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index e0076181f3..bfbc64fb1c 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index

Ajouter z-index

-

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.

+

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

@@ -36,12 +36,12 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
-

Notes :

+

Note :

  • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
    • -
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
    • -
+
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
    • +

    Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le z-index du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.

    diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html index 1f41be9467..92a9a86a4e 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html @@ -16,7 +16,7 @@ original_slug: Web/CSS/Comprendre_z-index

    Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

    -

    Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

    +

    Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

    Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.

    diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html index ef04a825c1..2b0dc727af 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -37,7 +37,9 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float
  • Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
    • -
    Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
    +
    +

    Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).

    +

    {{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}

    @@ -123,12 +125,12 @@ b {

    Voir aussi

    {{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
    diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html index ed1138131b..dadbe3ec99 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -16,15 +16,15 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1

    Le seul et unique contexte d'empilement est le contexte racine. Sans z-index, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.

    -

    Figure 5a : Exemple de contexte d'empilement 1

    +

    Figure 5a : Exemple de contexte d'empilement 1

    Si on assigne au bloc DIV #2 une valeur de z-index positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.

    -

    Figure 5b : Exemple de contexte d'empilement 1

    +

    Figure 5b : Exemple de contexte d'empilement 1

    Si maintenant on assigne également au bloc DIV #4 une valeur de z-index positive, plus grande que celle du DIV #2, le bloc DIV #4 est rendu par dessus tous les autres, y compris par dessus le bloc DIV #2.

    -

    Figure 5c : Exemple de contexte d'empilement 1

    +

    Figure 5c : Exemple de contexte d'empilement 1

    Dans le dernier exemple, vous pouvez voir que les blocs DIV #2 et DIV #4 ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc DIV #4, tout en respectant le bloc DIV #2, peut être contrôlé avec la propriété z-index. Il se fait que les éléments DIV #1 et DIV #3 n'ayant pas de z-index défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs DIV #2 et DIV #3, appartient au contexte d'empilement de la racine.

    @@ -39,7 +39,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_1 -
    Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
    +
    +

    Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement. +

    +

    Exemple

    diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html index 161afae998..e4dcfaa383 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -14,7 +14,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2

    Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.

    -

    Figure 6 : Exemple de contexte d'empilement 2

    +

    {{ EmbedLiveSample('Exemple', '352', '270') }}

    Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.

    @@ -35,7 +35,9 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_2 -
    Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
    +
    +

    Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.

    +

    Exemple

    @@ -122,8 +124,5 @@ span.bold { </div> -

    Résultat

    - -

    {{EmbedLiveSample("Exemple")}}

    {{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
    diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html index ae2dfa1046..0668f2416a 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -18,7 +18,7 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3

    Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.

    -

    Figure 7 : Exemple de contexte d'empilement 3

    +

    {{ EmbedLiveSample('Exemple', '320', '330') }}

    Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.

    @@ -54,7 +54,10 @@ original_slug: Web/CSS/Comprendre_z-index/Exemple_3

    On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de z-index individuelles (et différentes) assignées à l'aide de sélecteurs d'id plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.

    -
    Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
    +
    +

    Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois. +

    +

    Exemple

    @@ -154,8 +157,5 @@ div.lev3 { </div> -

    Résultat

    - -

    {{EmbedLiveSample("Exemple")}}

    {{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
    diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index 89eddc49b5..f5c69a0055 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -26,16 +26,16 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index

    Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.

    -

    Notes :

    - +

    Note :

    • Dans un groupe d'éléments sans aucune propriété z-index, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
    • Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
    • Attention : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.
    +

    -

    Figure 1. Exemple de règles d'empilement sans propriété z-index

    +

    {{EmbedLiveSample("Exemple", 600, 400)}}

    Exemple

    @@ -116,8 +116,4 @@ div { } -

    Résultat

    - -

    {{EmbedLiveSample("Exemple","600","400")}}

    -
    {{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
    diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index da1de35a86..a377b3b7ff 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches

    Le contexte d'empilement

    -

    Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.

    +

    Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.

    Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.

    @@ -52,11 +52,13 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
  • Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.
    • -
    Notes : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
    +
    +

    Note : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.

    +

    Illustration

    -

    Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

    +

    Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

    Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur z-index. La hiérarchie des contextes d'empilement est organisée comme suit :

    @@ -79,13 +81,14 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_de_couches

    Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfants du bloc DIV #3, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément DIV #3 est prise en compte pour l'empilement dans l'élément racine par rapport à ses DIV voisins.

    -

    Notes :

    +

    Note :

    • DIV #4 est rendu dans le bloc DIV #1 car le z-index (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le z-index (6) du bloc DIV #4 est valide à l'intérieur du contexte d'empilement du bloc DIV #3. Ainsi, DIV #4 se trouve sous DIV #1, parce que DIV #4 appartient à DIV #3, qui possède une valeur de z-index plus petite.
    • Pour la même raison DIV #2 (dont le z-index est 2) est rendu sous DIV#5 (de z-index égal à 1) parce que DIV #5 appartient à DIV #3, qui possède une valeur de z-index plus grande.
    • Le z-index du bloc DIV #3 est 4, mais cette valeur est indépendante du z-index du bloc DIV #4, DIV #5 et DIV #6, parce qu'il appartient à un contexte d'empilement différent.
    +

    Exemple

    -- cgit v1.2.3-54-g00ecf