Etape n°1
Voici la page sans style.
C'est ce que les navigateurs anciens ou orientés "texte" afficheront si la feuille de style est liée à l'aide de @import "file.css";
Le contenu est encadré par des balises DIV (ou P). Des balises DIV (ou P) supplémentaires encadrent le texte pour régler des problèmes avec quelques navigateurs.
Le menu utilise une liste1.
Voici notre texte à mettre en page :
Un titre pour un tableau avec trois colonnes
Gauche
Centre
Droite
Le texte disparaît
s'il dépasse
les possibilités de l'écran
afin de conserver
l'alignement.
Un titre pour un tableau avec deux colonnes
Colonne de gauche large
colonne étroite
texte centré
caractères gras
Une colonne à gauche occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.
Une colonne à droite occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.
Passons à l'étape 2.
L'affichage final de cette page sera compatible avec MSIE 6, Mozilla, Mozilla Firefox, Netscape 6, 7 et 8 ainsi qu'Opera 6, 7, 8 et 9, Konqueror 3.2, Safari, Galeon, Epiphany et à peu près convenable avec MSIE 5.5 et 5 et Opera 5.Cette page respectera les spécifications XHTML et CSS2 et n'utilisera pas de javascript.
1 CSS cutting edge propose d'autres solutions sans liste pour des menus horizontaux et verticaux.
1 Autres solutions pour des menus horizontaux et verticaux.