function = je.blogue(); » CSS et (X)HTML

Créer un bas de page qui colle grâce à CSS (2)

François — Mon, 26 Jan 2009 11:00:25 +0000

Une deuxième façon pour garder, avec l’aide de CSS, le bas de page positionné au bas du navigateur quelque soit la hauteur de la page. Pour voir la première façon.

Pour vous aider à réaliser cet exemple, vous pouvez télécharger le code HTML qui vous servira de matière première tout au long du présent exercice. Comme vous pourrez constater, j’ai déjà formaté le document en y insérant du style dans la balise .

Cette deuxième façon consiste à se servir de la marge négative pour forcer le bas de page à apparaître collé au bas du contenant principal.

Comme dans l’exemple précédent, il est bon de spécifier dans la feuille de style que l’on veut forcer les balises et à être d’une hauteur de 100 %.
html, body { height: 100%; }
Ensuite, il faut forcer le contenant principal « #wrapper » à être d’une hauteur minimum de 100 %. Le tout en prenant bien soin de créer un correctif pour permettre à tous les navigateurs
(sauf IE 6) de bien comprendre la syntaxe de la déclaration « height:auto ».
#wrapper { min-height: 100%; height: 100%; margin: 0 auto; /* sert à placer le contenant #wrapper au centre du navigateur */ } html>body #wrapper { height:auto } /* une des façons de cacher du style au navigateur Internet Explorer 6 */
Il faut maintenant ajouter au contenant une marge négative, ce qui va permettre de créer l’espace nécessaire pour le bas de page.
#wrapper { min-height: 100%; height: 100%; margin: 0 auto -50px; /* 50 pixels représente ici la hauteur souhaité de notre bas de page */ }
Pour terminer, il ne reste plus qu’à indiquer la hauteur du sélecteur de bas de page, ici identifié « #footer ». Cette hauteur doit correspondre à la marge négative de 50 pixels du contenant.
#footer { height:50px; }
Pour que tout fonctionne comme prévu, le bas de page doit se retrouver à l’extérieur du contenant principal. Il faut également créer un

vide au bas du contenant, ayant la même hauteur que le bas de page.

#espace

{

height:50px;

}

Créer un bas de page qui colle grâce à CSS (1)

François — Thu, 20 Nov 2008 01:41:21 +0000

Voici une première façon pour garder, avec l’aide de CSS, le bas de page positionné au bas du navigateur quelque soit la hauteur de la page.

Cette première façon consiste à se servir du positionning pour forcer le bas de page, alors en mode absolute, à toujours suivre le bas de l’écran. C’est une méthode simple et efficace mais elle nous oblige par contre à nous servir du positionnement, ce qui peut parfois ne pas convenir au type de page que nous avons à coder.

Pour commencer, il est bon de spécifier dans la feuille de style CSS que l’on veut forcer les balises et à être d’une hauteur de 100 %.
html, body { height: 100%; }
Ensuite, il faut mettre tout le contenant de la page, ici appelé « #wrapper », en position relative et lui donner une valeur minimale de 100 % pour sa hauteur.
#wrapper { position: relative; min-height: 100%; }
Étant donné que la déclaration « min-height » n’est pas comprise par Internet Explorer 6 ni les versions antérieures, l’ajout d’un filtre correctif dans la feuille de style est essentiel.

Note : Le * html placé devant le nom du sélecteur concerné ne rend visible la déclaration que pour les versions 6 et plus anciennes d’Internet Explorer mais n’est pas visible pour la version 7 et plus récente.
* html #wrapper { height: 100%; }
Pour terminer, il ne reste plus qu’à positionner le sélecteur du bas de page, ici identifié « #footer », en position absolue et à attribuer une valeur nulle (0) à la coordonnée du bas :
#footer { position: absolute; bottom: 0; }
Puisque le bas de page se retrouve en position absolue, il est toujours bon de spécifier les dimensions exactes de celui-ci.
width:560px; /*600 pixels moins les 20 pixels de chaque côté*/
Sur ce, à bientôt !

Forcer l’apparition de la barre de défilement verticale

François — Wed, 06 Aug 2008 05:23:13 +0000

Sur les sites qui ont des pages de différentes longueurs, le problème de l’apparition et de la disparition de la barre de défilement verticale se pose souvent, ce qui a pour conséquence un décalage horizontal pouvant être visuellement déplaisant pour l’utilisateur du site.

J’ai créé un exemple pour bien illustrer le problème. Lorsque l’on navigue entre les trois pages (qui sont de différentes hauteurs) on s’aperçoit du décalage horizontal que crée la disparition de la barre de défilement.

La solution est très simple. Pour forcer la barre de défilement à apparaître sur toutes les pages d’un site, il suffit d’ajouter à la feuille de style CSS le sélecteur HTML et de lui attribuer une valeur de 100 % à la hauteur et de un (1) pixel à la marge du bas. La marge, si minime qu’elle soit, est suffisante pour faire « déborder » la hauteur de la page et ainsi faire apparaître la barre de défilement :
html { height:100%; margin-bottom:1px; }
J’attends vos commentaires. À bientôt !