Dans cet exemple, nous allons apprendre à centrer une zone sur une page (1 site est avant tout une zone centrée sur une page, comprenant d'autres zones).
Pour cela, nous allons créer deux nouveaux fichiers : centre.html & centre.css
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Centre</title> <link rel="stylesheet" href="centre.css"> </head> <body> <div id="conteneur"> <div class="a">Zone A</div> <div class="b">Zone B</div> </div> </body> </html>
#conteneur{ width: 960px; /* largeur */ background: #F4C400; /* fond */ margin: 0 auto; /* marges */ padding:30px; /* espacement interne du conteneur */ } .a, .b{ height: 150px; /* hauteur */ width: 450px; /* largeur */ border: 2px solid; /* bordure */ margin:0 10px; /* espacement horizontal entre les blocs */ display:inline-block; /* inline block rend le vertical align possible. */ vertical-align: middle; /* alignement vertical des zones a et b par rapport à #conteneur. }
Voyons à présent la différence dans les unités de mesure entre les pixels et les pourcentages
Pour cela, nous allons créer deux nouveaux fichiers : pourcentage.html & pourcentage.css
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Pourcentage</title> <link rel="stylesheet" href="pourcentage.css"> </head> <body> <div class="taillefixe">Fixe</div> <div class="taillevariable">Variable</div> </body> </html>
.taillefixe{ width: 1000px; border: 2px solid #cb3d3d; } .taillevariable{ width: 100%; border: 2px solid #336699; }
Nous allons étudier la position absolute.
Pour cela, nous allons créer deux nouveaux fichiers : absolute.html & absolute.css
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Absolute</title> <link rel="stylesheet" href="absolute.css"> </head> <body> <p class="vert"> Bonjour ! </p> </body> </html>
p{ margin: 0; } .vert{ color: #21c165; position: absolute; top: 50%; left: 0px; font-weight: bold; }
Bonjour !
p{ margin: 0; } .vert{ color: #21c165; position: absolute; bottom: 0; right: 0; font-weight: bold; }
Nous allons étudier la position relative. Pour cela, nous allons créer deux nouveaux fichiers : relative.html & relative.css
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Relative</title> <link rel="stylesheet" href="relative.css"> </head> <body> <div id="zone"> <p> Bonjour tout le monde </p> <p class="vert"> Salut! </p> </div> </body> </html>
p{ margin: 0; } .vert{ color: #21c165; position: relative; top: 1px; left: 30px; } #zone{ border: 2px solid #336699; }
Bonjour tout le monde
Salut !
La position fixed est particulièrement pratique et à la mode sur certains sites.
Le plus connu d'entres eux : Facebook.
Vous ne l'avez jamais remarqué ? Lorsque vous naviguez dans les actualités et que vous rentrez dans la profondeur des pages, le menu reste constament affiché en haut de site.
Pour étudier ce cas, nous allons créer deux nouveaux fichiers : fixed.html & fixed.css
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Fixed</title> <link rel="stylesheet" href="fixed.css"> </head> <body> <nav>Menu</nav> <div id="contenu"> *** SAISIR (ou copier/coller :p) 100 LIGNES DE TEXTE ICI, CELA EST IMPERATIF POUR CET EXEMPLE *** </div> </body> </html>
nav{ background: #dea5a5; /* fond */ position: fixed; /* Le menu a une position fixe lors de la descente dans la page */ text-align: center; /* alignement du texte centré */ width: 100%; /* largeur 100% de la fenêtre */ top: 0; /* aligné à 0px du haut */ left: 0; /* aligné à 0px de la gauche */ } #contenu{ border: 2px solid #336699; /* bordure */ margin: 30px 0 0 0; /* marges haut droite bas gauche */ }
Nous allons étudier les positions float avec float left, float right, float center
ainsi que la propriété clear
avec clear left, clear right
et clear both
.
La propriété float left
est particulièrement utile pour placer deux zones côté à côte. (ce qui arrive fréquement dans un site web).
Pour cela, nous allons créer deux nouveaux fichiers : float.html & float.css
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Float</title> <link rel="stylesheet" href="float.css"> </head> <body> <div class="d1"> 1 </div> <div class="d2"> 2 </div> <div class="d3"> 3 </div> <div class="d4"> 4 </div> <div class="clear"></div> <div class="d5"> 5 </div> <div class="d6"> 6 </div> <div class="d7"> 7 </div> <div class="clear"></div> <div class="d8"> 8 </div> <div class="d9"> 9 </div> <div class="clear"></div> <div class="d10"> 10 </div> </body> </html>
.d1 ,.d2,.d3,.d4 ,.d5,.d6,.d7 ,.d8 ,.d9 ,.d10 { float: left; width: 170px; height: 170px; text-align: center; border: 1px solid #000000; } .clear{ clear: both; }
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Float</title> <link rel="stylesheet" href="float-left.css"> </head> <body> <div class="d1"> 1 </div> <div class="d2"> 2 </div> <div class="clear"></div> </body> </html>
.d1 ,.d2{ float: left; width: 170px; height: 170px; text-align: center; border: 1px solid #000000; } .clear{ clear: both; }
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Float</title> <link rel="stylesheet" href="float-right.css"> </head> <body> <div class="d1"> 1 </div> <div class="d2"> 2 </div> <div class="clear"></div> </body> </html>
.d1 ,.d2{ float: right; width: 170px; height: 170px; text-align: center; border: 1px solid #000000; } .clear{ clear: both; }
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Float</title> <link rel="stylesheet" href="float-left-right.css"> </head> <body> <div class="d1"> 1 </div> <div class="d2"> 2 </div> <div class="clear"></div> </body> </html>
.d1{ float: left; width: 170px; height: 170px; text-align: center; border: 1px solid #000000; } .d2{ float: right; width: 170px; height: 170px; text-align: center; border: 1px solid #000000; } .clear{ clear: both; }
HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web