Pourquoi le contenu de cette page déplace-t-il quelques pixels vers la gauche/droite?

J'utilise une mise en page "En-tête centré/Pied de page/2 colonnes CSS". Dans test1.htm, si le contenu de la page est minimal et que le pied de page est entièrement visible dans la fenêtre du navigateur, lorsque vous cliquez sur test2.htm, le contenu de la page est décalé vers la gauche.Pourquoi le contenu de cette page déplace-t-il quelques pixels vers la gauche/droite?

Si test1.htm a suffisamment de contenu pour repousser le pied de page en bas de la fenêtre du navigateur, lorsque vous cliquez sur test2.htm, le contenu de la page reste statique.

Quelqu'un peut-il aider avec ce problème css?

Test1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 

<style type="text/css"> 

body, html 
{ 
    margin:0; 
    padding:0; 
    font-size: 1em; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
} 

#wrap 
{ 
    width:912px; 
    margin:0 auto; 
    background:Green; 
} 

#header 
{ 
    background-color:Gray; 
    height: 120px; 
} 

#leftColumn 
{ 
    float:left; 
    width:230px; 
    padding: 0 10px 10px 10px; 
    background:Red; 
} 

#rightColumn 
{ 
    float:right; 
    width:642px; 
    padding:10px; 
    background:#fff; 
    font-size: 0.7em; 
    color: #828589; 
} 

#footer 
{ 
    clear:both; 
    padding:5px 10px; 
    background-color:Gray; 
} 



</style>  

</head> 


<body> 
    <div id="wrap"> 
    <div id="header"> 
     <div id="nav"> 
     <a href="test1.htm">test1</a> <a href="test2.htm">test2</a> 
     </div> 
    </div> 
    <div id="leftColumn"> 
     <p> 
     left column 
     </p> 
     <br /><br /><br /><br /><br /><br /> 
    </div> 
     <div id="rightColumn"> 
      <div id="PageContent"> 

     <!-- START PAGE CONTENT --> 

     <h1>Page Title </h1> 
     <h4>"test 1 "</h4> 

     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     some words... 
     <!-- 
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     --> 

     <!-- END PAGE CONTENT --> 
     </div> 



    </div> 
    <div id="footer"> 

     the footer 

    </div> 
    </div> 
</body> 
</html>

Test2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 

<style type="text/css"> 

body, html 
{ 
    margin:0; 
    padding:0; 
    font-size: 1em; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
} 

#wrap 
{ 
    width:912px; 
    margin:0 auto; 
    background:Green; 
} 

#header 
{ 
    background-color:Gray; 
    height: 120px; 
} 

#leftColumn 
{ 
    float:left; 
    width:230px; 
    padding: 0 10px 10px 10px; 
    background:Red; 
} 

#rightColumn 
{ 
    float:right; 
    width:642px; 
    padding:10px; 
    background:#fff; 
    font-size: 0.7em; 
    color: #828589; 
} 

#footer 
{ 
    clear:both; 
    padding:5px 10px; 
    background-color:Gray; 
} 

* html #footer { 
    height:1px; 
} 



</style>  

</head> 


<body> 
    <div id="wrap"> 
    <div id="header"> 
     <div id="nav"> 
     <a href="test1.htm">test1</a> <a href="test2.htm">test2</a> 
     </div> 
    </div> 
    <div id="leftColumn"> 
     <p> 
     left column 
     </p> 
     <br /><br /><br /><br /><br /><br /> 
    </div> 
     <div id="rightColumn"> 
      <div id="PageContent"> 

     <!-- START PAGE CONTENT --> 

     <h1>Page Title </h1> 
     <h4>"test 2 "</h4> 

     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     some words... 

     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     some words... 
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 

     <!-- END PAGE CONTENT --> 
     </div> 



    </div> 
    <div id="footer"> 

     the footer 

    </div> 
    </div> 
</body> 
</html>

Source

2009-06-02 Paul Rowland

Avez-vous vérifié si elle est un problème de navigateur? –

arrive sur IE et Firefox, les réponses ci-dessous semblent être correctes, je pense juste à la solution proposée par David Dorwards. –

Ainsi, il semble que la page avec plus de contenu force la fenêtre du navigateur à avoir une barre de défilement, qui à son tour pousse la div centrée vers la gauche comme la zone disponible a été réduite par l'apparence de la barre de défilement.

donc solution possible est de ne pas avoir un div centré, à savoir changer l'ID wrap css

#wrap 
{ 
    width:912px; 
    margin:0 0 0 0; 
    background:Green; 
}

ce look na pas à bien avec ce que je travaillais avec.

Une autre solution était le trop-plein, à savoir l'ajout de cette

