5 pistes pour centrer en X,Y vos pages

5 gabarits : comment centrer en x,y leur contenu

présentation de 5 gabarits

Chacun d'eux auront en commun la necessité de pouvoir transmettre la hauteur de la fenetre aux elements centreurs ou conteneur principal .

  1. Piste avec un conteneur etirable
    1. Un tableau d'une cellule .
    2. display:table; .
    3. display:inline-block .
  2. Piste avec conteneur a dimensions fixes
    1. position:absolute; et marges automatiques .
    2. position:absolute; et marges négatives .(avec Annulation des defauts dans les pages gabarits)

Pour chacun de ces test , des alternatives seront tenté pour les navigateurs incapable d'appliqué les techniques proposés .

Pour telecharger ou tester ces gabarits : allez au bas de cette page .

Contenus centrés , pistes et solutions .

Cette page ne reflete que l'aspect visuel obtenu , dans les gabarits , les CSS s'appuie sur les 2 elements parent principaux : HTML et BODY .

Inspirez vous des gabarits pour vos pages .

conteneurs extensibles

Le conteneur se centre ou fait apparaitre une barre de scroll de façon classique .

Un tableau

PASSE-PARTOUT

Technique de centrage s'appuyant sur le comportement naturel d'un cellule de tableau , aucune difficulté .

- © 2005 2008 Pied de page !

display : table ;

IE : OUT

Cette technique confere aux elements html cibles les caracteristiques d'un tableau , ce n'est pas compatible avec IE 7 et inferieurs (IE8 ?)

- © 2005 2008 Pied de page !

Alternative au display:table: le cas IE

Une alternative basé sur le display:inline-block; va permettre d'obtenir un comportement similaire voir : Complement au vertical-align .

Cela necessite l'introduction dans le code html d'un element adjacent a celui que l'on veut centé et d'une hauteur equivalente a la fenêtre. .

En faisant usage de la techniques des fausses colonnes , on peut sur cette base , simulé un faux tableau , fluide et centré (2 colonnes avec des bordures graphiques ) : gabarit faux tableau et bordures graphique .

display : inline-block; .

FF <3 : OUT

Architecture de 2 elements en inline-block alignés cote à cote

une correction pour IE

Alternative pour FF 2 et inf avec l'ajout d'un element tampon et d'une régle proprietaire.

- © 2005 2008 Pied de page !

Cette technique reprend l'alternative proposé pour IE au gabarit:display:table;

Un premier element tampon est introduit dans le code html egal a la hauteur de la fenêtre , cette element et le conteneur s'aligneront en leur centre vertical .

Un second élément tampon est inséré dans le code html , il s'imbrique entre le conteneur global (que l'on centre) et son contenu .

Ce second element tampon a plusieurs fonction :

  1. evite l'empilement des elements les uns sur les autres dans Firefox
  2. permet de contenir le retour a white-space:normal; a l'interieur de l'element conteneur .

En effet , la regle white-space est utilisé pour conserver le conteneur et le premier element tampon cote à cote . D'abord en nowrap sur html,body , puis avec retour a la normal au niveau du second element tampon .

(IE applique le white-space a l'exterieur de la balise concerné , les autres a l'intérieur seulement) .

conteneurs a hauteur fixe

le conteneur affiche une barre de scroll .

Position absolue !

IE : OUT

technique s'appuyant sur le positionnement en absolue et paradoxalement les marges automatiques , IE 7 n'applique ces regles qu'en partie .

- © 2005 2008 Pied de page !

Pour convaincre IE a se comporter de façon quasi similaire , on peut le refaire basculer dans un mode proche du display:inline-bloc; et en position:static; (vu ci-dessus) ou passer a la technique suivante ; en usant des marges négatives

Position absolue et marges négatives

PASSE PARTOUT , DEFAUTS

technique s'appuyant sur le positionnement en absolue et les marges négatives

Le gabarits se defait des défauts importants .

- © 2005 2008 Pied de page !

trions ces options

récapitulatif

le tableau
Solution idéales , autant pour un conteneur de tailles fixe ou fluide
display:table;

Cette option necessite une surcharge html et css pour inclure une version proche du rendu dans IE

A évité car compliqué et sujette a bugs ou erreurs de mise en place

display:inline-block;

Cette option necessite une surcharge css pour inclure IE et les versions de Firefox 2 et inférieur .

Demande assez peu de rigueur pour etre mise en place , il faut connaitre l'usage des commentaires conditionnels pour IE .

Serait une solution a privilégier a long terme .
position:absolute; et marges automatiques
Solution a evité car impossible a mettre en oeuvre dans IE , une alternative sur le display:inline-block; est envisageable (alors se tourné vers celle-ci pour tous) ou sur se tournée vers les marges négatives
position:absolute; et marges négatives
Solution possible , Pensé a contrecarré les defauts avec min-width et min-height et des correctifs pour IE7 et 6 .

Que reste t-il ?

Reste , A.M.H.A :

  1. le tableau
  2. display:inline-block;
  3. position:absolute; et marges négatives

Pour telecharger ces gabarits , clique droit sur leur lien respectif et choissisez : Enregistrer la cible du lien ... ou pour tester avant , cliquez sur le lien , puis , menu -> fichier -> Enregistrer la page sous .. .

  1. gabarit Le tableau .
  2. gabarit Le display:table; et son alternatives IE .
  3. gabarit Le display:inline-block et ses correctifs .
  4. gabarit Le Position:absolute; en marges automatique + alternative IE .
  5. gabarit Le Position:absolute; en marges negatives avec corrections du defaut lié aux marges négatives .

Les navigateurs testés :

  • Firefoxe :2 et 3
  • Chrome et Safari pour windows
  • Internet Eplorer :6 et 7
  • Opera 9+

Ecrire un commentaire




Quelle est la deuxième lettre du mot uozcc ?