Quelques astuces avec CSS : - 1 - Alignement

Quelques astuces avec CSS :

- 1 - Alignement vertical avec CSS

Aligner verticalement des éléments avec des tables était un jeu d'enfant. Pour placer dans une cellule la ligne de contenu au milieu de celle-ci vous emploieriez : 

vertical-align : middle

Ce n'est pas la même méthode avec CSS. Si vous avez un menu de navigation dont la hauteur est assignée à 2em et que vous insérez la commande vertical-align dans la règle de CSS, cela ne fera aucune différence et le texte sera poussé vers le haut de la boîte. La solution ? Indiquez une même taille de ligne que celle de la boîte. Dans ce cas, la boîte fait 2em de haut, ainsi nous insérerions un line-height : 2em dans la règle CSS et le texte flottera maintenant au milieu de la boîte grâce à la commande vertical-align - perfect !


- 2 - Placement dans un calque conteneur

Une des meilleures qualités des CSS est que vous pouvez placer un objet absolument n'importe et quelque soit l'endroit dans le document. Il est également possible (et souvent souhaitable) de placer des objets dans un conteneur. Assignez simplement la règle CSS suivante dans le conteneur :

# conteneur { position : parent}

Maintenant n'importe quel élément dans ce conteneur sera placé relativement à lui. Si vous avez cette structure HTML :

<div id="container"><div id="navigation">...</div></div>

Pour placer la navigation exactement à 30px de la gauche et à 5px du dessus de la boîte conteneur, vous pourriez employer ces commandes CSS :

# navigation { position : absolu ; gauche : 30px ; dessus : 5px}

Parfait ! Dans cet exemple particulier, vous pourriez également employer le margin : 5px 0 0 30px, mais dans de nombreux cas il préférable d'employer le positionnement.


- 3 - Couleur de fond fonctionnant au fond d'écran

Un des inconvénients du CSS est son incapacité d'être commandé verticalement, posant un problème particulier dont les structurations de tableaux souffrent. Si vous avez par exemple une colonne en bas à gauche de la page, qui contient la navigation basse. La page a un fond blanc, mais vous voulez que cette colonne gauche ait un fond bleu. Simple, vous lui assignez la règle appropriée :

# navigation { background : blue; width : 150px; }

Juste un problème cependant : si les articles continuent sur toute la longueur jusqu'au bas de l'écran, aucune des deux commandes de cette règle CSS ne feront la couleur de fond. La couleur bleue de fond est coupée de moitié en bas de la page, ruinant votre réalisation. Que faire ! ? Malheureusement la seule solution à ceci est de tricher, et d'assigner au corps un fond d'image exactement de la mêmes couleur et largeur que la colonne gauche. Vous emploieriez cette commande de CSS :

body { background : url(blue-image.gif) 0 0 repeat-y; }

Cette image que vous placerez dans le fond doit faire exactement 150px de large et disposer la même couleur bleue que le fond de la colonne gauche. L'inconvénient d'employer cette méthode est que vous ne pourrez réaliser une colonne gauche adaptable, si l'utilisateur modifie la taille du texte et que la taille de la colonne augmente, la couleur de fond ne sera plus correctement positionnée.

Aujourd'hui c'est la seule solution à ce problème particulier ainsi la colonne gauche devra être exprimée en px si vous voulez qu'il y ait dans cette cellule une couleur différente de fond que sur le reste de la page.