Bert
Bos, coordinateur de l'activité
styleCopyright © 1994–2023 W3C® Privacy policy
Created 5 May 2001;
Last updated lun. 11 sept. 2023 17:40:36
Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Anne-Marie Luigi
Voir aussi l'index de tous les conseils.
Le menu multicolore que vous voyez ci-dessous est simplement un élément DIV avec quelques éléments P à l'intérieur. L'effet visuel est dû au fait que chaque élément P est positionné individuellement et a sa propre police et couleur. Cela fonctionne mieux avec les textes courts, car l'effet visuel est basé sur le chevauchement, mais si le texte est trop long, il se chevauche tellement qu'il devient difficile à lire.
La feuille de style permet un menu comprenant jusqu'à 10 éléments, l'exemple ci-dessus en contient 8. Voici la source HTML de l'exemple ci-dessus :
<div class="map"> <p id="p1"><a href="../../CSS/#news">What's new?</a> <p id="p2"><a href="../../CSS/#learn">Learning CSS</a> <p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a> <p id="p4"><a href="../../CSS/#editors">Authoring Tools</a> <p id="p10"><a href="../../CSS/#specs">Specs</a> <p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a> <p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a> <p id="p8"><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a> </div>
Notez la classe "map" sur l'élément DIV, ce qui la transforme en un conteneur pour le menu, et les attributs ID sur les P. The P elements must each have a (different) ID, called p1, p2,... or p10. Il n'est pas nécessaire d'utiliser les ID dans l'ordre (comme le montre l'exemple). Vous pouvez utiliser la feuille de style en la copiant dans votre propre feuille de style ou en utilisant @import ou un élément LINK pour importer map.css directement depuis le site du W3C : soit
@import "http://www.w3.org/Style/map.css";
ou
<link rel="stylesheet" href="http://www.w3.org/Style/map.css">
Voici comment fonctionne la feuille de style. La feuille de style commence en définissant un élément DIV avec la classe "map". Il crée un espace de 190px dans lequel le contenu des éléments P sera placé. Chacun des éléments avec les identifiants p1 à p10 reçoit alors une couleur et une police, et chaque élément est positionné à l'intérieur de l'espace créé par le DIV au moyen de la propriété 'margin' : une marge supérieure négative déplace l'élément dans l'espace DIV et une marge inférieure positive assure que l'élément suivant recommence au bas du DIV.
(La faiblesse de la feuille de style est qu'elle fait tout en px. Vous voudrez peut-être le changer pour utiliser des pourcentages à la place.)
DIV.map { /* Reserve some room for the links */
padding-top: 190px;
margin-left: -2em; /* Adapt this to your own page... */
margin-right: -2em; /* Adapt this to your own page... */
margin-bottom: 4em;
margin-top: 5em;
clear: both;
text-shadow: 0.2em 0.2em /* 0.2em */ silver }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
text-decoration: none }
#p1, #p1 A {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}
#p1 {text-align: right; margin: -185px 0 85px 0} /* top right */
#p2 {text-align: left; margin: -190px 0 150px 5%} /* top left */
#p3 {text-align: right; margin: -90px 35% 50px 0} /* center */
#p4 {text-align: right; margin: -95px 0 55px 0} /* center right */
#p5 {text-align: left; margin: -130px 0 30px 0} /* center left */
#p6 {text-align: left; margin: -40px 0 15px 35%} /* bottom center */
#p7 {text-align: right; margin: -80px 0 0px 0} /* bottom right */
#p8 {text-align: left; margin: -40px 0 20px 3%} /* bottom left */
#p9 {text-align: right; margin: -25px 0 5px 0} /* bottom right */
#p10 {text-align: left; margin: -130px 0 70px 0} /* center left */
Bien sûr, vous êtes libre de modifier la feuille de style pour essayer différentes polices, couleurs et positions, ou pour créer des règles de style supplémentaires pour plus de 10 éléments. Regardez aussi les marges gauche et droite du DIV : elles sont négatives, de sorte que le menu est plus large que le texte environnant, mais dans votre page, la marge peut ne pas être assez large pour cela, et vous devrez peut-être supprimez ces règles.
Vous vous demandez peut-être pourquoi les éléments sont positionnés au moyen de marges (négatives), alors que cela semble être un choix parfait pour des propriétés absolues de positionnement. En effet, vous pouvez faire la même chose avec 'position' et 'left' & 'right'. La raison pour laquelle cette feuille de style utilise des marges à la place, c'est que cela fonctionnait en 2001, dans les navigateurs qui avaient seulement implémenté CSS1.
Bert
Bos, coordinateur de l'activité
styleCreated 5 May 2001;
Last updated lun. 11 sept. 2023 17:40:36