Fiche CSS : Quelques applicationsObjet de la ficheÉtat de la fiche
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 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
| Directives de style | Ré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
| 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
| 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> | |
Menus
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
|
|
<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
Sauvegardes
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.
