Bonsoir tout le monde.
Alors voilà je suis en train de créer un site internet au design extensible.
Mise en situation :
-La bannière de mon site est un bout d'une image qui se répète sur toute la longueur de l'écran, de cette manière :
---------------HTML :---------------
<div id="banniere">
<div id="div_banniere">
<img src="Images/texte_bann3.png" alt="banniere" />
</div>
</div>
---------------CSS :---------------
- div_banniere
{
text-align: center;
background-image: url("Images/bout_bann.jpg");
background-repeat: repeat-x;
height: 190px;
}
.texte_bann
{
width: 571px;
height: 167px;
background-image: url("Images/texte_bann3.png");
}
---------------------------------------
L'id "texte_bann" n'est pas bien important ici, il s'agit juste du titre du site qui se trouve centré sur la bannière.
Problème :
-Quand je réduit la fenêtre du site, la bannière s'adapte bien à la résolution de l'écran. Mais, lorsque on réduit trop la fenêtre, une petite barre de défilement horizontale apparait en bas de la page, et lorsque on fait glisser cette barre vers là gauche de l'écran (pour voir le contenu du site qui c'est masqué en baissant la résolution), la bannière s'arrête net !
Voici une image, pour mieux comprendre :
http://imageshack.us/photo/my-images/846/bannireproblme.jpg/
(J'ai volontairement réduit fortement la taille de la fenêtre pour bien montrer le problème, mais le problème apparait lorsque la fenêtre fait environs 500 pixel de largeur, et donc lorsque les barre horizontales apparaissent.)
Est ce que quelqu'un aurait une solution pour palier se problème et faire que la bannière s'adapte pleinement à l'écran même lorsque apparait des barre de défilement horizontales ?
Très cordialement
