Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche CSS : Quelques applications

Objet de la fiche

État de la fiche Terminée validée


Plan de la fiche

Avant propos

Vous trouverez dans cette fiche quelques exemples pratiques qui reprennent les connaissances acquises dans les fiches précédentes.

Cette fiche clos la partie html-css de ce tutorial.

Rollover


Ce chapitre a pour objet de vous familiariser avec les rollovers, c'est-à-dire les transformations d'apparence d'un attribut HTML lors de son survol par le curseur.

Rollover sur image


Exemple


Survolez le bouton ci contre 

Principe

Le principe de base consiste à :

  • Disposer de deux images, rigoureusement de même dimension pour préserver la fluidité de passage de l'une à l'autre. Dans notre cas : et différentes par leur couleur de fond.

  • Créer un boite <div> dans le <body>. Cette boite sera référencée par rapport à un identificateur id="ReferenceMaBoite".
  • Créer une feuille de style dans le <head> pour remplir la boite avec une image.

Créer la boite

<div id="ReferenceMaBoite"></div>

Créer la feuille de style


Directives de style Résultats
#ReferenceMaBoite{ Classe relative à l'identificateur de la boite
width: 112px; Largeur de l'image que l'on veut présenter. Nécessairement en unités px
height: 39px; Hauteur de l'image que l'on veut présenter. Nécessairement en unités px
background-image: url('MonImageDeBase');} Adresse de l'image de base qui sera mise comme image d'arrière plan dans la boite <div>

Compléter la feuille de style avec les définition de style pour obtenir l'effet voulu. On va se limiter ici à changer l'image, mais on peut imaginer aussi de changer en même temps la bordure de l'image, les marges etc.

#ReferenceMaBoite:hover { Classe relative  à l'identificateur de la boite lors du survol.
background-image: url('MonImage2');} Adresse de l'image qui apparaîtra lors du survol de la boite <div>
  • Nota : La boite <div> peut être utilisée dans une balise de lien <a> de façon à disposer d'un lien hypertexte lors d'un click sur l'image.

Au survol ,l'image de substitution va remplacer l'image de base. Lors du premier survol  l'image de substitution est télé chargée à partir du serveur. Si l'image est très importante le temps de téléchargement sera long et rien ne sera affiché durant ce temps là, et le résultat ne sera pas bon. Il faut dont veuillez à utiliser des images légères dans ces cas de rollover. On verra dans une fiche javascript une méthode pour pré charger les images de manière transparente pour l'utilisateur et éviter ce type de désagrément.



Variante : les 2 images en une seule

Les 2 images nécessaires pour le rollover sont rassemblées sous forme d'une seule et même image et on va jouer sur le décalage d'une demie image. Cette méthode si vous pouvez l'appliquer présente l'avantage de ne pas télécharger l'image de substitution puisqu'il s'agit de la même image que l'image de base qui est téléchargée lors du chargement de la page.



Rollover sur texte


Exemple


Survolez ce texte

Principe

Le principe de base consiste à :

  • Encadrer le texte avec une balise <span> qui sera référencée par rapport à un identificateur id="TexteRollover".
  • Créer une feuille de style dans le <head> pour le style que doit prendre le texte lors du survol.

Encadrer le texte

<span title="Nouveau style pour le texte survolé" id="TexteRollover">Survolez ce texte</span>

Créer la feuille de style


Directives de style Actions
#TexteRollover {color:red;} Classe relative  à l'identificateur de la balise <span>. Le texte de base sera affiché en rouge
#TexteRollover:hover { Classe relative  à l'identificateur de la balise <span> lors du survol.
color:black;font-weight:bold;font-variant:small-caps;border:solid 0.1em gray} Le texte survolé sera noir, en gras, petites majuscules entouré d'un cadre gris.

Rollover avec une liste


RolloverListe

Exemple


Survolez le menu liste ci contre (1)  
 

(1) : des liens hypertextes sont définis pour chaque article mais ne sont pas actifs :href="#"

Principe

Le principe de base consiste à :

  • Disposer de deux représentation : une de base et une survolée,  Dans notre cas les deux représentations ne sont qu'un seul et  même fichier (voir variante : 2 images en une seule)
  • Créer une liste déroulante <ul> dans le <body>. Cette liste sera référencée par rapport à un identificateur id="ListeMenu". 
  • Créer une feuille de style dans le <head> pour remplir la liste avec une image.

Créer la liste déroulante

<ul id="menu">
<li><a href="#">Informatique</a></li>
<li><a href="#">Téléphonie</a></li>
<li><a href="#">Audio visuel</a></li>
</ul>

Créer la feuille de style


