|
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.
Les meilleures astuces CSS sur le JDN :
- Comment
appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment
centrer horizontalement une DIV dans une autre en CSS ?
- Comment
créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment
définir les cellpadding et cellspacing en CSS ?
- Comment
modifier l'image d'un bouton input en CSS ?
- Comment
rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de
cet élément opaque en CSS ?
- Internet
Explorer supporte-t-il l'attribut CSS border-radius
|
[