Discussion :

[Sub0]

Salut!

Nous connaissons tous que les consignes du W3C concernant les tableaux, seulement le problème que l'on peut rencontrer souvent...

QUESTION
Comment remplacer les tableaux par des conteneurs <div> afin d'obtenir un positionnement automatique centré dans la page et surtout, comment obtenir un conteneur qui s'ajuste à son contenu comme savent si bien le faire les tableaux...?

REPONSE

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div style="position:relative;right:50%;float:right;">
  <div style="position:relative;left:50%;">
    ...Votre contenu ici...
  </div>
</div>

Cette solution a été donnée par Candygirl. Dans ce sujet par exemple, vous verrez que la solution n'était pas aussi évidente que cela : Par défaut, le <div> s'étend sur toute la largeur de la page...
et float=center n'existe pas !

PS : N'hésitez pas à ajouter vos remarques à la suite de ce message.

Cordialement, Sub0

[Erwan31]

Bonjour SubO,
très intéressant en effet. Bravo CandyGirl , cela permet de s'affranchir
d'une largeur fixe obligatoire, que ce soit pour le centrage via marges auto ou via le positionnement absolue et marges négatives.

A noter qu'on peut obtenir pratiquement (variation de la largeur de l'élément centré différente lorsqu'on diminue le viewport) le même résultat avec le positionnement absolue:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="position: absolute; right:50%;">
  <div style="position:relative;left:50%; background:#009900">
    ...Votre contenu ici......Votre contenu ici......Votre contenu ici.......
  </div>

mais que si un contenu doit passer sous l'élément à centrer, alors la solution de CandyGirl est la seule possibilité:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div style="position: relative; float:right; right:50%;">
  <div style="position:relative;left:50%; background:#009900">
    ...Votre contenu ici......Votre contenu ici......Votre contenu ici.......
  </div>
</div>
  <div style="clear: right;">
    la Suite....
  </div>

[Sub0]

Merci de complèter cette QR car elle n'est terminée en fait, il manque encore quelques améliorations pour obtenir (à peu près) les mêmes comportements qu'un tableau... Par exemple, le centrage vertical du conteneur où Candygirl nous a encore montré ces talents de développeuse :

Le centrage vertical est plus problématique vu le comportement par défaut différent et la contrainte de l'utilisation des % liée à un height explicitement défini sur le parent.

Le display:table et table-celle est une bonne manière d'y parvenir, mis à part le non support par IE:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
html, body {
  display:table;
  width:100%;
  height:100%;
}
 
body {
  display:table-cell;
  vertical-align:middle;
}

On peut combler pour IE, par exemple à l'aide de JS directement injecté ds le css, via un commentaire conditionnel; qqch du genre:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!--[if IE]>
 
  <style type="text/css">
                div {
                        position:relative;
                        top:expression(document.body.clientHeight<=this.offsetHeight ? "0" : (document.body.clientHeight-this.offsetHeight)/2+"px");
                }
        </style>
<![endif]-->

Autrement si la hauteur est connue (contraignant), on peut utiliser la technique du margin négatif doublé du positionnement relatif, mais il faudra être attentif au cas critique ou l'élément est plus haut que la fenêtre (un min-height de la hauteur de l'élément suffit, il me semble, à règler le pb sauf sur IE6-).

Le plus simple à mettre en oeuvre et compatible tous nav niveau centrage vertical reste l'utilisation d'un tableau

Je ne savais même pas que l'on pouvait injecter un code JS dans du CSS...
Elle est très forte!

[Erwan31]

Intéressant... c'est vrai qu'on oublie parfois de passer par JS par purisme
ou du fait que l'on sait qu'environ 5% des utilisateurs auront JS désactivé
mais ces 5% ne sont pas prouvés, certains affirment que ce chiffre est excessif.
Bref en ce qui me concerne je trouve ça trop contraignant s'agissant de l'affichage. Le principale est de s'assurer que le cintenu et la navigation est bien accessible une fois JS désactivé.

Juste une remarque:
pour éviter l'apparition des scrollbars dans IE, ajouter un overflow:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
html, body {
  display:table;
  width:100%;
  height:100%;
  overflow:hidden;
}

Pour ma part je m'étais déjà penché avec un des membres d'Alscreations sur le centrage vertical de plusieurs lignes de texte en exploitant Inline-block (enfin implémenté par Firefox3!) et table-cell d'aprés mes souvenirs. Si ça vous intéresse...

Je ne savais même pas que l'on pouvait injecter un code JS dans du CSS...
Elle est très forte!

On l'utilise par exemple pour qu'IE6 gère la transparence des PNG 32 bits dans une feuille de style IE appelée via commentaire conditionnels. Mais attention à ne pas l'utiliser dans la CSS principale, je crois qu'injecter du JS dans une CSS fait perdre le mécanisme de mise en cache par le navigateur.

[Candygirl]

Le principale est de s'assurer que le cintenu et la navigation est bien accessible une fois JS désactivé.

+1

Pour ma part je considère le centrage vertical comme un "gadget" et n'estime donc pas dramatique si, pour les qq utilisateurs de IE à avoir désactivé le javascript, l'élément n'est centré qu'horizontalement; cela ne nuira pas à la consultabilité.

Autrement j'ai raté un mot dans mon text recopié ci-desssus. Je propose de mettre un min-height au body de la hauteur de l'élément pour s'affranchir du problème du contenu qui disparaît lors d'un redimensionnement de fenêtre inférieure à la taille de l'élément centré par le biais des marges négatives.

Oui, perso le centrage à l'aide d'un inline-block m'intéresse. Je n'ai jamais creusé la piste très à fond, dépitée par l'interprétation assez différente qu'en fesaient opera et IE

Elle est très forte!

Arf... je n'ai rien inventé ; je teste juste 2-3 idées qui me viennent en consultant d'autres sites. Par exemple je dois avoir découvert l'utilisation du expression() quand je cherchais à émuler max-width sur IE6 et que j'étais tombées sur ce site

[Erwan31]

Ok, pour le centrage vertical Gcyrillus a trouvé une solution ici:
http://yidille.free.fr//plux/valign/...vertical-align

Voila la solution que je proposais pour IE:

Dans le cas d'un texte de hauteur variable les choses se corsent un peu :
comme vertical-align se base sur la taille de font-zize, l'astuce consiste
à donner à l'élément parent (ici le <p>) une hauteur de font-zize
équivanvente à 100px (hauteur de ton image).

Appliquer ensuite un vertical-align:middle au texte n'aura en principe
pour effet que de centrer la boîte en-ligne (valeur font-size+interligne) de la première ligne du texte.
Un inline-block (non implémenté par Firefox) rectifira le tir en centrant
verticalement la boîte de ligne (le bloc de texte complet).

Certe c'est un peu tordu mais pourquoi aprés tout ne pas utiliser tout le potentiel de CSS pour arriver à ses fin.

Exemple de code avec commentaires :
Cette méthode suppose une taille de texte de base à 75% et une taille
de police du navigateur standard : 16px

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
p {font-size: 8.33em;} /* pour conserver une taille de police relative :16 x 0.75 x 8.33 = 100px*/
 
span.texte {
	display:inline-block;
	font-size: 0.12em; /*on récupère la taille par default : 12px*/
	vertical-align: middle;
}