28172 sujets

CSS et mise en forme, CSS3

Problème Banniere en repeat-x

Bonjours à tous, je suis tout nouveau sur ce site bien que je l'ai souvent fréquenté en mode "visiteur".
Bref, je travaille actuellement sur un projet de site web et j'aimerai qu'il soit lisible pour tous les utilisateurs d'ordinateurs et avec les petites résolutions (800x600px) remisent au gout du jours, je galère un peu... maudit soient les miniPC.

Mon problème est assez difficile à expliquer, je vous ai donc fait des screens:


Voici le site en 1280x800px:
upload/22739-screen1.jpg
La bannière est un repeat-x d'une image réalisée sous photoshop et d'une hauteur de 120px.


Puis lorsque je passe en 800x600px:
upload/22739-sceen2.jpg

Le problème est ici, la bannière en suit pas le scroll horizontal...
upload/22739-sceen3.jpg



Quelqu'un aurait une solution?
Modifié par ptitowen (09 Jul 2009 - 00:26)
Bonjour,

Ma boule de billard magique te dis "peut-être".

Plus sérieusement, sans voir de code, ou mieux une page en ligne, il va être difficile de comprendre où se situe le problème.
Salut,

Ma boule de cristal (c'est quand même plus efficace qu'une boule de billard, non mais !) me dit que tu as positionné la plupart de tes éléments de manière absolue, que ton background répété en x est soit affecté au body soit à un élément dans le flux genre #header prenant 100% du body en largeur.

Donc une solution serait de positionner ton contenu dans le flux et non en position absolue, pour que la largeur du body s'adapte à son contenu et donc ne se limite pas à la zone de visualisation.
Je parierai que le header sur lequel est appliqué l'image de fond répétée, est en width:100%, tandis qu'aucune largeur n'a été spécifiée plus haut.
Bon j'ai réfléchi et ai trouvé une solution. Merci pour vos réponses.

Voici comment j'ai fait:

#ban 
{
margin-left: auto;
margin-right: auto;
width:775px;
height:120px; 
background-image: url(images/main_bg.gif);
background-repeat: repeat-x;
}
#ban2 
{

width:100%;
height:120px; 
background-image: url(images/main_bg.gif);
background-repeat: repeat-x;
}


Une bannière centrée de 775px pour les résolutions 800x600px.

Bon c'est peut-etre pas la plus simple ni la meilleure solution, mais ça marche pour mon projet...

Merci à vous pour vos réponses.
Modifié par ptitowen (09 Jul 2009 - 23:44)
À vue de nez, c'est une histoire de bloc en largeur auto ou 100%, qui prend pour largeur maximale la largeur de l'élément BODY. Il s'avère que l'élément BODY va prendre la largeur du viewport (soit dans les 780px ou un peu moins pour une fenêtre occupant 800px de large), et que si un contenu est plus large... eh bien il dépassera.

En quelque sorte, c'est le comportement illustré ici:
upload/2043-cssawesome.jpg
De mémoire, une solution possible est de passer l'élément BODY en display: table; width: 100%;.
Modifié par Florent V. (09 Jul 2009 - 23:59)
Sujet clos
Aller à