Directives de style Actions
ul#ListeMenu{ Classe relative à l'identificateur de la liste
list-style-type:none;} Liste sans puce
ul#ListeMenu li a { Classe relative aux articles de la liste incluant un lien.
display:block; Pour pouvoir disposer d'une hauteur et d'une largeur pour les articles <li>
width:187px; Largeur de l'image que l'on veut présenter. Nécessairement en unités px
line-height:1.5em; Détermine la hauteur de la zone <li>
text-indent: 3.5em ; Décalage du contenu texte des articles <li>
background: url('MonImage') 0 0; Image d'arrière plan des articles <li>. Seule la demie partie supérieure sera affichée.
text-decoration:none; Supprime tout effet de style non désiré pouvant apparaître sur les liens.
color:gray;} Texte des articles <li> en gris
ul#ListeMenu li a:hover { Classe relative aux articles de la liste incluant un lien et survolés par le curseur.
background: url('MonImage') 0 -24px; Adresse de l'image qui apparaîtra lors du survol des articles. En fait c'est la même adresse que l'image précédente puisque l'image de base et l'image survolée sont une seule et même image composée de 2 parties. On va simplement décalé l'image vers le haut d'une demi hauteur pour n'afficher que la partie inférieure. Décalage en px nécessairement.
color:black;} Texte des articles <li> survolés en noir

Rollover avec pseudo-classe :hover


Exemple

Survolez les carrés ci contre  

=> un second carré personnalisé apparaît. Ce carré est relié au carré survolé par un trait de liaison


Principe

  • Créer une liste.
  • Définir pour chaque élément un lien spécifique : <a id="link1" href="#">D</a>
  • A l'intérieur de ce lien définir un élément qui sera le carré qui apparaîtra lors du survol : <a id="link1" href="#">D<span>Démos</span></a></li>
  • Toujours à l'intérieur de ce lien définir un élément qui fournira le lien (trait) entre le carré survolé et le nouveau carré : <a id="link1" href="#"><em></em>D<span>Démos</span></a></li>

Créer le code html

Créer la feuille de style


