coloo,
il y a 13 ans
bonjour, as tu un lien ou on peut voir ta page ?
Bonsoir, Je vais essayer de donner un maximum d'infos afin de trouver de l'aide. Je vois bien qu'il y a un souci avec mon css mais je n'arrive pas à trouver mon erreur. En effet quand je réduis la fenêtre à une résolution de 800x600 mon footer qui devrait en théorie prendre la largeur de la page se décale sur la gauche pour s'ajuster à
comme le montre l'image ci-dessous (firebug) [url=http://www.hostingpics.net/viewer.php?id=752143firebug.png][img]http://img15.hostingpics.net/pics/752143firebug.png[/img][/url]] Voici le css que j'ai essayé d'épurer au maximum en retirant les balises text etc... : [code] html, body { margin:0; padding:0; width:100%; position:absolute; background:url(../img/bg.jpg) no-repeat center fixed; -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -o-background-size: cover; /* pour Opera */ background-size: cover; /* version standardisée */ } #bgheader{ margin:0; padding:0; top:0; left:0; width:100%; height:70px; position:fixed; background-image:url(../img/bgstore.png); background-repeat:repeat-x; z-index:1000; } #body_bgheader{ margin:0; padding:0; top:0; float:left; width:343px; height:53px; position:fixed; background-image:url(../img/lagodille.png); background-repeat:no-repeat; z-index:1000; } .scroll{ float:right; width: 100px; position: fixed; bottom:80px; margin-left: 92%; } .scroll a{ display: block; text-decoration:none; background:#333; height:50px; width:50px; -webkit-border-radius: 80px; border-radius: 80px; color:#DABF38; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; text-align: center; line-height: 50px; } #container1{ overflow:hidden; margin-top:60px; margin-left:auto; margin-right:auto; width:970px; height:100%; padding-bottom: 60px; background-color:#F0F0F0; -webkit-box-shadow: 2px 2px 2px 2px #333; box-shadow: 2px 2px 2px 2px #333; -webkit-border-radius: 6px; border-radius: 6px; } #container2 table{ font-size: 12px; text-align:justify; } #container2, #container3, #container4, #container5, #container6{ overflow:hidden; margin-top:70px; margin-left:auto; margin-right:auto; width:970px; height:100%; padding-bottom: 60px; background-color:#F0F0F0; -webkit-box-shadow: 2px 2px 2px 2px #333; box-shadow: 2px 2px 2px 2px #333; -webkit-border-radius: 6px; border-radius: 6px; } #container_left{ float:left; margin-left:10px; width:25%; height:100%; -webkit-border-radius: 6px; border-radius: 6px; } #left_niv1, #left_niv2{ padding:5px; height:100%; background-color:#fff; } #container_right{ height:100%; width:auto; margin-left:28%; } #right_niv0, #right_niv1{ padding:5px; height:100%; width:98%; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; color:#333; } [/code] et pour finir le footer : [code] #footer{ position:relative; width:100%; height:70px; margin-top:60px; padding:0; bottom:0; background:url(../../img/fond.png); background-repeat:repeat-x; } [/code] Merci d'avance pour votre aide ;)
9 réponses
thybarth,
il y a 13 ans
Bonjour coloo
Voici le lien
coloo,
il y a 13 ans
Ben j'ai testé sur ie 9 / firefox / et google chrome et je ne vois pas l'anomalie que tu m'as montré. je te conseillerais un coup de ccleaner (ça peut venir de ton cache)
++
thybarth,
il y a 13 ans
Étrange, j'ai également essayé sur 3 ordinateurs différents avec firefox - ie - chrome en vidant le cache et j'ai toujours le même souci
coloo,
il y a 13 ans
ben oui, je peux pas t'aider sur un problème que je ne vois pas...
Désolé.
thybarth,
il y a 13 ans
Je te crois sur parole, merci pour ton aide ;)
Digikube,
il y a 13 ans
Pas de soucis sur mon navigateur non plus ^^
Jujupas92,
il y a 13 ans
Je rencontre le même problème que toi, ceci dès que le scroll horizontal apparaît.
Cela me paraissait normal comme comportement (plus maintenant dans la mesure ou coloo et Aiftea ne rencontre pas le problème...) dans la mesure ou tu utilises, pour ton footer, une width à 100%, soit, par rapport à ta structure html, 100% de la fenêtre du navigateur.
Du coup, lorsque tu redimensionnes ta fenêtre en 800x600 le navigateur ne calcule et n'affiche que 800px de ton footer et pas le surplus dû à la taille de tes 6 containers (970px de mémoire) entraînant l'apparition du scroll qui lorsqu'on le déplace révèle ton problème.
Bref, regarde si, en remplaçant le width:100% par min-width:970px (au niveau des propriétés du footer), cela règle le souci.
PS: Que l'on hésite surtout pas à me corriger si je suis à côté de la plaque, n'étant pas du tout expert en CSS, loin s'en faut... :-)
thybarth,
il y a 13 ans
Merci pour vos réponses.
Et pour répondre à Jujupas92 cette solution me parait bonne.