CityDesk Weblog

  Accueil Elanceur Aide CityDesk Qu'est-que CityDesk ? Pourquoi ce site ? Galerie ? Contact  

Créer La Barre de Menu avec une Feuille de Style CSS ? Etape 1 - jeudi 16 mai 2002
Outils nécessaires :

Un éditeur de texte ou mieux un éditeur spécialisé type TopStyle. (Voir aussi le tutoriel).

Un navigateur standard. (version 4 et supérieures)

Compétences : pas de compétence HTML... quelques notions d'anglais peuvent faciliter la tâche.

Voir aussi :
  • W3C CSS et le menu déroulant flottant...
  • AllHtml : Initiation sur les commandes
  • Tableau des commandes essentielles des CSS
  • Autres ressources CSS
  • Tout le code CSS est sauvegardé sur une feuille de style avec l'extension .CSS et le contenu suivant (exemple). Les attributs de "body" sont hérités par toutes les pages liées s'assurant que dans ce cas toutes les couleurs de fontes sont noires avec un fond blanc, de la famille Arial/Sans Serif à la taille équivalente à l'"extrapetite"

    BODY {
     background: #f2f2f2 url(logo.jpg) no-repeat;
     color : Black;
     background-color : White;
     font-family : Arial, serif;
     font-size : x-small ; }

    Les balises d'ancre ont été définies en code hexadécimal pour leur couleur (au hasard sur la palette ici rouge) et la décoration de texte (soulignée) retirée . Les attributs "Hover" viennent jouer quand la souris glisse sur le lien provoquant un changement de couleur : 

    A { color : #FF6347;
     text-decoration : none;}

    A:HOVER { color : #A52A2A;
     text-decoration : none;}

    Les éléments sont reconnus comme Classes et peuvent être identifiés par la virgule qui les précède. Ils n'héritent pas automatiquement des expressions HTML régulières comme les balises <body> et <a> définies plus haut, mais nécessitent d'être encapsulés à l'intérieur de balises spécifiques dans le code HTML. Dans ce cas ils ont été définis de telle manière que les liens de navigation ne sont  pas automatiquement appliqués à quelque lien à travers le reste de la page. Regardez le code HTML en dessous pour savoir comment ils sont encapsulés dans le code. La plupart des attributs définissant la couleur et la decoration de texte établis précédemment. L'attribut "Border" bordure établit qu'un simple pixel coloré solide est utilisé dans des états différents, pendant que la largeur (width) permet plus de surface de page pour activer le lien par exemple.

    .nav {
     text-decoration : none;
     color : #990000;
     border : 1px solid White;
     width : 100px; }

    .nav:hover {
     text-decoration : none;
     color : #cc0033;
     border : 1px solid #CCCCCC;
     width : 100px; }

    .thispage {
     color : #666666; border : 1px solid #CCCCCC; width : 100px; }

    [Image]Aller à l'étape suivante.

    A signaler : Balise intéressante à regarder pour construire une Barre de Menu : A:HOVER {color:#ffffff} permet de modifier le comportement de la balise , à savoir le lien hypertexte. Le hover signifie que quand la souris passe sur le lien, celui-ci devient rouge. L'attribut hover s'applique aussi aux styles personnels. Une déclaration : .menu:hover {background-color:#ffffff;color#000000} signifie que les liens de style du menu passent sur fond de couleur #ffffff (rouge) et que le texte s'inscrit en #000000 (noir) lorsque la souris passe dessus.

    Accueil Aide CityDesk | Qu'est-ce que CityDesk ? | elanceur conseil | Pourquoi ce Weblog ? | Traductions Joel sur fil RSS xml