diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/astuces_css | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip |
unslug fr: move
Diffstat (limited to 'files/fr/astuces_css')
-rw-r--r-- | files/fr/astuces_css/couleurs_et_fonds/index.html | 139 | ||||
-rw-r--r-- | files/fr/astuces_css/index.html | 25 | ||||
-rw-r--r-- | files/fr/astuces_css/liens/index.html | 32 | ||||
-rw-r--r-- | files/fr/astuces_css/tableaux/index.html | 201 |
4 files changed, 0 insertions, 397 deletions
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 ---- -<p> -</p> -<h3 id="Fond_translucide"> Fond translucide </h3> -<p>Même si <i>opacity</i> (translucidité) est une propriété de style définie dans la spécification CSS3, <a class="external" href="http://www.w3.org/TR/css3-color/#transparency">module CSS3 Color, chapitre 3.2</a>, des navigateurs la gèrent déjà. D'après la spécification, <i>l'opacité peut être considérée conceptuellement comme une opération de post-traitement</i>, par conséquent le niveau de transparence choisi est appliqué à tout le contenu. -</p><p>Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir <b>du texte opaque sur un fond translucide</b>, car si vous définissez la propriété <i>opacity</i> pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux. -</p><p>Si vous essayez cet exemple de code, vous découvrirez que <b>texteopaque</b> n'est pas opaque, il a hérité de l'attribut <code>opacity</code> de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus. -</p> -<pre><div id="conteneur"> - <div id="texteopaque"> - Ceci est un texte normal - sur un fond translucide - </div> -</div> -</pre> -<pre>#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é */ -} -</pre> -<p>En réalité, deux manières d'obtenir cet effet existent et fonctionnent dans plusieurs navigateurs (prennent en compte le comportement <i>exotique</i> d'Internet Explorer) : -</p> -<ul><li> <b>Une hiérarchie réarrangée</b> : comme le problème principal est que le texte à rendre opaque fait partie de la boîte translucide, mettez-le en dehors de la boîte. -</li></ul> -<ul><li> <b>Une image PNG avec canal alpha</b> : utilisez une image de fond translucide. -</li></ul> -<h4 id="Hi.C3.A9rarchie_r.C3.A9arrang.C3.A9e"> Hiérarchie réarrangée </h4> -<p>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. -</p> -<pre><div id="conteneur"> - - <div id="texteopaque"> - Ceci est un texte normal - sur un fond translucide - </div> - - <div id="fondtranslucide"> - - </div> - -</div> -</pre> -<p>Afin de placer la zone <b>texteopaque</b> par dessus <b>fondtranslucide</b>, il faut utiliser le positionnement absolu et l'attribut <i>z-index</i> 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. -</p> -<pre>#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 */ -} -</pre> -<p><br> -</p> -<h5 id="Comment_retirer_la_hauteur_fixe_pr.C3.A9d.C3.A9finie"> Comment retirer la hauteur fixe prédéfinie </h5> -<p>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 <b>texteopaque</b> autant que nécessaire, puis d'utiliser JavaScript pour redimensionner <b>fondtranslucide</b> à la même hauteur. Mais ce n'est pas une solution en pur CSS. -</p><p>Si vous voulez n'utiliser que CSS, la solution est assez simple, vous n'avez qu'à répéter le contenu de <b>texteopaque</b> dans <b>fondtranslucide</b> également. Ce n'est pas élégant, mais très facile à implémenter, notamment dans les pages générées dynamiquement. -</p> -<pre><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> -</pre> -<h4 id="Image_PNG_avec_canal_alpha"> Image PNG avec canal alpha </h4> -<p>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é. -</p> -<ul><li> <b>Mozilla</b> : la translucidité est implémentée à l'aide d'une image PNG avec un canal alpha comme image de fond de l'élément conteneur. -</li></ul> -<ul><li> <b>Internet Explorer</b> : comme IE6 (et les versions précédentes) ne supporte pas les images PNG avec un canal alpha, la translucidité est implémentée avec le filtre alpha de l'exemple précédent, et l'héritage des descendants est écrasé à l'aide d'un comportement non-standard d'IE. -</li></ul> -<p>Notes et inconvénients pour cette solution : -</p> -<ul><li> Un autre DIV conteneur doit être ajouté pour que l'effet fonctionne sous Internet Explorer. -</li><li> Le DIV parent est positionné de manière absolue, et le nouveau DIV conteneur avec un fond translucide doit être un DIV normal. Celui qui contient le texte doit être positionné de manière absolue pour briser l'héritage de la transparence. -</li><li> Quelques hacks CSS doivent être utilisés pour que des règles CSS différentes s'appliquent selon le navigateur. -</li><li> Une image PNG spécifique doit être générée, avec le niveau de transparence souhaité. -</li></ul> -<pre><div id="conteneur"> - <div id="fondtranslucide"> - <div id="texteopaque"> - Ceci est un texte normal - sur un fond translucide - </div> - </div> -</div> -</pre> -<pre>#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; } -</pre> -{{ 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 ---- -<p> -</p><p>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. -</p> -<h4 id="Astuces_CSS:Couleurs_et_fonds"> <a href="fr/Astuces_CSS/Couleurs_et_fonds">Astuces CSS:Couleurs et fonds</a> </h4> -<dl><dd> <a href="fr/Astuces_CSS/Couleurs_et_fonds#Fond_translucide">Du texte opaque sur un fond translucide</a> -</dd></dl> -<h4 id="Astuces_CSS:Tableaux"> <a href="fr/Astuces_CSS/Tableaux">Astuces CSS:Tableaux</a> </h4> -<dl><dd> <a href="fr/Astuces_CSS/Tableaux#Centrage">Comment centrer un tableau</a> -</dd><dd> <a href="fr/Astuces_CSS/Tableaux#Bordures">La bonne bordure pour votre tableau</a> -</dd><dd> <a href="fr/Astuces_CSS/Tableaux#Style_des_colonnes">Donnez un style à vos colonnes avec une solution en pur CSS</a> -</dd><dd> <a href="fr/Astuces_CSS/Tableaux#En-t.C3.AAtes_fixes">Un tableau dont le contenu peut défiler mais les en-têtes restent fixes</a> -</dd></dl> -<h4 id="Astuces_CSS:Liens"> <a href="fr/Astuces_CSS/Liens">Astuces CSS:Liens</a> </h4> -<dl><dd> <a href="fr/Astuces_CSS/Liens#Pseudo-classes_d.27ancres">L'ordre correct pour les pseudo-classes d'ancres</a> -</dd><dd> <a href="fr/Astuces_CSS/Liens#Survol_sans_texte">Comportement de survol quand il n'y a pas de texte</a> -</dd></dl> -{{ 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 ---- -<p> -</p> -<h3 id="Les_pseudo-classes_d.27ancre"> Les pseudo-classes d'ancre </h3> -<p>Les feuilles de style <a href="fr/CSS">CSS</a> permettent de styler les ancres grâce à 4 pseudo-classes : -</p> -<ul><li> {{ Cssxref(":link") }} pour les liens non visités -</li><li> {{ Cssxref(":visited") }} pour les liens visités -</li><li> {{ Cssxref(":hover") }} pour les liens survolés -</li><li> {{ Cssxref(":active") }} pour les liens actifs -</li></ul> -<p>À cause de la nature en <i>cascade</i> des styles CSS, il est important de déclarer les pseudo-classes dans l'ordre indiqué ci-dessus. Le style de <code>:hover</code> doit être placé après <code>:link</code> et <code>:visited</code>, sinon il serait écrasé par ces 2 derniers styles. De plus, comme <code>:active</code> est défini après <code>:hover</code>, quand un lien est aussi bien <i>survolé</i> que <i>actif</i>, le dernier style est appliqué. -</p> -<h3 id=":hover_quand_il_n.27y_a_pas_de_texte"> <code>:hover</code> quand il n'y a pas de texte </h3> -<p>Normalement, la pseudo-classe <code>:hover</code> 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 <code>:hover</code> quand le pointeur survole la cellule, là où il n'y a pas de texte. -</p><p>Un contournement pour avoir ce comportement est de styler l'ancre comme un <code>block</code> avec une largeur fixe. -</p> -<pre class="eval"><a style="display: block; width: 150px;" href="#">Mon lien</a> -</pre> -<h3 id="Articles_connexes"> Articles connexes </h3> -<ul><li> <a href="fr/Probl%c3%a8mes_soulev%c3%a9s_par_le_pseudo_%c3%a9l%c3%a9ment_hover">Problèmes soulevés par le pseudo élément hover</a> <span>(ajout du traducteur)</span> -</li><li> Propriété CSS {{ Cssxref("display") }} -</li></ul> -<p><span>Interwiki Languages Links</span> -</p>{{ 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 ---- -<h3 id="Centrage" name="Centrage">Centrage</h3> -<p>Si vous voulez centrer un tableau, il n'est pas correct d'utiliser</p> -<dl> - <dd> - <code>text-align: center</code></dd> -</dl> -<p>dans l'élément parent. La méthode correcte est d'appliquer le style</p> -<dl> - <dd> - <code>margin: 0px auto 0px auto</code></dd> -</dl> -<p>à la table elle-même.</p> -<table style="border-collapse: collapse; margin: 0px auto 0px auto;"> - <tbody> - <tr> - <td colspan="3" style="border: 1px solid black;">Table avec margin: 0px auto 0px auto;</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - </tbody> -</table> -<h3 id="Bordures" name="Bordures">Bordures</h3> -<p>Voici un tableau standard avec <code>cellspacing</code> non nul et une bordure de cellule de 1px :</p> -<table> - <tbody> - <tr> - <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="4"</code></td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - </tbody> -</table> -<p>Si vous voulez transformer le tableau en grille, définissez l'espacement de cellule à 0 et le tableau devient comme ceci :</p> -<table> - <tbody> - <tr> - <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="0"</code></td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - </tbody> -</table> -<p>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 <b>séparé</b>. 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 <code>collapse</code> doit être utilisé.</p> -<table style="border-collapse: collapse;"> - <tbody> - <tr> - <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="0"</code><br> - et <code>border-collapse:collapse;</code></td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - <tr> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - <td style="border: 1px solid black;">Contenu cellule</td> - </tr> - </tbody> -</table> -<h3 id="Style_de_colonne" name="Style_de_colonne">Style de colonne</h3> -<p>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.</p> -<pre> <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> -</pre> -<p>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 à <i>styler</i>.</p> -<p>Pour les navigateurs supportant les <i>sélecteurs adjacents</i>, il existe une solution alternative en pure CSS</p> -<pre><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> -</pre> -<h3 id="En-t.C3.AAte_fixe" name="En-t.C3.AAte_fixe">En-tête fixe</h3> -<p>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.</p> -<div class="note"> - Ce code ne fait pas partie de la page originale et a été rajouté par le traducteur</div> -<pre><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> -</pre> -<p>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 <i>collapse border</i> et TBODY avec le style <i>overflow: auto</i>.</p> -<p>{{ languages( { "en": "en/Useful_CSS_tips/Tables" } ) }}</p> |