|
Une mise en
page complexe en HTML implique souvent l'utilisation de multiples
tableaux imbriqués, alourdissant le code et rendant toute
modification fastidieuse.
Pourtant, la puissance des spécifications CSS2 permet d'aboutir
à des résultats similaires (et même, dans la
plupart des cas, plus aboutis) en quelques lignes. L'approche offre
deux avantages:
- tout ce qui concerne la mise en page (la "feuille de style")
est séparé du contenu: les modifications sont donc
grandement facilitées;
- le code HTML entre les balises <BODY> et </BODY> est
réduit à quelques balises seulement (dans notre exemple,
nous utiliserons cinq d'entre elles: <DIV>, <H1>, <P>,
<A> et <PRE>): en particulier, il n'y a plus de balises
<TABLE>, <TR>, <TD>, <B>, <FONT> etc...
Nous ne revenons pas sur les règles CSS et CSS2 qui
ont fait l'objet d'une série d'articles dans nos colonnes.
Nous allons définir le contenu HTML suivant:
<div id="header">JDNET Développeurs</div>
<div id="colgauche" style="">
<p>
<a href="#">CSS</a><br><a href="#">Javascript</a><br>
<a href="#">XML</a><br><a href="#">PHP</a>
</p>
</div>
<div id="corps">
<h1>S'affranchir des tableaux HTML avec CSS2</h1><br>
<p>
Un exemple de positionnement d'éléments CSS2 permettant
de concevoir une mise en page au pixel près sans l'utilisation
de tableaux HTML. Il est possible de sélectionner un autre
fichier CSS2 en cliquant <a href="#">ici</a>.<br><br>
Voici le fichier css correspondant à la mise en page que
vous observez actuellement:
</p>
<br>
<pre>
[Affichage du contenu de la feuille de style]
</pre>
</div>
Sans feuille de style, son affichage donne ceci.
Avec une première feuille de style définissant les
éléments "header" (en-tête
de page), "colgauche" (colonne de menu habituellement
située à gauche) et "corps" (texte
propre à la page), ainsi que les règles concernant
<H1> (titres), <P> (paragraphes), <A> (liens)
et <PRE> (code), on obtient ceci.
On remarquera que le redimensionnement de la fenètre du navigateur
s'accompagne en outre de l'ajustement des tailles des élements
(colonne de gauche en taille fixe, "header" et corps en
taille variable) à la taille de celle-ci.
Pour modifier la présentation de la page, il suffira de changer
le fichier .css contenant la feuille de style (dans nos pages d'exemple,
le style est inséré directement entre les balises
<HEAD>...<STYLE> et </STYLE>...</HEAD>,
mais il bien sûr possible d'utiliser un fichier externe).
Une mise en page totalement différente (et où la "colonne
de gauche" est maintenant à droite!), peut être
observée
ici.
Tout cela sans toucher au "contenu" HTML (si ce n'est
le texte entre les balises <PRE> et </PRE>, qui n'a
aucune influence sur la mise en page).
Ces exemples illustrent l'étendue des possibilités
qui s'offrent aux webmasters et aux webdesigners: avec un peu d'imagination,
il sera très facile d'aboutir à des résultats
stupéfiants et parfaitement maîtrisés.
|
[