« Le langage HTML/Zones de mise en forme » : différence entre les versions
Contenu supprimé Contenu ajouté
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 ==
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|<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<nowiki>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</nowiki>">
<html xmlns{{=}}"<nowiki>http://www.w3.org/1999/xhtml</nowiki>" xml:lang{{=}}"fr" >
<head>
<title>Titre</title>
<meta http-equiv{{=}}"Content-Type" content{{=}}"text/html; charset{{=}}iso-8859-1" />}}
{{vert|<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|</style>}}
{{gris|</head>
<body>}}
{{vert|<div}} class="un"{{vert|>}}
{{bleu|<p>}}menu{{bleu|</p>}}
{{vert|</div>}}
{{vert|<div}} class="deux"{{vert|>}}
{{bleu|<p>}}centre{{bleu|</p>}}
{{vert|</div>}}
{{vert|<div}} class="trois"{{vert|>}}
{{bleu|<p>}}bas de page{{bleu|</p>}}
{{vert|</div>}}
{{gris|</body>
</html>}}
== Voir aussi ==
|