From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- files/fr/astuces_css/couleurs_et_fonds/index.html | 139 --------------- files/fr/astuces_css/index.html | 25 --- files/fr/astuces_css/liens/index.html | 32 ---- files/fr/astuces_css/tableaux/index.html | 201 ---------------------- 4 files changed, 397 deletions(-) delete mode 100644 files/fr/astuces_css/couleurs_et_fonds/index.html delete mode 100644 files/fr/astuces_css/index.html delete mode 100644 files/fr/astuces_css/liens/index.html delete mode 100644 files/fr/astuces_css/tableaux/index.html (limited to 'files/fr/astuces_css') diff --git a/files/fr/astuces_css/couleurs_et_fonds/index.html b/files/fr/astuces_css/couleurs_et_fonds/index.html deleted file mode 100644 index 3880593692..0000000000 --- a/files/fr/astuces_css/couleurs_et_fonds/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Couleurs et fonds -slug: Astuces_CSS/Couleurs_et_fonds -tags: - - CSS -translation_of: Web/CSS/color_value -translation_of_original: Useful_CSS_tips/Color_and_Background ---- -

-

-

Fond translucide

-

Même si opacity (translucidité) est une propriété de style définie dans la spécification CSS3, module CSS3 Color, chapitre 3.2, des navigateurs la gèrent déjà. D'après la spécification, l'opacité peut être considérée conceptuellement comme une opération de post-traitement, par conséquent le niveau de transparence choisi est appliqué à tout le contenu. -

Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir du texte opaque sur un fond translucide, car si vous définissez la propriété opacity pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux. -

Si vous essayez cet exemple de code, vous découvrirez que texteopaque n'est pas opaque, il a hérité de l'attribut opacity de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus. -

-
<div id="conteneur">
-    <div id="texteopaque">
-      Ceci est un texte normal
-      sur un fond translucide
-    </div>
-</div>
-
-
#conteneur {
-   background-color: #ffffff;  /* le fond                 */
-   filter:alpha(opacity=50);   /* Internet Explorer 6     */
-   -moz-opacity:0.5;           /* Mozilla 1.6 et infér.   */
-   opacity: 0.5;               /* CSS3 et Mozilla récents */
-}
-#texteopaque {
-   filter:alpha(opacity=100);  /* ignoré */
-   -moz-opacity:1.0;           /* ignoré */
-   opacity: 1.0;               /* ignoré */
-}
-
-

En réalité, deux manières d'obtenir cet effet existent et fonctionnent dans plusieurs navigateurs (prennent en compte le comportement exotique d'Internet Explorer) : -

- - -

Hiérarchie réarrangée

-

Comme suggéré précédemment, cette astuce est basée sur un autre arrangement de la hiérarchie des éléments DIV. Comme tous les descendants du DIV translucide héritent de l'opacité de leurs parents, le truc est d'utiliser deux DIV séparés pour le fond transparent et le texte opaque, placés au même niveau de la hiérarchie et non l'un dans l'autre. Les deux feront partie d'un DIV parent à positionner de manière absolue ou flottant. -

-
<div id="conteneur">
-
-   <div id="texteopaque">
-      Ceci est un texte normal
-      sur un fond translucide
-   </div>
-
-   <div id="fondtranslucide">
-
-   </div>
-
-</div>
-
-

Afin de placer la zone texteopaque par dessus fondtranslucide, il faut utiliser le positionnement absolu et l'attribut z-index pour le DIV contenant le texte. De plus, la hauteur et la largeur des deux DIV doivent être identiques, elles doivent donc être déclarées explicitement. -

-
#conteneur {
-   position: absolute;
-   top: 100px; left: 400px;         /* placez-le où vous voulez    */
-}
-
-#fondtranslucide {
-   width: 250px; height: 100px;     /* pour correspondre à la taille du DIV */
-   background-color: #ffffff;       /* la couleur de fond          */
-   filter:alpha(opacity=50);
-   -moz-opacity:0.5;
-   opacity: 0.5;
-}
-
-#texteopaque {
-   width: 250px; height: 100px;     /* pour correspondre à la taille du DIV */
-   background-color: transparent;   /* fond transparent            */
-   position: absolute;              /* positionnement absolu       */
-   z-index: 2;                      /* placement sur l'autre DIV   */
-}
-
-


-

-
Comment retirer la hauteur fixe prédéfinie
-

Il est parfois problématique d'avoir une hauteur prédéfinie, parce que la longueur du texte contenu (et des images) n'est pas connue. Il est toujours possible d'éviter de fixer la hauteur, avec quelques ajouts supplémentaires. Le plus simple est de laisser grandir le DIV texteopaque autant que nécessaire, puis d'utiliser JavaScript pour redimensionner fondtranslucide à la même hauteur. Mais ce n'est pas une solution en pur CSS. -

