Positionnement de boîtes bloc pour un site au design FLUID (%) "En-tête, 3 colonnes, Pied de page" Tél: +41 22 / 388-33-14 François Daniel Giezendanner,

Présentation au sujet: "Positionnement de boîtes bloc pour un site au design FLUID (%) "En-tête, 3 colonnes, Pied de page" Tél: +41 22 / 388-33-14 François Daniel Giezendanner,"— Transcription de la présentation:

1 Positionnement de boîtes bloc pour un site au design FLUID (%) "En-tête, 3 colonnes, Pied de page" Tél: +41 22 / 388-33-14 François Daniel Giezendanner, Tél: +41 22 / 388-33-14 francois-daniel.giezendanner@edu.ge.ch SEM Prospective, Service Ecoles et Médias, DIP-Genève Formation continue, cours 335 29 septembre 2005 2-4, rue Théodore-de-Bèze

2 Site au design FLUID : En-tête, 3 colonnes, Pied de page Positionnement des bo î tes bloc é l é mentaires

3 <!--.entete { position: static; padding: 0px; margin: 0px; height: auto; width: 100%; background-color: #CCFFCC; }.gauche { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFBEEB; }.droite { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFFF66; }.centre { position: static; margin: 0px; padding: 0px; width: 50%; background-color: #33FFFF; }.pieddepage { position: static; margin: 0px; padding: 0px; height: auto; width: 100%; background-color: #9BDAA7; } --> <!--.entete { position: static; padding: 0px; margin: 0px; height: auto; width: 100%; background-color: #CCFFCC; }.gauche { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFBEEB; }.droite { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFFF66; }.centre { position: static; margin: 0px; padding: 0px; width: 50%; background-color: #33FFFF; }.pieddepage { position: static; margin: 0px; padding: 0px; height: auto; width: 100%; background-color: #9BDAA7; } -->

4 .entete { position: static; padding: 0px; margin: 0px; height: auto; width: 100%; background-color: #CCFFCC; }.gauche { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFBEEB; }.centre { position: static; margin: 0px; padding: 0px; width: 50%; background-color: #33FFFF; }.entete { position: static; padding: 0px; margin: 0px; height: auto; width: 100%; background-color: #CCFFCC; }.gauche { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFBEEB; }.centre { position: static; margin: 0px; padding: 0px; width: 50%; background-color: #33FFFF; }.droite { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFFF66; }.pieddepage { position: static; margin: 0px; padding: 0px; height: auto; width: 100%; background-color: #9BDAA7; }.droite { position: static; margin: 0px; padding: 0px; width: 25%; background-color: #FFFF66; }.pieddepage { position: static; margin: 0px; padding: 0px; height: auto; width: 100%; background-color: #9BDAA7; }

5

6

7

8

9

10

11

12

13 Positionnement des bo î tes bloc é l é mentaires Inclusions de bo î tes Propriété overflow : hidden, scroll, visible ou auto

14

15

16

17

18

19