La feuille de style
Directives de styleRésultats
ul.css {Classe relative à l'identificateur de la liste
padding:0; margin-top:6em; margin-left:9em; list-style-type:none; width:6.5em; height:9.5em; position:relative;border:0.1em dotted gray} Positionnement et aspect (cadre pointillé)
ul.css li {padding:0em;display:block; height:3em; width:3em; float:left; margin:0.1em; } Définition des éléments de la liste
ul.css a, ul.css .noroll {display:block; width:2.8em; height:2.8em; border:0.1em solid #000; line-height:2.8em; text-align:center; text-decoration:none; color:#fff;} Définition de base des petits carrés
ul.css a em, ul.css a span {display:none; line-height:1.7em;}Définition des éléments em et span, invisibles tant que l'élément correspondant n'est pas survolé.
ul.css .noroll {background-color:gray}  
ul.css a#link1 {background:#697210;}
ul.css a#link2 {background:#e09222;}
ul.css a#link4 {background:#ffd610; color:#000;}
ul.css a#link7 {background:#724a10;}
 
Directives de style suite au survol des carrés de base
ul.css a:hover#link1 {background:#000;} Changement de couleur de fond du carré survolé : ici le carré D
ul.css a:hover#link1 span {display:block; position:absolute; left:-7em; top:-4em; width:6em; height:3em; border:0.1em solid #000;background:#697210;} Apparition d'un carré supplémentaire au survol du carré de base
ul.css a:hover#link1 em {display:block; position:absolute; left:-1em; top:-2.5em; width:2.5em; height:2.5em; border-right:0.1em solid #000; border-top:0.1em solid #000;background-color:none} Apparition d'un trait réunissant le carré de base et le carré supplémentaire apparaissant lors du survol
Le même mécanisme de hover est utilisé lors du survol des autres éléments. 


Bordures personnalisées de type cadre

On dispose des divers éléments du cadre.



coins
haut gauche haut droit
bas gauche bas droit
Cotés
Haut Bas
Gauche Droite

Méthode sans CSS

Méthode avec CSS

La méthode consiste à déclarer des boites pour chaque élément et à les positionner correctement

Création des boites

Les boites de la partie body
Directives de style Résultats
<body>
<div class="cadre1"> Ouverture boite globale du cadre.
<div class="hg"></div> Positionnement du haut du cadre : coin gauche, partie haute, coin droit.
<div class="haut"></div>
<div class="hd"></div>
<div class="gauche"></div> Positionnement des éléments centraux du cadre : montant gauche, contenu du cadre (ici une image), montant droit.
<div class="contenu"><img src="http://monwebfacile.free.fr/Tutoriaux/Images/DroitsHomme.jpg" width="122" height="98" alt ="" /></div>
<div class="droite"></div>
<div class="bg"></div> Positionnement du bas du cadre : coin gauche, partie haute, coin droit.
<div class="bas"></div>
<div class="bd"></div>
</div> Fermeture boite globale du cadre.
</body>

Feuille de style

La feuille de style correspondante
Directives de style Résultats
<style type="text/css">
img {border:none} Déclaration des images sans bordure.
.cadre1 {width: 157px; height: 1px;} Cadre global.
.hg, .bg {width: 17px;height: 18px;}
.hd, .bd {width: 18px;height: 18px;}
Définitions communes des coins.
.haut {width: 121px;height: 18px;}
.bas {width: 121px;height: 18px;}
.gauche, .droite {width: 17px;height: 98px;}
Définitions communes des bordures.
.cadre1 div { float: left; } Positionnement du cadre général.
.haut {background-image:url('http://monwebfacile.free.fr/Tutoriaux/Images/Cadre_LigneHaute.jpg');background-repeat:repeat-x;}
.bas {background-image:url('http://monwebfacile.free.fr/Tutoriaux/Images/Cadre_LigneBasse.jpg');background-repeat:repeat-x;}
.gauche {background-image:url('http://monwebfacile.free.fr/Tutoriaux/Images/Cadre_LigneGauche.jpg');background-repeat:repeat-y;}
.droite {background-image:url('http://monwebfacile.free.fr/Tutoriaux/Images/Cadre_LigneDroite.jpg');background-repeat:repeat-y;}
Définitions spécifiques  des bordures.
.hg { background-image: url('http://monwebfacile.free.fr/Tutoriaux/Images/Cadre_CoinHautGauche.jpg');background-repeat:no-repeat; }
.hd { background-image: url('http://monwebfacile.free.fr/Tutoriaux/Images/Cadre_CoinHautDroit.jpg');background-repeat:no-repeat; }
.bg { background-image: url('http://monwebfacile.free.fr/Tutoriaux/Images/Cadre_CoinBasGauche.jpg');background-repeat:no-repeat; }
.bd { background-image: url('http://monwebfacile.free.fr/Tutoriaux/Images/Cadre_CoinBasDroit.jpg');background-repeat:no-repeat; }
Définitions spécifiques des coins.
.hg, .gauche, .bg { clear: left; } Positionnement de certains coins et bordures.
.contenu {text:align:center;} Alignement des éléments à l'intérieur du cadre.
</style>


Principe

La plus part de ce type de menus est basé sur l'utilisation des listes et de l'utilisation du pseudo élément hover.

Voici un petit exemple pour vous permettre de voir le mécanisme.

Partie déclarative dans le body

Au survol du rectangle A, le rectangle B apparaît. Au survol du rectangle B son apparence est modifiée : changement de couleur du cadre et de la police

  • A
    • B
<ul id="ul1">
  <li id="li1">A
    <ul id="ul2">
      <li id="li2">B</li>
    </ul>
  </li>
</ul>
La feuille de style correspondante
<style type="text/css">
#ul1{width:7em;border:solid thin black}
#ul2{width:4em;border:solid thin gray;display:none}

#ul1:hover #li1{color:red}
#ul1:hover #ul2{display:block}

#ul2:hover #li2{color:black}
#ul2:hover {border:red}
</style>

Lorsque l'on survole (:hover) le rectangle A (identificateur #ul1) l'élément identifié par #li1 passe en police de couleur rouge (#ul1:hover #li1{color:red}), et le rectangle B (identificateur #ul2) est affiché (#ul1:hover #ul2{display:block})

Une fois le rectangle B  (identificateur #ul2) affiché, lorsqu'on le survole on modifie la couleur de la police de l'élément li du rectangle B (identificateur #li2) qui passe du rouge au noir (#ul2:hover #li2{color:black}) et la couleur de bordure du rectangle B devient rouge (#ul2:hover {border:red}).

Exemple complet d'un menu horizontal


Exemple complet d'un menu vertical



Centrer son site

On place le contenu du body dans une boite <div> à laquelle on va affecter un style définissant une largeur et en utilisant la propriété margin avec l'attribut auto.


Application au projet de site web

Le but de cet exercice est d'habiller par petites touches notre site afin de le rendre plus accueillant et convivial.

Curseur personnalisé  lors du survol de la liste de choix dans la page d'accueil.

Afficher un curseur sous forme d'une petite image (CurseurListeChoix.cur) représentant un bouquet de fleurs lors du survol des éléments de la liste "Choisissez et Commandez". L'image est disponible dans le répertoire Site.

Présentation générale de la liste de choix

Les éléments de la liste "Choisissez et Commandez" sont un peu tassés en hauteur : il convient de les espacer et d'obtenir une hauteur de liste identique à la hauteur du tableau "Notre Catalogue". Veillez à ce que les titres de la liste et du tableau soient alignés.

Présentation de la fenêtre d'information au premier plan

Sur certains navigateurs la fenêtre d'information qui apparaît lorsque l'on survole le titre, n'est pas complètement opaque comme le montre l'image ci-dessous. Il convient de lui appliquer un z-index avec une valeur adéquate.

/

Site en blanc + coin arrondis

Le but est d'afficher le contenu du site en fond blanc avec des coins arrondis comme le montre l'image ci-dessous.

Centrage du texte d'accueil

Le texte "La Boutique du Fleuriste est fière de vous offrir sa vaste gamme de bouquets, compositions et fleurs grâce à son site Internet vous permettant de commander en ligne." n'est pas centré. Affecté ce paragraphe à une classe spécifique (class="TexteAccueil") dont on définira la feuille de style correspondante pour le centrer et le justifier.

Ligne séparatrice

Insérer une ligne séparatrice après le texte "La Boutique du Fleuriste ......... commander en ligne". Cette ligne aura les caractéristiques suivantes : longueur 90%, arrière plan gris.

Retrouvez la solution


Respectons la propriété intellectuelle