Fiche CSS: Applications

Objet de la fiche : Correction exercice

 Retour au cours

Rappel de l'exercice

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.

Correction

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

Dans la page d'accueil (index.html) on va rajouter une feuille de style sp�cifique pour g�rer ce type d'affichage.

<style type="text/css" media="screen">
    #BoiteChoix dd {cursor:url('Images/Site/CurseurListeChoix.cur'),default}
</style>

Pr�sentation g�n�rale de la liste de choix.

Pour le r�sultat souhait� on va d�finir une hauteur pour les �l�ments de la liste (feuille de style externe)

#BoiteChoix dd {padding-left:1em;border-left:solid 0.3em green;color:green;height:1.6em}

#BoiteChoix dt{font-weight:bold;height:1.6em}

Pour l'alignement des titres de la liste "Choisissez et Commandez" et du tableau "Notre Catalogue" (page index.htmpl) :

<p>Choisissez et commandez</p>

Pr�sentation de la fen�tre d'information au premier plan.

#Entete #boiteInfoBoutique {width:21em;position:absolute;background-color:#D1AD1B;margin:0em;
margin:auto;padding:0.5em;font-family:'times new roman';display:none;z-index:10}

Site en blanc + coins arrondis.

Site en blanc

Dans la page index.html et cela pour des raisons de flux il faut permuter les emplacements de la boite <div id="BoiteCatalogue"> et de la boite <div id="BoiteChoix">. La boite <div id="BoiteCatalogue"> doit �tre charg�e avant la boite <div id="BoiteChoix">.

Dans la feuille de style externe et suite � l'op�ration ci dessus on va supprimer le positionnement float:left de la BoiteChoix :

#BoiteChoix {width:13em;text-align:left;float:left;padding-left:1em}

 et d�finir la couleur d'arri�re plan de la boite site.

#Site {width:65%;margin:auto;background-color:white}

Coins arrondis

Dans la feuille de style externe on va d�finir les �l�ments (coins) pour obtenir un effet d'arrondi :

/* Pr�sentation du site avec des bords arrondis */
#CoinHautDroit, #CoinHautGauche, #CoinBasDroit, #CoinBasGauche {height: 19px; width: 19px; background-repeat: no-repeat;}

#CoinHautGauche {background-image: url('../Images/Site/CoinJaune_hautgauche.gif');}
#CoinHautDroit {float: right; background-image: url('../Images/Site/CoinJaune_hautdroit.gif');}
#CoinBasGauche {background-image: url('../Images/Site/CoinJaune_basgauche.gif');}
#CoinBasDroit {clear:both; float: right; background-image: url('../Images/Site/CoinJaune_basdroit.gif');}

et dans les diverses pages (index.html, Site/Bouquets.htm, compositions.htm .......)

<div id="Site">
<div id="CoinHautDroit"></div><div id="CoinHautGauche"></div>
....

.....

<div id="CoinBasDroit"></div><div id="CoinBasGauche"></div>

</div>
</body>

Centrage du texte d'accueil.

La classe TexteAccueil telle que d�finie ci-dessous dans le fichier de feuille de style externe permet de centrer le texte :

.TexteAccueil {text-align:justify;padding-left:1em;padding-right:1em;}

et la page index.html :

<p class="TexteAccueil">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.</p>

Ligne s�paratrice

Dans la page index.html et apr�s le texte "La Boutique du Fleuriste ...... permettant de commander en ligne" on d�finit la ligne s�paratrice :

<hr />
 

et dans le fichier de feuille de style externe ses caract�ristiques :

hr{width:90%;background-color:gray;}