MAJ 11/2011

Fiche CSS: Visibilité des élémements HTML

Objet de la fiche : Correction exercice

Retour au cours Retour au cours

Rappel de l'exercice

Application 1 (fenêtre informations)

Le but de l'exercice est d'afficher une  fenêtre d'information lors du survol du titre ("Bienvenue sur ...)

Pour cela vous utiliserez la construction des boites (classe et identificateurs) de la façon suivante :

Construction du message d'information

Application 2 (agrandissement image)

Dans les pages du répertoire Site : Bouquets.htm, Compositions.htm, Fleurs.htm, Plantes.htm on va afficher l'image aux dimensions normales lorsque l'on survole les images réduites.. Cette image se situera à droite du tableau et ses caractéristiques seront les suivantes :

 {position:absolute;top:12em;left:35em;width:10em;height:11em;border:dotted thin green;
background-repeat:no-repeat}

Pour cela on inclura une feuille de style commune à toute les pages et une feuille de style spécifique à chaque page.

Correction

Application 1 (fenêtre informations)

Déclaration dans le fichier de style externe (CSSExterneScreen.css) de la feuille de style suivante.

/* Fenêtre informations */

#Entete {font-size:1em;}

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

#Entete #TitreBoiteInfoBoutique {text-align:center;font-size:1.4em;background-image:url('Images/Site/Lys.jpg');padding:0.5em}

#Entete #boiteInfoBoutique .contenuInfoBoutique {clear:both}
#Entete #boiteInfoBoutique .contenuInfoBoutique img {float:left;padding:0.5em;margin:0em}
#Entete #boiteInfoBoutique .contenuInfoBoutique p {padding:0.5em;margin:0em;text-align:left}

Déclaration dans la page d'accueil (index.html).

........
<div id="Site">
<div id="Entete">
     <div id="titreSite">Bienvenue sur <b>La Boutique du Fleuriste</b> <img       src="../Images/Site/fleur_bouquet.png" width="78" height="89" alt="" /></div>
<div id="boiteInfoBoutique">
    <div id="TitreBoiteInfoBoutique">Les infos pratiques de la Boutique du Fleuriste</div>
      <hr />
      <div class="contenuInfoBoutique">
      <img src="Images/Site/FleuristeHeuresOuverture.jpg" width="50" height="50" alt="" />
      <p>La Boutique du Fleuriste est ouverte
      <br />du Lundi au Samedi de 10h à 20h.
      <br />le Dimanche de 9h à 13h.</p>
    </div>

    <div class="contenuInfoBoutique">
      <img src="Images/Site/FleuristeAdresse.jpg" width="50" height="50" alt="" />
      <p>Nous sommes au
      <br />136, Boulevard Émile Bouquet,
      <br />55300 Fleurie sur Creuse.</p>
    </div>

    <div class="contenuInfoBoutique">
       <img src="Images/Site/FleuristeTelephone.jpg" width="49" height="56" alt="" />
      <p>Vous pouvez nous appeler au
      <br />08 000000</p>
    </div>

    <div class="contenuInfoBoutique">
      <img src="Images/Site/FleuristeMail.jpg" width="48" height="48" alt="" />
      <p>Vous pouvez nous contacter
      <br />http://boutiqueFleuriste@mail.fr</p>
    </div>
</div>
</div>
<p>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>

<div id="BoiteChoix">
..........

Application 2 (agrandissement image)

Feuille de style générale ( fichier CSSExterneScreen.css)

/* tableau des images réduites */

#BoiteGamme {padding-left:1em;}
#BoiteGamme table td img {border:solid thin green;cursor:pointer}

/* Boite image agrandie */

.agrandiImage {position:absolute;top:12em;left:35em;width:10em;height:11em;display:none;border:dotted thin green;display:block;background-repeat:no-repeat}
.agrandiImage:hover{display:none}

Feuille de style spécifique donnée ici pour la page Bouquets.htm.

Une adaptation identique est à réaliser pour les autres pages

<style=type="text/css" media="screen">

#LgAgrandiBouquet1:hover .agrandiImage{background-image:url('../Images/Bouquets/Bouquet1.png')}
#LgAgrandiBouquet2:hover .agrandiImage{background-image:url('../Images/Bouquets/Bouquet2.png')}
#LgAgrandiBouquet3:hover .agrandiImage{background-image:url('../Images/Bouquets/Bouquet3.png')}
#LgAgrandiBouquet4:hover .agrandiImage{background-image:url('../Images/Bouquets/Bouquet4.png')}
#LgAgrandiBouquet5:hover .agrandiImage{background-image:url('../Images/Bouquets/Bouquet5.png')}
#LgAgrandiBouquet6:hover .agrandiImage{background-image:url('../Images/Bouquets/Bouquet6.png')}
#LgAgrandiBouquet7:hover .agrandiImage{background-image:url('../Images/Bouquets/Bouquet7.png')}
#LgAgrandiBouquet8:hover .agrandiImage{background-image:url('../Images/Bouquets/Bouquet8.png')}

</style>

Adaptation de la partie body.

<div id="BoiteGamme">

<table summary="Offre bouquets" abbr="Bouquets">
<caption>Découvrez nos offres Bouquets</caption>
<tbody>
<tr>
<td id="LgAgrandiBouquet1"><div class="agrandiImage"></div><img title="Bouquet" src="../Images/Bouquets/Reduit/Bouquet1.png" alt="Image bouquet" width="75" height="75" /></td>
<td id="LgAgrandiBouquet2"><div class="agrandiImage"></div><img title="Bouquet" src="../Images/Bouquets/Reduit/Bouquet2.png" alt="Image bouquet" width="75" height="75" /></td>
<td id="LgAgrandiBouquet3"><div class="agrandiImage"></div><img title="Bouquet" src="../Images/Bouquets/Reduit/Bouquet3.png" alt="Image bouquet" width="75" height="75" /></td>
<td id="LgAgrandiBouquet4"><div class="agrandiImage"></div><img title="Bouquet" src="../Images/Bouquets/Reduit/Bouquet4.png" alt="Image bouquet" width="75" height="75" /></td>
<tr>
<td id="LgAgrandiBouquet5"><div class="agrandiImage"></div><img title="Bouquet" src="../Images/Bouquets/Reduit/Bouquet5.png" alt="Image bouquet" width="75" height="75" /></td>
<td id="LgAgrandiBouquet6"><div class="agrandiImage"></div><img title="Bouquet" src="../Images/Bouquets/Reduit/Bouquet6.png" alt="Image bouquet" width="75" height="75" /></td>
<td id="LgAgrandiBouquet7"><div class="agrandiImage"></div><img title="Bouquet" src="../Images/Bouquets/Reduit/Bouquet7.png" alt="Image bouquet" width="75" height="75" /></td>
<td id="LgAgrandiBouquet8"><div class="agrandiImage"></div><img title="Bouquet" src="../Images/Bouquets/Reduit/Bouquet8.png" alt="Image bouquet" width="75" height="75" /></td>
</tr>
</tbody>
</table>

</div>

Résultat