Complement "vertical-align"

Dans cet article , vous trouverez peut-être des compléments intéressant sur l'usage du vertical-align dans une feuille de style.
Un rappel des possibilités actuelles pour la majorité des navigateurs et une astuce pour IE , ... en jouant sur le layout , particularité parfois bien déroutante de ce navigateur omniprésents sur les pc des internautes , que l'on ne peut donc ignorer dans le développement de pages web.

Allez a l'exemple de cette page .

Depuis l'arrivée de Firefox 3 , l'approche proposé ici pour I.E. s'avere aujourd'hui plus pertinente (et moins sujette a confusion avec un tableau) En complément de cette article je vous propose donc aussi de lire celui-ci : inline-block : tout navigateurs . et quitte a semer le trouble parmi les plus débutants d'entre vous autant le faire pour de bon et eveiller votre interêt : image , legende , description et valign .

Voir un exemple plus complexe usant de cette méthode (page fluide en fausse colonnes flottantes , centrage de la page horizontal et vertical )


Pistes proposées par la faq d'alsacréations

Ces 2 liens amènent aux différentes techniques connues d'un bon nombre de "codeurs" de page web qui ont cherchés a éviter l'usage de tableau pour la mise en page .

Ces techniques sont en raccourcies

  1. appliquer un line-height équivalent a la hauteur de l'élément pour centrer une seule ligne de texte : test sur line-height cette page exemple démontre le défaut de la technique sitôt qu'il y a plus d'une ligne de texte.
  2. appliquer un vertical-align a un ou plusieurs élément de type inline se côtoyant (une image en vertical-align:middle; par exemple). page test : (en) usage du vertical-align pour centrer une image dans un texte.
  3. appliquer un : vertical-align:middle; a une cellule de tableau pour que celle ci centre sont contenu verticalement Cette règle s'applique aussi au contenu d'un élément recevant un : display:table-cell; dans la feuille de style. page exemple : (en)test vertical-align:middle;
  4. appliquer des marges négatives verticales sur un élément de type block (défaut agaçant , celui ci peut être en partie en dehors de l'écran et non visible sur sa partie haute)
  5. Une astuce pour IE sur un élément de type inline auxquels ont en ajoute un second doté de layout et dimensionné en hauteur , que l'on retrouve dans cette page associer au display:table pour les autres navigateurs : (en)test vertical-align:middle;

récapitulons

vertical-align ne peut s'appliquer qu'a des éléments de type:
inline (span , image , etc ...) ou recevant la règle : display:inline; dans la feuille de style.
au contenu d'une cellule de tableau ou d'un élément html recevant la regle : display:table-cell; (règle non implémentée dans Internet Explorer , toutes versions confondues a ce jour 06/2007).
line-height
est une option ponctuelle et aisé a mettre en place lorsque le contenu est peu important , ne changeant pas et connu a l'avance.
display:table;
Cette règle , issue d'une "famille" permet d'afficher un groupe d'élément html imbriqués avec les caractéristiques visuel d'un tableau. Ces règles ne sont pas nouvelles , juste un peu boudées. Page test de l'implémentation de ces règles : affiche comme un tableau. Attention cependant a appliquer ces regles ensembles sur un groupe de balises de façon a ce que l'effet voulu soit rendu par les différents navigateurs en mesures de les comprendre. En effet un simple display:table-cell; se verra ou non appliqué d'un navigateur a l'autre , l'un compensera le display:table; manquant au parent et l'autre estimera qu'il s'agit là d'une erreur de codage a ne pas prendre en compte. Ne faites donc pas les choses a moitié.
display:inline-block
Utilisé dans IE , cette règle confere le layout aux éléments de type inline . Ceux ci sont alors dimensionnables et conservent la capacité de s'aligner verticalement a d'autres élément de type inline.Cette règle fonctionne pour un élément de type inline a la base , pour obtenir ce même comportement a partir d'un élément de type block , il faut avoir recours un autre stratagème.C'est ce stratagème qui nous intéresse et qui va permettre d'appliquer ce vertical-align a des élément de type block et ainsi avoir une alternative proche de l'effet du display:table-cell.

Et ce complément donc ?

On y vient , tout d'abord nous allons prendre un exemple simple au sein d'une page codé en xhtml 1.0 , un doctype valide avant tout qui se pourrait aussi d'être aussi un html 4.01.

Les balises que nous allons utilisées vont être au nombre de trois pour la base de la structure que l'on veut positionné visuellement :

  1. un conteneur qui reçoit :
  2. un premier sous-conteneur
  3. puis un second sous-conteneur

Les sous-conteneurs pourront a leur tour recevoir différents contenus.

Les balises utilisées pourront être de type inline , block , liste , ... , aussi longtemps que la sémantique et une imbrication valide seront respectées.

Bien entendu , si il s'agit d'un tableau , nous n'avons plus besoin d'en discuté puisque l'alignement vertical au sein d'une cellule ne pose aucun problèmes .

estimons un div contenant un titre et un paragraphe.

< div class="table" >
< h3 > DEMO < /h3 >
< p > paragraphe < br /> a < br />centré < /p>
< /div >

DEMO

paragraphe
a
centré

Pour obtenir ce résultat , voici les règles css usant du display:table;, excepté Internet Explorer !

div.table {
display:table;
border:1px solid;
padding:1em;
}
div.table h3 , div.table p
{
vertical-align:middle;
display:table-cell;
padding:1em;
}

Pour Internet explorer

Pour obtenir un alignement vertical du contenu de ces 2 zones (h3 et p ) nous allons d'abord modifier le type de comportement de ces balise de type "block" en type inline . Comme dit précédemment , 2 contenus ou balises de type inline se suivant peuvent être aligner verticalement l'un par rapport a l'autre sur le baseline qu'ils occupent ; cas classique : texte et image. Le plus haut des 2 détermine la hauteur de la ligne et son centre).

