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}
