Remplacer les cadres par des calques

Rubrique 1 :
Rubrique 2 :
Rubrique 3 :
Rubrique 4 :
Rubrique 5 :
Rubrique 6 :

Contenu de la feuille de style :

a {color:blue; text-decoration:none; border:1px transparent;}

a:hover {color:red; border:1px inset;}

p {text-indent:13px; text-align:justify; padding-right:13px;}

h3 {color:#0000ff; margin:0; display:inline;}

h5 {font-variant:small-caps; margin:0;}

body {margin:0px; padding:0px; background-image:url(valimage/astufond.jpg); overflow:auto; font-family:"Ms sans serif";sans-serif;arial; font-size:14px;}

#tete {position:absolute; top:0; left:0; background-color:#ccffff; width:100%; height:4.5%; text-align:center; border-bottom:1px outset;}

#barre {position:absolute; top:5.5%; left:0; background-color:#ffffcc; width:16%; height:90%; padding-left:3px; text-align:left; overflow:auto;}

#corps {position:absolute; top:5.5%; right:0; background-image:url(valimage/astufond.jpg); width:80.5%; height:90%; overflow:auto;}

#pied {position:absolute; top:95.5%; left:0; background-color:#ccfccf; width:100%; height:4.5%; text-align:center; border-top:1px inset;}

Dans la pratique, comment faire ?

Vous pouvez placer les 3 calques de liens à n'importe quel endroit de votre page, à l'intérieur de la balise body. En effet, comme leurs règles sont "absolues", elles ne nécessitent pas un placement dans le flux de l'écriture. La meilleure technique, afin de ne pas se tromper dans l'édition de vos futures pages, consiste à les placer directement après la balise body (de votre page html, bien entendu !) et de prendre l'habitude d'écrire votre "contenu" dans le calque corps déjà prévu (écrit) dans votre modèle. En somme, vous prendrez l'habitude d'écrire "dans" une autre balise, tout simplement ...

Vous aurez maintenant compris que cette méthode est basée sur la répétition de pages identiquement structurées dont seul le contenu principal variera, de page en page. Sachant que le modèle de base de cet exposé "pèse" moins de 2000 octets, soit quelques dixièmes de seconde seulement pour un téléchargement par RTC, vos pages utilisant cette technique s'afficheront de manière aussi rapide que les autres. Oubliez donc dès maintenant les antiques frames !

Quelques précisions sont sans doute utiles :

Cette feuille de style est donc limitée au strict minimum. Elle est un exemple que vous pourrez adapter à votre mise en page définitive dont les "dimensions" seront probablement différentes. Rien ne vous empêche, par ailleurs, de créer une barre de liens supplémentaire sur le côté droit de la page : il suffit de s'inspirer du principe de base en adaptant alors les largeurs du corps à cette barre supplémentaire. Dans le cas présent, la feuille de style utilisant des dimensions relatives (%), elle s'affichera avec les mêmes proportions, quelle que soit la fenêtre (ou résolution d'écran) utilisée. Les seules (petites) différences pouvant être observées sont dues à la différence d'interprétation des bordures et espaces par nos navigateurs de test. Reste toutefois une petite restriction : la place prise par vos liens dans le calque pied. Faites en sorte qu'ils "tiennent" sur une seule ligne !

Activez le lien "Retour" du volet gauche pour revenir au sommaire de la rubrique !


Lien 1 | Lien 2 | Lien 3 | Lien 4 | Lien 5 | Lien 6 | Lien 7 | Lien 8 | Lien 9 | Lien 10 | Lien 11 | Lien 12 | Lien 13