Cela ne suffit cependant pas a contenir les contenu de type block , comme les < br /> ou tout autre balise de type block)

Pour cloisonner ces zones transformées en inline dans Internet Explorer , on va leur conférer à nouveau le layout a l'aide de la règle css propriétaire microsoft: zoom:1;.

Cette règle , force l'affichage de la ou les balises concerné sur une zone bien déterminé de l'écran en dimensionnant a l'échelle de la valeur donnée :

1 n'aura donc aucune incidence sur la taille des éléments concernés.

le css appliqué a IE est en final beaucoup plus simple a se souvenir (faire usage des commentaires conditionnels pour surchargés les règles précédentes.)

div.table , div.table h3 , div.table p
{
display:inline;
zoom:1;
}

Noter que le display:inline est aussi appliqué au conteneur , afin de retrouvé le comportement d'un tableau , qui s'élargira en fonction de son contenu. Ce comportement est vrai dans firefox qui comprend le display:table; mais l'est moins dans IE , En effet dans IE le conteneur n'empêchera pas un retour à la ligne sitôt que la fenêtre ne permettra plus d'afficher les 2 contenus cote à cote , le comportement inline est bien présent.

Noter aussi que que ces zones centrées l'une par rapport a l'autre dans IE , n'occupent pas toutes , toute la hauteur de leur conteneur parent , ce sont des éléments inline comme le serait une image et non pas une cellule de tableau. Ils ne peuvent donc pas servir a afficher des images ou couleurs de fond .

Dans IE , on pourra donc faire usage de ces 2 règles autant pour les élément de type inline que de type block de façon a simplifier son application , une simple class permettra d'appliquer ces règles ou bon vous semble .

On comprendra aussi que dans IE , il ne sera pas possible de simuler une seule cellule de tableau sans se servir ou aligner 2 éléments cote à cote. Dans ce cas , on se servira d'un premier élément auquel on donnera une hauteur prédéterminée (qui servira de hauteur minimale) et une largeur de zéro

demo de ce cas ou l'élément utile a IE est dessiné en rouge : alignement vertical et horizontal d'un groupe d'élément de type block dans IE et les autres sans tableaux

A propos du layout , liens complementaires:

Conclusion

Pour obtenir l'aspect visuel d'un tableau , il faut donc mettre en application l'usage des règles display:table; display:table-cell; etc ... , et surcharger celle-ci au travers des commentaires conditionnels pour Internet Explorer avec display:inline;zoom:1; en faisant usage d'au moins 2 éléments pour activer le centrage vertical

En supplement et complement

Pour ce qui est du centrage verticale d'une page , il reste toujours l'option pour IE de faire usage des marges négatives.

Pour ce défaire du défaut de voir la page disparaitre dans le haut de la fenêtre et ne plus pouvoir avoir accés visuellement et a la souris , aux textes ou menu ..On n'utilisera pas le positionnement absolu , , mais le positionnement relatif.

L'usage d'un doctype valide eliminera totalement ce defaut dans IE , En mode "quirk" , le defaut du au au repositionnement avec des valeurs negatives verticale reste présent.

Un exemple en ligne :Page et contenu centré verticalement.

Cette page embarque les 2 methodes précitées: le display:table et compagnie

Pour IE , le display:inline; et le positionnement relatif est utilisés afin d'obtenir le centrage verticale du conteneur principal.(si fenetre plus haute que le contenu).

GCyrillus

Ecrire un commentaire




Quelle est la troisième lettre du mot bkmhw ?