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-8859-1">

Présentation au sujet: "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-8859-1">"— Transcription de la présentation:

1 1 Modèles

2 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 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="http://css.alsacreations.com/Modeles-de- 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 3 Le conteneur.conteneur { /*le conteneur global du site, qui sera centré */ width: 750px; position: absolute; left: 50%; margin-left: -385px; }

4 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 5.header.header { height: 100px; background-color: #99CCCC; }

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

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

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

9 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 10.footer.footer { height: 20px; background-color: #99CC99; }

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

12 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 13 TD

14 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: 0 0 10px 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 15 TD

16 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: 0 0 10px 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