Outils pour utilisateurs

Outils du site


public:asca:spip:xhtml-et-css

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

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:02]
pielo
public:asca:spip:xhtml-et-css [2013/01/22 10:36] (Version actuelle)
pielo
Ligne 1: Ligne 1:
-====== Formation SPIP - xhtml et css ======+~~ODT~~ 
 + 
 + 
 +====== Formation xhtml et css ======
  
 ===== Fichier xhtml ===== ===== Fichier xhtml =====
Ligne 51: Ligne 54:
 </html> </html>
 </code> </code>
 +
 +
 +
 +
  
  
Ligne 75: Ligne 82:
  <p>Ceci est mon deuxième paragraphe.  <p>Ceci est mon deuxième paragraphe.
  <i>texte en italique</i>  <i>texte en italique</i>
- <b>texte en gras</b> 
  <br />  <br />
  Ce bout de texte est <sup>en exposant</sup>  Ce bout de texte est <sup>en exposant</sup>
Ligne 100: Ligne 106:
  <li>item 4</li>  <li>item 4</li>
  </ul>  </ul>
- <code> 
- Ce texte est affiché tel quel 
- avec une police monotype 
- </code> 
  <cite>  <cite>
  Ceci est une citation  Ceci est une citation
  </cite>  </cite>
- <a href="http://www.syllene.net" target="_blank" >Lien vers Syllene</a>+ <a href="http://www.free.fr" target="_blank" >Lien vers Free</a>
  <a href="../index.html">Lien vers ma page actuelle</a>  <a href="../index.html">Lien vers ma page actuelle</a>
  <img src="./tux.png" alt="Manchot tux" />  <img src="./tux.png" alt="Manchot tux" />
Ligne 171: Ligne 173:
  font-size: 25px;  font-size: 25px;
  }  }
 +</code>
 +
 +
 +
 +===== Une mise en page avec des flottants =====
 +
 +Voici le code commenté xhtml et css :
 +
 +<code html>
 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
 +<head>
 +  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +  <title>
 +    Formation xhtml et css
 +  </title>
 + <link rel="stylesheet" media="all" type="text/css" href="style.css" />
 +</head>
 +<body>
 + <div id="conteneur">
 + <div id="bandeau">
 + <div class="blockbandeau">
 + </div>
 + <div class="blockbandeau">
 + </div>
 + <div class="blockbandeau">
 + </div>
 + <p>Ce texte flotte à droite des blocs précédents</p>
 + <hr />
 + <p>Ce texte est placé sous les blocs précédents</p>
 + </div>
 + <div id="menu">
 + <ul>
 + <li>Item1</li>
 + <li>Item2</li>
 + <li>Item3</li>
 + </ul>
 + </div>
 + <div id="contenu">
 + <div class="blockcontenu">
 + </div>
 + <div class="blockcontenu">
 + </div>
 + <div class="blockcontenu">
 + </div>
 + </div>
 + <div id="pied">
 + <p>C'est le pied</p>
 + </div>
 + </div>
 +</body>
 +</html>
 +
 +</code>
 +
 +
 +**style.css**
 +
 +<code css>
 +body {
 + font-family: sans-serif;
 + font-size: 80%;
 + background-color: grey;
 +}
 +
 +#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'adapte aux flottants qui le constituent
 + Sans cette propriété, ce bloc aurait une hauteur nulle.
 + */
 + overflow: hidden; 
 +}
 +
 +/*
 + Tous les blocs qui suivent ont la propriété float: left
 + Si bien que leur hauteur s'adapte automatiquement aux floats qu'ils contiennent
 +*/
 +
 +#bandeau {
 + float: left;
 + width: 100%;
 + background-color: yellow;
 +}
 +
 +div.blockbandeau {
 + float: left;
 + width: 25%;
 + height: 100px;
 + background-color: blue;
 +}
 +
 +#menu {
 + float: left;
 + width: 100%;
 + background-color: fuchsia;
 +}
 +
 +#contenu {
 + float: left;
 + width: 100%;
 + background-color: red;
 +}
 +
 +div.blockcontenu {
 + float: left;
 + width: 300px;
 + margin-left: 10px;
 + height: 150px;
 + background-color: maroon;
 +}
 +
 +#pied {
 + float: left;
 + width: 100%;
 + background-color: navy;
 +}
 +
 +/*
 + 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: hidden;
 +}
 </code> </code>
public/asca/spip/xhtml-et-css.1258196547.txt.gz · Dernière modification: 2009/11/14 12:02 de pielo