« Le langage HTML/Zones de mise en forme » : différence entre les versions

Contenu supprimé Contenu ajouté
Tavernier (discussion | contributions)
m Révocation des modifications de 88.168.12.216 (retour à la dernière version de Tavernierbot)
Ligne 149 :
Lorsque l'on travaille avec un bloc à part avec un <code><nowiki><div></nowiki></code>, on peut définir avec le CSS les différentes balises usuelles dans le <code><nowiki><div></nowiki></code> choisi. D'une manière plus simple il y a une cohérence entre forme et fond.
 
== Mise en application ==
j'ai tout cassé ?
 
Voici un exemple de styles de mise en forme avec un menu, un centre de page et un bas de page. La page se compose de trois calques <code><nowiki><div></nowiki></code> les uns derrière les autres. Les blocs sont modulables : peu importe l'ordre dans lequel on les écrit, on obtient le même rendu final.
 
{{gris|&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<nowiki>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</nowiki>">
&lt;html xmlns{{=}}"<nowiki>http://www.w3.org/1999/xhtml</nowiki>" xml:lang{{=}}"fr" >
&lt;head>
&lt;title>Titre</title>
&lt;meta http-equiv{{=}}"Content-Type" content{{=}}"text/html; charset{{=}}iso-8859-1" />}}
{{vert|&lt;style}} type="text/css"{{vert|>}}
{{bleu|.un
{}}
position: absolute;
top: 20px; left: 20px; width: 100px; height: 100px
{{bleu|} }}
{{bleu|.deux
{}}
position: absolute;
top: 20px; left: 50%; width: 100px; height: 200px
{{bleu|} }}
{{bleu|.trois
{}}
position: absolute;
bottom: 20px; left: 20px; width: 100px; height: 20px
{{bleu|} }}
{{vert|&lt;/style>}}
{{gris|&lt;/head>
&lt;body>}}
{{vert|&lt;div}} class="un"{{vert|>}}
{{bleu|&lt;p>}}menu{{bleu|&lt;/p>}}
{{vert|&lt;/div>}}
{{vert|&lt;div}} class="deux"{{vert|>}}
{{bleu|&lt;p>}}centre{{bleu|&lt;/p>}}
{{vert|&lt;/div>}}
{{vert|&lt;div}} class="trois"{{vert|>}}
{{bleu|&lt;p>}}bas de page{{bleu|&lt;/p>}}
{{vert|&lt;/div>}}
{{gris|&lt;/body>
&lt;/html>}}
 
== Voir aussi ==