Si vous voulez n'utiliser que CSS, la solution est assez simple, vous n'avez qu'à répéter le contenu de texteopaque dans fondtranslucide également. Ce n'est pas élégant, mais très facile à implémenter, notamment dans les pages générées dynamiquement. -

-
<div id="conteneur">
-
-   <div id="texteopaque">
-      Ceci est un texte normal
-      sur un fond translucide
-   </div>
-
-   <div id="fondtranslucide">
-      Ceci est un texte normal
-      sur un fond translucide
-   </div>
-
-</div>
-
-

Image PNG avec canal alpha

-

Cette solution utilise toujours la hiérarchie parent-enfant, mais est en fait une technique hybride, car elle met en œuvre le fond translucide avec des moyens totalement différents selon le navigateur utilisé. -

- - -

Notes et inconvénients pour cette solution : -

- -
<div id="conteneur">
-  <div id="fondtranslucide">
-    <div id="texteopaque">
-      Ceci est un texte normal
-      sur un fond translucide
-    </div>
-  </div>
-</div>
-
-
#conteneur {
-   position: absolute;
-   width: 250px;
-   top: 400px;  left: 100px;
-   }
-
-#fondtranslucide {
-   width: 250px;
-   background-image: url(transparent.png) !important;  /* Mozilla uniquement */
-   background-color: transparent !important;           /* Mozilla uniquement */
-   background-image: none;                             /* IE uniquement */
-   background-color: #ffffff;                          /* IE uniquement */
-   filter:alpha(opacity=50);                           /* IE uniquement */
-   }
-
-#texteopaque { position: relative; }
-
-{{ languages( { "en": "en/Useful_CSS_tips/Color_and_Background" } ) }} diff --git a/files/fr/astuces_css/index.html b/files/fr/astuces_css/index.html deleted file mode 100644 index 213bc187b5..0000000000 --- a/files/fr/astuces_css/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Astuces CSS -slug: Astuces_CSS -tags: - - CSS -translation_of: Web/CSS -translation_of_original: Useful_CSS_tips ---- -

-

Cette page présente quelques astuces concernant l'utilisation de CSS. Chaque astuce est prévue pour être aussi courte que possible et fournir les informations nécessaires sur les propriétés et caractéristiques les plus recherchées mais peu connues ou sujettes à des erreurs fréquentes. -

-

Astuces CSS:Couleurs et fonds

-
Du texte opaque sur un fond translucide -
-

Astuces CSS:Tableaux

-
Comment centrer un tableau -
La bonne bordure pour votre tableau -
Donnez un style à vos colonnes avec une solution en pur CSS -
Un tableau dont le contenu peut défiler mais les en-têtes restent fixes -
-

Astuces CSS:Liens

-
L'ordre correct pour les pseudo-classes d'ancres -
Comportement de survol quand il n'y a pas de texte -
-{{ languages( { "en": "en/Useful_CSS_tips" } ) }} diff --git a/files/fr/astuces_css/liens/index.html b/files/fr/astuces_css/liens/index.html deleted file mode 100644 index c6c631c6c0..0000000000 --- a/files/fr/astuces_css/liens/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Liens -slug: Astuces_CSS/Liens -tags: - - CSS -translation_of: Web/CSS/Pseudo-classes -translation_of_original: Useful_CSS_tips/Links ---- -

-

-

Les pseudo-classes d'ancre

-

Les feuilles de style CSS permettent de styler les ancres grâce à 4 pseudo-classes : -

- -

À cause de la nature en cascade des styles CSS, il est important de déclarer les pseudo-classes dans l'ordre indiqué ci-dessus. Le style de :hover doit être placé après :link et :visited, sinon il serait écrasé par ces 2 derniers styles. De plus, comme :active est défini après :hover, quand un lien est aussi bien survolé que actif, le dernier style est appliqué. -

-

:hover quand il n'y a pas de texte

-

Normalement, la pseudo-classe :hover est appliquée quand un dispositif de pointage survole le texte du lien. Parfois, quand un lien est placé dans une cellule de tableau ou une barre de menu, verticale ou horizontale, il est nécessaire d'appliquer le style :hover quand le pointeur survole la cellule, là où il n'y a pas de texte. -

Un contournement pour avoir ce comportement est de styler l'ancre comme un block avec une largeur fixe. -

-
<a style="display: block; width: 150px;" href="#">Mon lien</a>
-
-

Articles connexes

- -

Interwiki Languages Links -

