Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Centrer une page à l'aide d'un tableau

Compatible Dreamweaver MX. Cliquer pour en savoir plus sur les compatibilités.Par gto, le 10 septembre 2005

Sans hésiter, au risque de me répéter, en terme de compatibilité, outre les CSS, les tableaux restent toujours une solution “presque” sûre !

Attention : cette technique ne doit pas être utilisée en XHTML. Les tableaux ne doivent normalement contenir que des données et pas être utilisés dans le but de mettre en page un site.

Par exemple :

Dans Dream :

  • Créer une page
  • Faire ctrl+J → Propriétés de la page
  • Dans les 4 champs avec le mot “Marges” → Mettre 0 (zéro)
  • Valider

Dans la page :

  • Créer 1 tableau d' 1 cellule
  • Comme taille du tableau, Mettre :

largeur = 100%

  • Séléctionner le tableau en cliquant sur le contour bas du tableau

Dans l'inspecteur des propriétés :

hauteur (H) = 100%

Pendant qu'on y est : Mettre les 3 cases de droite à 0 (zéro) : Ainsi, les bords du tableau seront invisibles dans le navigateur

Dans la page : Séléctionner la cellule en faisant : ctrl+clic gauche (n'importe où dans le tableau/cellule)

  • Dans l'inspecteur des propriétés :
Horz =  Centrer
  Vert = Milieu 

Dans ce tableau :

  • Créer (insérer) autant de tableaux “imbriqués” que l'on souhaite!

Centrer un seul calque : A la suite de ce qui a été fait ci-dessus…

Dans Dream :

  • Créer (insèrer) un calque
  • Le tableau se décale vers le bas (Disons, qu'il apparaît une marge en haut de la page). C'est normal.

Cette marge permet de faire apparaître une balise jaune en haut à gauche, c'est une balise invisible indiquant à Dream qu'il y a un calque dans la page.

  • Cliquer sur cette balise, ou le calque directement

  • Faire Ctrl+X (couper)
  • Cliquer dans le tableau
  • Faire Ctrl+V (coller)

Le calque est toujours là, mais la balise est centrée dans le tableau, et la marge du haut a disparue

  • Mettre une couleur de fond
  • Sélectionner ce calque
  • Rentrer dans la partie “Code”

  • Dans la partie de surligner (le début) :

<div id=“Layer1” style=“position:absolute; left:279px…etc…

  • Changer la position : “relative” à la place “d'absolute”

Dans l'inspecteur des propriétés :

  • Retirer les valeurs de “G” et “S”

  • Ouvrir le navigateur (F12), redimensionner la fenêtre, le calque reste centré, malgré la taille de la fenêtre.