Webmaster Hub > Problème de décalage CSS

Version complète: sur le forum Webmaster Hub : Problème de décalage CSS

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Zen-Spirit

dimanche 15 juin 2008 à 20:53

Bonjour à tous !
J'ai un petit soucis avec l'affichage d'une popup qui me créer automatiquement un décalage, lorsque la fenêtre de la popup s'ouvre, il y a la barre de défilement horizontale qui apparait or j'ai le cadre rouge fait 700 px en width et je l'ai bien défini dans mon CSS tout comme le body.
Je vous laisse le lien de mon site pour voir ce que çà donne et vous aurez un aperçu du problème : Clic sur le 1er lien dans Fil Info
Pour le body de la popup :

CODE

*
{
    padding: 0;
    border: 0;
    margin: 0;
}
body
{
    font: 100% "Times New Roman", serif;
    background-color: #000000;
    color: #FFFFFF;
    margin-bottom: 10px;
    width: 700px;
    }
p
{
    margin: 1em auto;
    text-align: left;
}

Pour la cadre rouge qui est composé de 3 parties :

CODE

#corps_popup
{
   float: left;
}
.cadre_popup_haut
{

   height: 31px;
   margin-left: 0px;
   margin-top: 0px;
   background-image: url("images_popup/bordure_haute1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
  }

.cadre_popup_centre
{
   overflow: auto;
   width: 700px;
   margin-left: 0px;
   padding-left: 35px;
   padding-right: 35px;
   margin-top:0px;
   background-image: url("images_popup/bordure_centre1.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
  }

.cadre_popup_bas
{
   height: 31px;
   margin-left: 0px;
   padding-top: 0px;
   background-image: url("images_popup/bordure_basse1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
  }

J'ai cherché et cherché, mais je ne vois pas mon erreur pour supprimer cet espace à droite et ainsi donc supprimer cette barre de défilement horizontale.
Merci à vous.

dragondz

lundi 16 juin 2008 à 09:09

Sous firefox il y a pas de barre de défilement!
Sous IE6 ta page s'affiche d'une façon catastrophique (il y a même pas le cadre des fils de discussions!)

Zen-Spirit

lundi 16 juin 2008 à 16:36

CITATION(dragondz @ lundi 16 juin 2008 à 10:09)

Sous firefox il y a pas de barre de défilement!
Sous IE6 ta page s'affiche d'une façon catastrophique (il y a même pas le cadre des fils de discussions!)

- Euh oui, en fait je venais tout juste de trouver l'erreur ! Merci quand même d'avoir penché sur la question.
C'était en fait la largeur du bloc = padding-left + width + padding-right,
donc ma div mesurait en fait 770px, d'où le débordement.
Même si mon design fait 700px en width.

- Sinon pour IE6, je comprends pas pourquoi il y en a qui utilise encore IE6, alors qu'il y a IE7 !!!
J'en vois souvent qui parle de ce navigateur version 6.

Sinon, j'ai essayé pleins de fois d'essayer de rafistoler entre FIREFOX et IE7, mais à un moment donné çà devient compliqué, lourd, et perte de beaucoup de temps.
On a l'impression de ne pas avancer.
Du coup, je bosse mon site pour un affichage optimal avec FIREFOX MOZILLA.

Merci à toi.

dragondz

lundi 16 juin 2008 à 17:23

Selon les stats il y a encore je crois plus de 65% de personnes qui utilisent IE6 (source xitimonitor) (moi je le fais juste pour tester mes sites web) donc tu as encore intérêt à vérifier, sinon tu met un avertissement sur ta apge "Firefox only"

mais entre nous c'est au concepteur de s'adapter au visiteur et non l'inverse, mais c'est toi qui vois!

Zen-Spirit

lundi 16 juin 2008 à 17:53

Oui Dragondz, c'est vrai que c'est au webmaster de s'adapter et non l'inverse !!!
Il est aussi vrai que j'avais l'intention de créer une page intro avec Flash pour mon site, avec une mention du style :
"Pour avoir un affichage optimal du site, vous devez un navigateur à jour ou d'actualité : Pour celà cliquer ici pour télécharger FIREFOX " Avec le logo FIREFOX.
Tu vois ce que je veux dire !
Sinon, Ben même avec IE7, il y a une grosse diffrénece d'affichage avec FIREFOX. Je veux dire le rendu est pas le même.
Merci de tes suggestions.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.