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;
}

[Candygirl]

Erwan, merci pour ton lien et ton code que j'ai enfin pris le temps de tester.

La solution de Gcyrillus semble intéressante pour centrer 2 éléments entre eux, cependant, en attribuant un height au div (qui ne devrait pas être pris en compte vu le display:inline, mais bon; c'est IE ), les éléments ne sont pas centrés dans leur conteneur , ce que je cherche personnellement comme résultat.

Ta solution est une jolie astuce , mais elle impose, indirectement, l'attribution d'une hauteur, tout comme le centrage par les marges négatives.

Bref, pas de solutions tout css idéales à mon sens.

Vu que IE8 implémente le display:table (du moins d'après leurs dires), je ne vais pas me prendre la tête plus longtemps dessus et espérons qu'IE8 sera à la hauteur du display:table tout comme FF3 pour le display:inline-block

[Erwan31]

La solution de Gcyrillus semble intéressante pour centrer 2 éléments entre eux, cependant, en attribuant un height au div (qui ne devrait pas être pris en compte vu le display:inline, mais bon; c'est IE ), les éléments ne sont pas centrés dans leur conteneur , ce que je cherche personnellement comme résultat.

Salut Candygirl,
merci pour ton retour
Je n'ai pas le temps de me replonger dans l'astuce de Gcrillus mais ce que je peux te dire c'est que les éléments inline en mode Quirks acceptent les propriétés de taille que ce soit IE ou un autre.

Ta solution est une jolie astuce , mais elle impose, indirectement, l'attribution d'une hauteur, tout comme le centrage par les marges négatives.
Bref, pas de solutions tout css idéales à mon sens.

Oui comme tu dis, d'autant plus que d'aprés mes souvenir je n'étais pas parvenu à centrer verticalement une image avec cette méthode.
Parfois mieux vaut se servir d'un bon vieux tableau de mise en forme bien linéarisé qui fera très bien l'affaire.

Vu que IE8 implémente le display:table (du moins d'après leurs dires), je ne vais pas me prendre la tête plus longtemps dessus et espérons qu'IE8 sera à la hauteur du display:table tout comme FF3 pour le display:inline-block

Ah bonne nouvelle, je ne connais pas encore le support CSS d'IE8 mais je sais
que le haslayout va enfin disparaitre puisque le moteur de rendu va être revu en entier.
Ceci dit si on voit a plus court terme, Firefox 3 implémente enfin le dsiplay:inline-block ...

[Candygirl]

Ah bonne nouvelle, je ne connais pas encore le support CSS d'IE8 mais je sais
que le haslayout va enfin disparaitre puisque le moteur de rendu va être revu en entier.

Merci pour l'info concernant la problématique du haslayout c'est justement la question que je me posais. Cela semble alors confirmé ce que j'ai toujours pensé: IE8 sera basé sur un autre moteur ou ne sera pas

Je dois dire que j'ai été surprise de voir qu'IE8 va déjà sortir en béta, qu'il passe le acid2 (même si ce n'est qu'une indication discutable) et qu'il implémente enfin les pseudo-class :before et :after (entre autres). Microsoft semble avoir réagi vite et compris qu'adopter les standards était leur seule chance de rester présent en avant-plan sur la scène des navigateurs. Ont-ils ainsi fait une croix sur la sacro-sainte rétrocompatibilité qui les a, à mon avis, fait prendre ce retard ? Ou alors va-t-il englober aussi l'ancien moteur de rendu?

Suivant la vitesse de sortie d'IE8, IE7 pourrait devenir anégdotique, puisque IE8 sera aussi sur XP (j'avais peur qu'il soit limité à vista). Enfin; on peut toujours rêvé

Edit:
Arf, en fait la béta est disponible depuis qujourd'hui je crois:
http://www.microsoft.com/windows/pro...ss/default.htm

[Erwan31]

Je dois dire que j'ai été surprise de voir qu'IE8 va déjà sortir en béta, qu'il passe le acid2 (même si ce n'est qu'une indication discutable)

Oui c'est une excellente nouvelle. Firefox3 le passe aussi!
Il faut maintenant se référer au nouveau Acid3 test.

Arf, en fait la béta est disponible depuis qujourd'hui je crois:
http://www.microsoft.com/windows/pro...ss/default.htm

Hallucinant! ça y est on dirait que les programmmeurs de Microsoft se réveillent, ça va dépoter! J'espère qu'on dira bientôt que
la trop lente sortie d'IE7 n'aura été qu'une erreur de parcours et que les sorties de nouvelles versions vont enfin retrouver leur cadence initiale.
Merci pour l'info!
Ce qui est maintenant plus ennuyeux c'est du côté du W3C et des différents working groups quand on voit que CSS2 est dèja sorti depuis 98....