Aller au contenu

Décalage


xpatval

Sujets conseillés

Bonjour,

Je bute sur un problème, et je viens vous demander de l'aide.

deux pages.

La première ne nécessite pas la barre de défilement verticale, la deuxième, oui.

Voici la css:

...
#cont {
position: absolute;
width: 100%;
padding:0;
margin:0;
}

#head {
background-image: url('commun/logo_dib_entete_id1.jpg');
background-repeat: no-repeat;
background-position: center;
height: 80px;
margin:0;
padding:0;
}

#left {
background-image: url('commun/trait_left.jpg');
background-position: right;
background-repeat: repeat;
position: absolute;
left:0;
width: 150px;
min-height:400px;
}



#cent {
min-height: 400px;
margin-left: 150px;
margin-right: 150px;
}

#right {
position: absolute;
right: 0;
margin-top: 0;
width: 150px;
min-height: 400px;
}

#foot {
height: 50px;
margin-left: 150px;
margin-right: 150px;
}

Mes deux pages html sont baties de la même façon, à savoir:

<html>
<head></head>
<body>
<div id="cont">
  <div id="head"></div>
  <div id="left"></div>
  <div id="right"></div>
  <div id="cent"></div>
  <div id="foot"></div>
</div>
</body>
</html>

Sous IE, pas de souci.

Sous Firefox, Netscape et Opera, lorsque je bascule de la page 1 vers la page 2, j'ai un décalage vers la gauche, de la largeur de la barre de défilement verticale (puisque celle-ci est requise).

Donc, mes images, textes et autres se décalent de quelques pixels, ce qui n'est pas cool du tout.

Auriez-vous une idée afin de résoudre ce blème ?

(Les pages n'étant pas hébergées à l'heure actuelle, je ne peux vous donner leur url..)

merci de vos réponses,

xpatval

Lien vers le commentaire
Partager sur d’autres sites

Salut :)

Si j'ai bien compris, le problème vient du navigateur ? IE, alors que la barre de défilement vertical n'est pas requise affiche quand même cette dernière, ce qui permet de proposer une certaine homogénéité entre les pages "courtes" et les plus "longues", nécessitant une barre de défilement.

Les autres navigateurs fonctionnent différement en affichant la barre de défilement uniquement lorsque cela est nécessaire.

Je ne vois pas comment résoudre le problème. Dans le cas de IE, la largeur du conteneur ne change pas d'une page à l'autre puisque la barre de défilement est toujours matérialisée. Pour les autres navigateurs, la taille du body change à cause de l'apparition de la barre de défilement. A moins de faire des positionnements fixes (et encore, il restera toujours la différence de largeur d'une page à l'autre), je crois que c'est pas gérable.

En plus, tu vas te prendre la tête pour pas grand chose ;)

Lien vers le commentaire
Partager sur d’autres sites

Non, pas du tout.

ma page 1 ne requiert pas de de barre de défilement. Ma page 2, si.

Lorsque j'appelle ma page 2, sous Firefox, Opera et Netscape, j'ai un décalage vers la gauche (de la taille de la largeur de la barre, je suppose), de mon contenu de #head et #cent, par rapport à ma page 1, alors que je n'ai pas cela sous IE.

Aussi, comment éviter ce décalage . Voilà.

xpatval

Modifié par xpatval
Lien vers le commentaire
Partager sur d’autres sites

Oui oui j'ai compris :)

Ton #cont a une largeur de 100%.

Dans IE, les 100% représentent par ex 750px (largeur pour une résolution en 800x600). Les 50px (800-750) restant permettent d'afficher les bordures droite et gauche du navigateur, et la barre de défilement. Dans IE toujours, la largeur de ta page ne change pas. Elle est toujours de 750px.

Dans FF and co si la barre de défilement n'est pas requise, les 100% représentent environ 770px. Le cas contraire, ils représentent 750px. Donc, il est forcé que quand tu passes d'une page de 770px à une page qui fait 750px, tu as une perte de 20px donc ta page est quelque peu modifiée.

Tu ne peux pas le changer. Ca vient du navigateur.

Lien vers le commentaire
Partager sur d’autres sites

Je ne pige plus !

J'ai un site hiérarchisé de la même façon, ayant ou non besoin de la barre de défilement, et qui ne se décale pas sous les 4 navigateurs cités plus haut, donc:

Soit je deviens fou !

Soit j'ai loupé quelque chose dans mon code.

:boude:

morose, suis-je.

Lien vers le commentaire
Partager sur d’autres sites

Ca ne vient pas de ton code ! :)

Ca vient du navigateur qui dans le cas de la page 1 affiche un body de 770px (par ex) et dans la page 2, affiche un body de 750px. Je vois pas comment te le dire autrement.

Ton #cont fait bien 100% (dans les 2 pages) mais dans le cas de la page sans barre, c'est 100% représentent 770px et dans le cas de la page avec barre, ça fait 750px, les 20px servant à afficher la barre.

Je me fais comprendre ?

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...