28172 sujets

CSS et mise en forme, CSS3

Menu trop large soucis de scroll-x

Bonjour à tous !

J’espère pouvoir trouver du réconfort et une solution, ca fait 2 jours que je suis sur le soucis, je trouve pas de vraie solution.

Je m'explique, afin d'avoir un rendu optimal avec les dégradés du menu, j'ai découpé l'image, elle fait 1500px de large pour 187px de haut.
Mon contenu lui fait 960px.

Sur mon écran 16/10, le rendu est bon:
http://uppix.net/1/3/b/8a13469efa957a76aa3c87f81f153.png

c'est en testant par hasard en 4:3 que j'ai vu le soucis.
http://uppix.net/5/6/f/2ae0f657be12a49bb4e696f6a5789.png
A premiere vue, rien d'extra, mais j'ai désactivé le scroll en x, de facon à ne pas le voir, mais le soucis c'est que si je suis sur une trop petite resolution, je ne peux plus scroll pour avoir accés au menu.

J'ai donc scrollé avec la souris pour vous montrer le soucis:
http://uppix.net/5/c/0/0e5f423383887d9bfe9b467538983.png

Le top qui est en repeat-x ne continue pas, tout ca a cause de l'image de background du menu qui fait 1500px de large.

C'est compliqué à expliqué, je sais pas comment faire.

J'ai essayé de découpé ce bg de menu en 3 bouts, un left (270px), un centrer de 960px et right de (270px), mettre le centre dans le contenu, et mettre les cotés en dehors du contenu mais avec un z-index inférieur.
Le soucis c'est que les parties left et right passe sous le contenu (à cause des bords).

Voila je sais pas comment vous expliquer simplement, si vous voyez et que vous pouvez m'apporter une solution sa serait tip-top.

Merci !
Salut, la meilleure technique que je connaisse pour éviter ce soucis, c'est de passer ton image en fond de page. Je m'explique :

Tu as body avec en image de fond ta bande grise/bleu qui se repète en x, puis tu te rajoutes un div width:100% qui englobe tout ton contenu, un deuxieme body en somme avec ton image d'entete en fond de 1500px (ou plus même si tu veux) et que tu met en alignement top center.

Donc là plus de désagrément, tes autres div font la largeur de la page 960px et déclenche le scrolling normalement. Smiley smile
Modifié par prophete en chef (31 Jul 2012 - 23:39)
C'est pas mal, mais y a toujours un soucis, je pense pourtant avoir réussit ce que tu me disais.

Mais le background menu glisse différemment du reste du site:
http://uppix.net/c/8/1/4860a2f5fa4e128349b56666bbb92.png

Puis si je scroll sur la droite, toujours le même soucis.
http://uppix.net/f/2/d/d3aabaf6b5736274f198c4e23ea1b.png

Mon html:
<div id="entete"></div>
	<div id="bgmenu"></div>
	
	<div id="wrap">

<div id="menu">
		<div id="menu_left">
			<ul>
                <li class="current"><a href="#">Accueil</a></li>
                <li><a href="#">Bureau</a></li>
				<li><a href="#">Parrains</a></li>
				<li><a href="#">Partenaires</a></li>
            </ul>
		</div><!--fin menu_left-->
			<div id="logo">
				<a href="#"><img src="img/coupe_georges_baptiste_logo.png" alt="" /><h1></h1></a>
			</div><!--fin logo-->
		<div id="menu_right">
			<ul>
                <li><a href="#">Palmares</a></li>
                <li><a href="#">France</a></li>
                <li><a href="#">Europe</a></li>
				<li><a href="#">International</a></li>
            </ul>
		</div><!--fin menu_right-->
	</div><!--fin menu-->


Un bout du css:
#wrap{ width: 960px;margin: 0 auto;}
 
#entete{width: 100%; height: 58px; z-index:1; background:url(../img/coupe_georges_baptiste_topbg.jpg) repeat-x; }

#bgmenu{height: 187px;width: 100%; background:url(../img/coupe_georges_baptiste_menubg.png) no-repeat top center; margin-top: -20px;z-index:-1;}
#menu{height: 187px; margin-left:-270px;margin-top: -187px;}



Si vous voyez où j'ai fait l'erreur :s
Effectivement ya cafouillage un peu, il ne devrait pas y avoir de div vide, ça devrait ressembler à ça :


<body>
<div id="bgmenu"> 
	
	<div id="wrap">
		<div id="entete">
			<ul id="menuleft">
                		<li class="current"><a href="#">Accueil</a></li>
                		<li><a href="#">Bureau</a></li>
				<li><a href="#">Parrains</a></li>
				<li><a href="#">Partenaires</a></li>
  		          </ul>
			<div id="logo">
				<a href="#"><img src="img/coupe_georges_baptiste_logo.png" alt="" /><h1></h1></a>
			</div>
		
			<ul id="menuright">
                		<li><a href="#">Palmares</a></li>
                		<li><a href="#">France</a></li>
                		<li><a href="#">Europe</a></li>
				<li><a href="#">International</a></li>
            		</ul>
		</div>
		<!--suite du code ici-->
	</div>
</div>
</body>	




body {background:url(../img/coupe_georges_baptiste_topbg.jpg) repeat-x; }
#bgmenu{width: 100%; background:url(../img/coupe_georges_baptiste_menubg.png) no-repeat top center;}
#wrap{ width: 960px;margin: 0 auto;}
#entete{height: 187px;}


Après le h1 vide, c'est moyen, mais c'est un autre débat.
Modifié par prophete en chef (01 Aug 2012 - 08:49)
Sujet clos
Aller à