Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
public:asca:spip:xhtml-et-css [2009/11/14 12:03] pielo |
public:asca:spip:xhtml-et-css [2013/01/22 10:36] (Version actuelle) pielo |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== Formation | + | ~~ODT~~ |
+ | |||
+ | |||
+ | ====== Formation xhtml et css ====== | ||
===== Fichier xhtml ===== | ===== Fichier xhtml ===== | ||
Ligne 51: | Ligne 54: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | |||
Ligne 76: | Ligne 82: | ||
< | < | ||
< | < | ||
- | < | ||
<br /> | <br /> | ||
Ce bout de texte est < | Ce bout de texte est < | ||
Ligne 104: | Ligne 109: | ||
Ceci est une citation | Ceci est une citation | ||
</ | </ | ||
- | <a href=" | + | <a href=" |
<a href=" | <a href=" | ||
<img src=" | <img src=" | ||
Ligne 168: | Ligne 173: | ||
font-size: 25px; | font-size: 25px; | ||
} | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Une mise en page avec des flottants ===== | ||
+ | |||
+ | Voici le code commenté xhtml et css : | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | <html xmlns=" | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | < | ||
+ | Formation xhtml et css | ||
+ | </ | ||
+ | <link rel=" | ||
+ | </ | ||
+ | < | ||
+ | <div id=" | ||
+ | <div id=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | < | ||
+ | <hr /> | ||
+ | < | ||
+ | </ | ||
+ | <div id=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | <div id=" | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | </ | ||
+ | </ | ||
+ | <div id=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | **style.css** | ||
+ | |||
+ | <code css> | ||
+ | body { | ||
+ | font-family: | ||
+ | font-size: 80%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | #conteneur { | ||
+ | width: 1000px; | ||
+ | margin: 0 auto; | ||
+ | /* | ||
+ | Ce bloc n'a pas la propriété float: left -> Il est dans le flux. | ||
+ | La propriété suivante fait en sorte que la hauteur de ce block s' | ||
+ | Sans cette propriété, | ||
+ | */ | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | Tous les blocs qui suivent ont la propriété float: left | ||
+ | Si bien que leur hauteur s' | ||
+ | */ | ||
+ | |||
+ | #bandeau { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | div.blockbandeau { | ||
+ | float: left; | ||
+ | width: 25%; | ||
+ | height: 100px; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | #menu { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | #contenu { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | div.blockcontenu { | ||
+ | float: left; | ||
+ | width: 300px; | ||
+ | margin-left: | ||
+ | height: 150px; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | #pied { | ||
+ | float: left; | ||
+ | width: 100%; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | La définition suivante pour la balise hr sert à supprimer le flottement du contenu qui suit directement cette balise | ||
+ | */ | ||
+ | |||
+ | hr { | ||
+ | clear: both; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | height: 0; | ||
+ | visibility: | ||
+ | } | ||
</ | </ |