1 Modèles

2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll <meta http-equiv="Content-Type" content="text/html; charset=iso "> body { margin: 0; padding: 0; font-family:Verdana, Arial, Helvetica, sans- serif; font-size: 0.8em; background-color: #fff; /*couleur de fond blanche*/ }.conteneur { /*le conteneur global du site, qui sera centré */ width: 750px; position: absolute; left: 50%; margin-left: -385px; }.header { height: 100px; background-color: #99CCCC; }.menu { position: absolute; left:0; width: 150px; height: 300px; background-color:#CCCCFF; }.frame { margin-left: 150px; width: auto; height: 300px; background-color:#9999CC; overflow: auto; }.footer { height: 20px; background-color: #99CC99; } p { margin: 0 0 5px 0; }.menugauche { list-style-type: none; margin: 0; padding:0; }.menugauche li { margin-bottom: 5px; }.menugauche a { margin: 0 2px; color: #000000; text-decoration: underline; }.menugauche a:hover { text-decoration: none; } --> contenu du header de taille fixe : 750px <a href=" mise-en-page-en-CSS">(voir tous les modèles) menu gauche de largeur fixe : 150px Menu 1 Menu 2 Menu 3 Menu 4 partie "frame" scrollable contenu du footer de taille fixe : 750px

3 Le conteneur.conteneur { /*le conteneur global du site, qui sera centré */ width: 750px; position: absolute; left: 50%; margin-left: -385px; }

4 Body body { margin: 0; padding: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; background-color: #fff; /*couleur de fond blanche*/ }

5.header.header { height: 100px; background-color: #99CCCC; }

6.frame.frame { margin-left: 150px; width: auto; height: 300px; background-color:#9999CC; overflow: auto; }

7.menu.menu { position: absolute; left:0; width: 150px; height: 300px; background-color:#CCCCFF; }

8.menugauche.menugauche { list-style-type: none; margin: 0; padding:0; }

9.menugauche li a a:hover.menugauche li { margin-bottom: 5px; }.menugauche a { margin: 0 2px; color: #000000; text- decoration: underline; }.menugauche a:hover { text-decoration: none; }

10.footer.footer { height: 20px; background-color: #99CC99; }

11 p p { margin: 0 0 5px 0; }

12 Code contenu du header de taille fixe : 750px menu gauche de largeur fixe : 150px Menu 1 Menu 2 Menu 3 Menu 4 partie "frame" scrollable … partie "frame" scrollable contenu du footer de taille fixe : 750px

13 TD

14 solution Largeur fixe 750, header/menu haut/contenu/footer. /* CSS issu des tutoriels css.alsacreations.com */ body { font-family: Verdana, Arial, Helvetica, sans- serif; font-size: 0.8em; margin: 0; padding: 0; } #conteneur { position: absolute; width: 750px; left: 50%; margin-left: -375px; } #header { height: 50px; background-color: #99CCCC; } #haut { height: 30px; background-color:#CCCCFF; } #centre { background-color:#9999CC; } #pied { height: 30px; background-color: #99CC99; }.menuhaut { list-style-type: none; margin: 0; padding:0; }.menuhaut li { display: inline; }.menuhaut a { margin: 0 2px; color: #000000; text-decoration: underline; }.menuhaut a:hover { text-decoration: none; } p {margin: px 0;} header (voir tous les modèles) Menu 1 Menu 2 Menu 3 Menu 4 partie centrale qui "pousse" les colones vers le bas. partie avec du contenu occupant le reste de la largeur pied de page

15 TD

16 solution Largeur fixe 750, header/menu haut/contenu/footer. /* CSS issu des tutoriels css.alsacreations.com */ body { font-family: Verdana, Arial, Helvetica, sans- serif; font-size: 0.8em; margin: 0; padding: 0; } #conteneur { position: absolute; width: 750px; left: 50%; margin-left: -375px; } #header { height: 50px; background-color: #99CCCC; } #haut { height: 30px; background-color:#CCCCFF; } #centre { background-color:#9999CC; } #pied { height: 30px; background-color: #99CC99; }.menuhaut { list-style-type: none; margin: 0; padding:0; }.menuhaut li { display: inline; }.menuhaut a { margin: 0 2px; color: #000000; text-decoration: underline; }.menuhaut a:hover { text-decoration: none; } p {margin: px 0;} header (voir tous les modèles) Menu 1 Menu 2 Menu 3 Menu 4 partie centrale qui "pousse" les colones vers le bas. partie avec du contenu occupant le reste de la largeur pied de page