{{ languages( { "en": "en/Useful_CSS_tips/Links" } ) }} diff --git a/files/fr/astuces_css/tableaux/index.html b/files/fr/astuces_css/tableaux/index.html deleted file mode 100644 index 3a1430f65e..0000000000 --- a/files/fr/astuces_css/tableaux/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Tableaux -slug: Astuces_CSS/Tableaux -tags: - - CSS -translation_of: Web/CSS/border-collapse -translation_of_original: Useful_CSS_tips/Tables ---- -

Centrage

-

Si vous voulez centrer un tableau, il n'est pas correct d'utiliser

-
-
- text-align: center
-
-

dans l'élément parent. La méthode correcte est d'appliquer le style

-
-
- margin: 0px auto 0px auto
-
-

à la table elle-même.

- - - - - - - - - - - - - - - - - - - - - -
Table avec margin: 0px auto 0px auto;
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
-

Bordures

-

Voici un tableau standard avec cellspacing non nul et une bordure de cellule de 1px :

- - - - - - - - - - - - - - - - - - - - - -
Table avec cellspacing="4"
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
-

Si vous voulez transformer le tableau en grille, définissez l'espacement de cellule à 0 et le tableau devient comme ceci :

- - - - - - - - - - - - - - - - - - - - - -
Table avec cellspacing="0"
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
-

Le résultat n'est pas celui attendu et la raison en est que le modèle de bordure par défaut est défini comme séparé. Avec ce modèle, chaque cellule à sa propre bordure, même si l'espacement de cellule est 0. Afin d'avoir un rendu comme une grille, le modèle collapse doit être utilisé.

- - - - - - - - - - - - - - - - - - - - - -
Table avec cellspacing="0"
- et border-collapse:collapse;
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
-

Style de colonne

-

Si vous voulez définir un style particulier à certaines colonnes du tableau, la solution usuelle est de créer une classe de style et d'assigner explicitement toutes les cellules appartenant à ces colonnes à cette classe.

-
 <style type="text/css">
-   td { background-color: #eeeeee; }
-   td.CoulNoire { background-color: #cccccc; }
- </style>
-
-<table>
- <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
-  <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
-  <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
-  <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
-  <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
- </table>
-
-

Cette solution a l'avantage d'être compatible multi-navigateur, mais nécessite aussi de modifier le code HTML, pour explicitement sélectionner les cellules du tableau à styler.

-

Pour les navigateurs supportant les sélecteurs adjacents, il existe une solution alternative en pure CSS

-
<style type="text/css">
-    /* Style pour toutes les lignes */
-  tr { font: bold 16px Arial; }
-    /* Style pour les lignes avec une ligne avant: 2e, 3e, 4e, ... */
-  tr + tr { font: 12px Arial; }
-
-    /* Style pour toutes les colonnes */
-  td { background-color: #cccccc; }
-    /* Style pour les colonnes avec une colonne avant: 2e, 3e, 4e, 5e */
-  td + td { background-color: #eeeeee; }
-    /* Style pour les colonnes avec 4 colonnes avant: 5e */
-  td + td + td + td + td { background-color: #cccccc; }
-</style>
-
-<table>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-</table>
-
-

En-tête fixe

-

Si un tableau contient de nombreuses lignes, quand l'utilisateur fait défiler la page vers le bas pour voir toutes les données, l'en-tête défile en haut et devient invisible. Vous pouvez avoir un tableau avec un en-tête fixe et un défilement vertical, en utilisant le code ci-après.

-
- Ce code ne fait pas partie de la page originale et a été rajouté par le traducteur
-
<style type="text/css">
-table {
-	width: 20em;                    /* esthétique */
-	border-collapse: separate;      /* par défaut */
-/*  border-collapse: collapse;          /* Boggué depuis 2002 avec overflow-y: auto sur tbody */
-	border-spacing: 0;              /* contournement du bug */
-}
-tbody {
-	height: 10em;                   /* définit une hauteur */
-	overflow-x: hidden;             /* esthétique */
-	overflow-y: auto;               /* permet de scroller les cellules */
-}
-td {
-	border-left: 1px solid blue;    /* contournement du bug */
-	border-bottom: 1px solid blue;  /* contournement du bug */
-}
-</style>
-
-<table>
-  <thead><tr><th>Entête</th><th>Entête</th><th>Entête</th></tr></thead>
-  <tfoot><tr><th>Pied</th><th>Pied</th><th>Pied</th></tr></tfoot>
-  <tbody>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-  </tbody>
-</table>
-
-

Actuellement, il y a un problème avec le moteur de rendu de Firefox (voir sur bugzilla {{ Bug(135236) }})), qui ne style pas corectement des tableaux avec le modèle collapse border et TBODY avec le style overflow: auto.

-

{{ languages( { "en": "en/Useful_CSS_tips/Tables" } ) }}

-- cgit v1.2.3-54-g00ecf