html 
    { 
    overflow:scroll;  
    }

cela ressemble vraiment ok, donc probablement aller avec elle.

Je n'ai trouvé une autre solution à l'aide JQuery basée sur this

mise à jour #wrap à

#wrap 
{ 
    width:912px; 
    margin:0 0 0 0; 
    background:#fff; 
     visibility: hidden; 
}

puis utilisez ce qui suit dans chaque page

<script type="text/javascript"> 
    jQuery.fn.center = function() { 
     this.css("position", "absolute"); 

     // Use This line On 'Short Page Content' 
     this.css("left", ($(window).width() - (this.width()+18))/2 + $(window).scrollLeft() + "px"); 

     // Use This line On 'Long Page Content' 
     this.css("left", ($(window).width() - (this.width()))/2 + $(window).scrollLeft() + "px"); 


     return this; 
    } 

    $(document).ready(function() { 
     $('#wrap').center(); 
     $('#wrap').css("visibility", "visible"); 
    }); 

    </script>

Source

2009-06-02 11:42:03

Cela arrive parce que Test2.htm a scrollbar à droite -> qui fait la largeur de Test2.htm inférieure à la largeur de test1 La position de contenu .htm -> centrée est comptée par le navigateur prenant différentes valeurs de largeur => c'est pourquoi la position de gauche est différente dans chaque cas ...

Source

2009-06-02 09:33:56

Votre marge automatique pour la gauche et la droite de la #wrap div provoque le centrage du contenu entier dans la largeur disponible du corps. Dans test2, la largeur disponible est réduite par l'apparence de la barre de défilement, d'où le fait que le contenu semble décalé vers la gauche de la moitié de la largeur de la barre de défilement.

Source

2009-06-02 09:34:31 AnthonyWJones

Il semble que la première page soit suffisamment courte pour être affichée sans barre de défilement, tandis que la deuxième page ne l'est pas. Une barre de défilement occupe de l'espace, de sorte que le canevas est plus étroit, de sorte que le centre de la toile est plus éloigné de la barre de défilement. Les solutions sont soit d'utiliser le débordement pour afficher une barre de défilement tout le temps (je ne dirais pas cela, il permet le défilement lorsque le défilement ne peut pas se produire) ou utiliser un design aligné à gauche (comme la majorité du WWW)

Source

2009-06-02 09:35:43 Quentin

Je dirais que la plupart du Web a un conteneur de largeur fixe, centré sur la conception de l'écran. Pas mon préféré, mais certainement les mondes. –

Votre meilleur pari est de ne pas inquiéter à propos de la barre de défilement. Vous êtes en train de réparer un "problème" qui n'existe pas. Chaque site Web centré a le même problème.

C'est un "comportement attendu" et aucun de vos utilisateurs ne remarquera que votre page déplace quelques pixels vers la gauche - en particulier s'il y a une actualisation de page. Pensez-y - avez-vous déjà remarqué cela sur d'autres sites?

Source

2009-06-02 12:00:17 Emily

Pourquoi faire tout cela quand tout ce que vous avez à faire garder la barre de défilement toujours visible!

html{ 
    height:101%; 
}

Source

2011-03-21 18:35:28 Ray

height: 100%; 
overflow-y:scroll;

Source

2012-06-29 13:46:23 Louis

Pour mon site il n'y avait pas « tortiller » entre les pages dans Safari- je ne remarqué dans Firefox, et la suggestion de Paul Rowland à utiliser overflow: scroll fonctionne parfaitement, car le site est affecté dans Safari mais corrigé dans Firefox. Très utile et merci!

Je ne peux pas croire que sur ce site, des suggestions telles que «ne vous en faites pas» ne soient pas rejetées dans l'oubli.

Source

2013-02-01 19:38:41 Elliott

-1

Si vous chargez javascript pour afficher un bouton facebook ou d'une autre source comme celle-ci, la page va charger le div Facebook qui y est placé, puis se débarrasser de nouveau en provoquant un changement. Essayez d'utiliser css pour le correctif pour donner à ce facebook/quel div une hauteur définie.

Source

2014-02-27 19:10:53 Gooby

Merci beaucoup, les gars. J'ai eu le même problème de transfert de texte ce soir et j'ai eu la chance de trouver ce site et vos suggestions ci-dessus.

Mes deux pages se comportaient de la même manière: l'une créait une barre de défilement et l'autre non. La question de changement de texte a été résolu en ajoutant le code suivant au fichier style.css:

html { overflow:scroll; }

Source

2016-11-18 04:37:17 Kim

Pourquoi le contenu de cette page déplace-t-il quelques pixels vers la gauche/droite?

Répondre

Questions connexes