28135 sujets

CSS et mise en forme, CSS3

Bonsoir,

J'ai un gros problème que je n'arrive pas à résoudre. J'ai cherché sur le forum et ailleurs sans succés.
Css :
html, body {height:100%; margin:0; padding:0;}
body {background-color:#ECECEC; margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#666666; text-align:center;}
#bg {padding:0;width:820px; position:relative; margin-left:auto; margin-right:auto; height:auto;}
#container{width:820px;background-color: white;text-align: left;}

#headerh{background:url(images/header_g.jpg) no-repeat; height:120px; width:820px;}
#contenu {float:left;background:url(images/line_fd.gif) repeat-y; height:100%; width:820px;}
#footer {float:left;background:url(images/footer.gif) no-repeat; height:17px; width:820px;}
#contenuright {padding: 10px 0 20px 10px; margin:0; width:593px; height:100%;}


/* Références */
.lareference {float:left; height:100%; margin-bottom:10px; width:593px;}
.txtref {width:478px; margin:0;text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:11px; float:left; padding-top:20px;}
.blocimgref {float:left; margin:0; padding:0;}
a.imageref {border-color:#B3952F;}
a.imageref:hover  img{border-color:#B3952F;filter:alpha(opacity=65);opacity: 0.65;-moz-opacity:0.65;}
a.imageref img {border: 1px solid #F6F5F5;padding:3px;margin-top:5px !important;margin-top:15px;margin-right: 7px;}
.lareference img {border:0;}
#liens { color:#B3952F; font-size:13px; text-decoration:none; padding-right: 5px; margin:0;}
.txtliens {width:593px; margin:0; padding-bottom:10px;text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:11px; height:100%;}


Les 2 pages html :
http://ppn.jl.free.fr/temp/references.htm
http://ppn.jl.free.fr/temp/references2.htm

Regardez les 2 pages html à la suite, vous remarquerez qu'il y a un décalage du site de quelques pixels vers la gauche sur la page references2. En faite j'ai ce décalage dès que la hauteur augmente...J'ai ce décalage sur FireFox et pas sur IE. Je ne trouve pas de solution!

Merci de m'aider Smiley decu
Modifié par Seb1.9 (19 Aug 2006 - 12:11)
Bonsoir Seb,

Je suppose qu'il s'agit du décalage qui se produit quand la barre de défilement apparaît. C'est comme cela sur tous les sites, enfin du moins ceux qui sont centrés.

Une possibilité est de faire en sorte que la barre soit toujours présente comme dans Internet Explorer :
html { overflow-y: scroll; }

Concernant Firefox ça n'est pris en charge qu'à partir de la version 1.5 ; Opera et Safari apparemment non.
Modifié par Alan (19 Aug 2006 - 00:23)
Bonjour,

Ce n'est pas ton conteneur qui se décalle vers la gauche mais ton écran qui "rétrécit" du fait de la présence de la barre de scroll vertical !!

Je n'ai pas à mon niveau de solution pour forcer une barre de scroll par défaut sur tous les navigateurs si ce n'est d'augmenter artificiellement la hauteur de ta page la moins longue pour arriver à avoir également un scroll pour maintenir une certaine unité graphique !!!

<suis trop lent>
Modifié par ghost (19 Aug 2006 - 00:26)
Ok merci les gars, je me suis rendu fou pour rien en faite. J'ai essayé la méthode de Alan et ça marche. Tant que ça fonctionne sur IE et Firefox ça me va. C'est résolu pour moi Smiley cligne