lien en cellule et centrage vertical

Des cubes pour menu , demo ci-dessous :

Quel est le principe et la difficulté de la mise en œuvre de cette technique ?

Principe

Le principe est simple , prenez une boite élastique dans laquelle vous placez 2 autres boites pour l'étirer en largeur et en hauteur.

Une première boite contient le texte et déterminera la largeur , la seconde , de largeur 0 , servira a déterminé une hauteur minimale

Ces deux boite adjacente seront aligné en leur centre verticale en étirant leur conteneur

Image illustrant le principe :Dessin : Les 2 span forment un T couché dans la balise lien pour l'étiré

Mise en œuvre

Coté HTML :

Dans votre liste , qui vous servira de menu , insérer vos lien avec 2 span a l'intérieur comme décrit ci-dessus .

Le premier span contient texte et image , le second reste vide , sa fonction unique et de forcé la hauteur de votre lien , donnez a ce second span une class ( ex class="etire" ) .

Coté style :

Disposé vos liste en ligne (display:inline;) , cela aura 2 effets , les puces seront effacées et les éléments de liste resterons sur la même ligne .

Appliqué aux lien et au span la display:inline-block;.

Appliqué au span du lien une largeur : par exemple : a span {width:100px;} , puis sur le second span qui a une class , indique pour largeur :0 , un overflow:hidden; et en hauteur par exemple :100 pixels .

Ce qui donnerais selon l'exemple : a span.etire {width:0;overflow:hidden;height:100px;} .

les centrages

Pour centrer horizontalement : ajouter au css pour les liens (a) et les span : text-align:center; .

Pour centrer verticalement : ajouter au css pour les liens (a) et les span : vertical-align:middle; .

La difficulté

Nous y sommes presque . , Les versions de Firefox avant la Version 3 ne sont pas en mesure d'appliquer la regle : display:inline-block;

Dans ce cas de figure , une alternative est possible , display:table-cell; Les éléments recevant cette regle sont ici seul dans l'item de liste , les différence majeure de comportement d'affichage par rapport a inline-block n'auront aucune incidence , seul la fluidité ainsi acquise nous convient parfaitement .

Dans le cas d'un lien adjacent a d'autres element de type inline (lien inclu dans un texte ou a coté d'une image par exemple) , il faudra avoir recours a une regle propriétaire : display:-moz-inline-stack; . Attention , celle-ci a quelques defauts : test et explications de Florent V.

Pas de probleme en vues , notre code est paré de ces defaut , les spans nous servent de tampons (etais) dans ce cas la aussi .

dans le css il faudra alors faire précéder : display:inline-block; par display:table-cell; et display:-mozinline-stack; pour le lien , Cela ne perturberas aucun navigateur et permettra aux versions de Firefox inferieur a la 3 de se comporter comme attendu .

Le code css et html de la démo est visible en affichant le code source de la page

Attention , Opera a un bug avec les dimensions exprimées en pourcentages !

Autre pages avec une demos basés sur display:table-cell :liens en boites et centrage verticale et pour ajouté a la confusion et qui peut servir de template : menu de boites , vertical et horizontal.

Ecrire un commentaire




Quelle est la première lettre du mot gprp ?