suivez-moi sur :

Philippe da Cruz : graphique and web designer
Philippe da Cruz

Blog

1

Bannière à position fixe

Capture écran du site philippe.dacruz

Gardez en permanence une bannière fixe en bas de la fenêtre du navigateur pour mettre en avant un événement, une promotion ou même un espace publicitaire.

Encore assez rare et pourtant si pratique, la bannière fixe est un formidable atout pour un site internet offrant régulièrement à ses visiteurs des offres promotionnelles.
La bannière fixe à l’avantage d’être toujours présente à l’écran sans pour autant devenir intrusive comme le sont les pop-up ou les fenêtres javascript.


 

La bannière visuellement

La hauteur de la bannière est en générale de quelques dizaines de pixels, laissant ainsi assez d’espace pour une navigation confortable sur la page web. Les couleurs doivent être assez neutres pour que la bannière ne prenne pas trop le dessus sur le contenu. Je vous conseille d’ailleurs d’utiliser un fond semi-transparent pour la rendre encore plus discrète par rapport au information que contient la page.
 

Exemples de sites utilisant une bannière fixe

Envato
Capture écran du site envato.com
 
DesignM.ag
Capture écran du site designm.ag.com
 

Création

Juste après la balise <body> de votre site ou dans le fichier header.php pour les utilisateur de WordPress, créez une nouvelle div avec une id ‘bottom-banner’ en anglais ou ‘banniere-bas’ en français.
Personellement, je préfère avoir le nom de mes div en anglais mais cela n’a pas trop d’importance pour le moment.
Vous vous retrouvez donc avec cette ligne HTML :

<div id="banner-bottom"> </div>

Maintenant, stylisons cette div avec CSS :

#banner-bottom {
 display: block;
 position: fixed;
 bottom: 0px;
 left: 0px;
 width: 100%;
 height: 40px;
 z-index: 999;
 text-align: center;
 background-color: #111;
 }

 

Analysons le code css :

Display:block : pour qu’aucun élément ne se trouve sur la même ligne que la div ‘bottom-banner’ ou ‘banniere-bas’.
position:fixed : pour que la div soit toujours visible à l’écran.
bottom:0px : pour que la div soit en bas de la fenêtre. Si vous voulez la mettre en haut, utilisez top:0px.
width:100% : pour que la taille soit adaptable en fonction de la résolution de l’écran.
z-index:999 : z-index permet de spécifier la position d’empilement d’un bloc par rapport aux autres (premier plan, arrière plan, …). Z-index peut poser des problèmes sur les vieux navigateurs.
background-color:#111 : pour attribuer une couleur de fond. Ici, c’est le noir.

Vous pouvez aussi ajouter la valeur ci-dessous pour avoir un fond semi-transparent.

opacity: 0.75;

Si vous voulez mettre une image de fond à la place d’une couleur allez-y !

Malheureusement, si vous testez sous IE6 la bannière se trouvera en haut de la fenêtre et cela même avec bottom:0px et la valeur “opacity” n’est pas toujours supportée. A vous de voir si vous voulez de l’esthétisme ou de la fonctionnalité.

Vous pouvez maintenant mettre ce que vous désirez dans votre bannière fixe. Une image, du texte, y mettre une animation ou pourquoi pas un formulaire. Essayez !

Posté dans CSS, HTML | 1 commentaires

Vos commentaires

Elvia Eovaldi
a dit le
lundi 23 juillet 2012 à 07:31 :


Thanks for helping out, wonderful information.


Laisser un commentaire

Commentaires fermés.