Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Centrer un site qui utilise calques en absolus et tableaux

Compatible Dreamweaver. Cliquer pour en savoir plus sur les compatibilités.Par Nanoum (Anne Weisbeck), le 13 août 2005

Si les calques sont souvent utilisés pour créer des menus déroulants, il n'est pas toujours évident de les intégrer dans des pages contenant des tableaux qui serviront à centrer la page.

En effet, les calques sont déterminés par des positions fixes définies au pixel près, alors que les tableaux qui sont centrés n'auront pas de position fixe.

De plus, lorsque l'on insère directement des calques dans des tableaux, ceux-ci risquent généralement de décaler tous les autres éléments contenus dans ces tableaux.

Pour rappel, un calque a 2 types de positions par défaut sur Dreamweaver :

- absolute : la position de top et left se fait par rappport au coin supérieur gauche de la fenêtre du navigateur ou par rapport à la position du calque parent pour les calques imbriqués.

- relative : la position de top et left se fait par rapport à l'emplacement de la balise <div> dans le document mais dans ce cas, la position de chaque calque influera sur la position des calques qui le suivront dans la page.

Le plus simple est de réaliser son site en le laissant aligné à gauche pour que les éléments soient plus faciles à positionner les uns par rapport aux autres, et seulement une fois que les éléments seront tous en place, centrer le tout dans la page.

De base,Dreamweaver va déclarer tous les calques ensembles, ils sont les premiers éléments qui apparaissent dans le body (balise <div>).

Pour pouvoir insérer ses calques sans déranger la mise en page des autres éléments et de façon à ce que les calques suivent la position du tableau qui les contient, la meilleure solution est d'utiliser des calques imbriqués.

La hiérarchie des éléments de la page sera la suivante :

un tableau de taille fixe (celles de la page) centré avec dedans :

- un calque global qui comprendra tous les calques de la page

- un second tableau qui contient les autres éléments de la page

la méthode :

page de base composée de 3 calques et d'un tableau

1/ créer un nouveau calque et y insérer tous les calques de la page

il ne s'agit pas de déplacer les calques en eux même mais leur ancre dans la page, ceci engendrera un déplacement des calques dans l'apercu de dreamweaver mais la position qui leur aura été donnée au préalable sera retrouvée à la fin de l'opération.

au niveau du code, cela devrait ressembler à peu près à ceci :

<div id="global" style="...."> 

<div id="calque1" style="....">contenu du calque</div> 

<div id="calque2" style="....">contenu du calque</div> 

<div id="calque3" style="....">contenu du calque</div> 

<div id="calque4" style="....">contenu du calque</div> 

</div>

2/ donner au calque global les attributs suivants :

- hauteur et largeur égales à 0

- position par rapport à gauche et au bord supérieur égales à 0

- position en relative (ceci doit se modifier directement dans le code html changer position:absolute en position:relative)

position:relative; //pour que l'ensemble se déplace dans la page et reste centrée
 
top:0px;
 
left:0px; 
 
width:0px; 
 
heigth:0px; //pour conserver les positions d'origine des ?ments

Les calques ainsi que leurs ancres ne sont maintenant plus visibles dans l'apercu de dreamweaver, hormis l'ancre du calque global

Pour pouvoir accéder aux calques et les modifier, il suffit d'utiliser la fenêtre de mise en forme avancée qui répertorie tous les calques présents dans la page (Fenêtre>Autres>Calques).

cliquer sur le nom d'un calque le fera apparaitre

3/ créer un tableau d'une seule ligne et une colonne qui aura la largeur de la page et qui sera centré dans la fenêtre

Le contenu de cette unique cellule doit être aligné en haut à gauche.

La largeur de la page n'est pas celle de la fenetre du navigateur, il ne s'agit pas d'un tableau de 100% de large mais d'un tableau adapté à la largeur de tous vos éléments.

4/ insérer dans le tableau le calque général suivi du reste du contenu de la page

apercu du code :

<table width="720px" border="0" cellpadding="0" cellspacing="0" align="center">

<tr><td>



<div id="global" style="position:relative; left:0px; height:0px; top:0px; left:0px"> 

<div id="calque1" style="....">contenu du calque</div> 

<div id="calque2" style="....">contenu du calque</div> 

<div id="calque3" style="....">contenu du calque</div> 

<div id="calque4" style="....">contenu du calque</div> 

</div>



.... tout le reste de la page ....



</td></tr></table>

L'affichage dans la zone de création de dreamweaver ne gère pas les calques en position relative, il ne faut donc pas se fier à dreamweaver pour l'apercu mais le faire directement dans votre navigateur.

A la fin, on obtient donc un tableau centré qui contient toute la page.

Dans ce tableau, on a un calque général dont la position dépendra de l'emplacement du tableau dans la page, ce calque à une taille de 0*0 pour ne pas décaler les éléments de la page.

A l'intérieur de ce calque, on a tout les calques utilisés dans la page de telle sorte que ceux-ci puissent avoir une valeur absolue par rapport aux éléments de la page mais relative au tableau.

ATTENTION :!:

→ Les calques sont maintenant imbriqués, donc pour les manipuler sous Netscape 4, il faut une syntaxe différente que pour les calques ordinaires ! (voir le tutorial sur la manipulation de calques en javascript)

→ Netscape 4 risque également de ne plus reconnaître vos css dès que vous imbriquerez des calques. Pour palier ce problème, il suffit de définir chaque calque non plus avec un style mais avec une class de feuille de style.