MAJ 11/2011

Fiche CSS: Positionnement

Objet de la fiche : Correction exercice


Retour au cours Retour au cours


Rappel de l'exercice

Le but de cet exercice est de positionner les différents partie de notre site de manière à le rendre convivial et ergonomique.

  • Étape 1 : Centrage du site. Pour cela :
    • Dans la page index.html de la racine créez une boite div qui encadre l'ensemble de la page (départ de la boite juste après <body> et fin de la boite juste avant </body>). Cette boite aura pour identificateur "Site".
    • Faire de même pour les pages Bouquets.htm, Compositions.htm, Fleurs.htm et Plantes .htm du répertoire "Site".
    • Sauvegardez les divers fichiers
    • Dans le fichier CSSExterneScreen.css créez la feuille de style pour la boite "Site", lui donner une largeur de 65%  puis centrez la boite en utilisant la propriété margin:auto.
  • Étape 2 : Positionnement de la liste "Choisissez et commandez" sur la gauche et positionnement du tableau d'images à droite sur la même horizontale. On donnera une largeur de 15em à la liste.

Correction

Déclaration de la boite "Site"

<body>
...............
...............
<div id="Site">
   <div="titreSite">Bienvenue ............</div>
        <p>La Boutique du Fleuriste est .............</p>
        ......................
        <table ...........
       </table>
</div>
</div>

Feuille de style externe

/* style de référence */
html {font-size:100%}
body{font-size:1em;font-family:arial,trebuchet,verdana,helvetica,tahoma,'ms sans serif';
color:black}

/* Arrière plan */
body{background-color:#edd571;background-image:url('../../Images/Site/PompeEauRosier.png');background-repeat:no-repeat;
background-attachment:fixed}

/* style de base */
#BoiteCatalogue th:first-letter { font-size: 200%; color: green; }
#titreSite{font-size:1.4em;text-align:center}
#titreSite img {vertical-align:middle;padding-left:0.5em}

/* Centrage */
#Site {width:65%;margin:auto;}

/* Liste Choisissez et commandez */
#BoiteChoix {width:15em;text-align:left;float:left;padding-left:1em}

#BoiteChoix dd {padding-left:1em;border-left:solid 0.3em green;color:green}
#BoiteChoix dd:hover {border-left-color:#00CC00;color:#00CC00}

/* Tableau des images */
#BoiteCatalogue {float:right;padding-right:1em}
 

#BoiteCatalogue th:first-letter { font-size: 200%; color: green; }
#BoiteCatalogue table{border:hidden}
#BoiteCatalogue table td img {border:solid thin green}
#BoiteCatalogue table td img:hover {border:solid thin #00CC00}

Résultat