Une bannière à taille variable

Un design à taille variable pour un site, c'est pratique et utile pour les visiteurs. Mais comment faire pour que la bannière soit également à taille variable ? Explication ici...

Le fond

Prévoyez un fond qu'il est possible de répéter dans toutes les directions : un quadrillage par exemple.

Note : vous pouvez prendre aussi une couleur de fond, qui par définition, se répètera...

Petit rappel sur les balises div : Ce sont des balises-qui-servent-à-rien. Elles créent un bloc dans la page, et servent uniquement à porter des attributs CSS (à l'aide d'un id ou d'une class par exemple...). Il existe aussi la balise span, de même principe mais de type inline.

Dans votre code html, créez donc une balise Div vide pour l'instant, portant par exemple l'id "en_tete" (pas d'espace dans un id !!!) ou "banniere" :

<div id="banniere">

</div>

Puis assignez-lui l'image de fond en CSS, des dimensions (variables bien sûr, en % par exemple), et des propriétés de répétition pour occuper tout l'espace disponible :

#banniere

{

height: 20%; /* La bannière fera 20% de la hauteur de la page... */

width: 100%; /* et 100% de la largeur. */

background-image : url(/*url de votre image de fond*/);



background-repeat: repeat /* le fond se répète dans toute les direction. (ligne facultative car option par défaut, mais comme ça coute rien de la mettre...) */

}

La partie fixe

Mettez en oeuvre vos talents de graphiste pour créer une image qui soit à peu près potable et, surtout, qui ne fasse pas plus de 750*100 de large : il faut qu'elle tiennne en résolution 800*600. Donnez-lui un fond transparent pour qu'elle s'intègre dans la bannière.
Si vous n'y arrivez pas, vous pouvez toujours demander de l'aide sur Aidoforum !!!

Maintenant, reprenez votre balise div vide, et utilisez une balise <img /> pour intégrer votre partie fixe au fond de la bannière. N'oubliez pas d'y donner un texte alternatif, qui permettra aux personnes n'ayant pas un ordinateur assez puissant pour voir l'image (rare) et aux aveugles (moins rare) de savoir tout de même de quoi il retourne.

<div id="banniere">

<img src="[url de votre image]" alt="ma super bannière à taille variable" />

</div>

Puis utilisez la propriété text-align dans votre code CSS pour, par exemple, centrer votre image de bannière :

#banniere

{

/* code déjà rédigé */

text-align: center;

}

Conclusion

Cette méthode a un avantage et un inconvénient :

Avantage :
Il est facile de faire une bannière variable avec cette méthode. L'autre solution était de générer l'image avec PHP, mais c'est bien compliqué et cela consomme énormément de ressources serveur.

Inconvénient :
L'image du dessus sera toujours en haut et les possibilités de positionnements sont bien maigres (gauche, centre et haut...).

Améliorations possibles :
- Ajouter une bordure avec la propriété CSS border.
- Positionner l'image du dessu avec la propriété position.


Bon courage et bon design !!!

Par 4ur31 , Le 25 Septembre 2009 à 10h53
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à HTML/CSS

Commentaires sur cet article

Aucun commentaire pour le moment.