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}
