Почему содержимое этой страницы сдвигается на несколько пикселей влево / вправо? - PullRequest
Новая
       18

Почему содержимое этой страницы сдвигается на несколько пикселей влево / вправо?

3 голосов
/ 02 июня 2009

Я использую макет "Центрированный верхний / нижний колонтитул / 2 столбца".

В test1.htm, если их минимальное содержимое страницы и нижний колонтитул страницы полностью виден в окне браузера, то при нажатии на test2.htm содержимое страницы сдвигается влево.

Если у test1.htm достаточно содержимого, чтобы отодвинуть нижний колонтитул от нижней части окна браузера, то при нажатии на test2.htm содержимое страницы остается статичным.

Кто-нибудь может помочь с этой проблемой 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>

Ответы [ 10 ]

11 голосов
/ 02 июня 2009

Похоже, что первая страница достаточно короткая, чтобы отображаться без полос прокрутки, а вторая страница - нет.

Полоса прокрутки занимает место, поэтому холст сужается, поэтому центр холста находится дальше от полосы прокрутки.

Решения заключаются либо в использовании переполнения для отображения полосы прокрутки все время (я бы не советовал это делать, когда допускается прокрутка, когда прокрутка невозможна), либо в использовании выровненного по левому краю рисунка (как в большинстве WWW)

4 голосов
/ 02 июня 2009

Это происходит потому, что test2.htm имеет полосу прокрутки справа ->, что делает ширину test2.htm меньше ширины test1.htm -> центрированная позиция контента учитывается браузером, принимающим разные значения ширины =>, поэтому оставлена Положение отличается в каждом случае ...

3 голосов
/ 02 июня 2009

Таким образом, кажется, что страница с большим содержанием заставляет окно браузера иметь полосу прокрутки, что, в свою очередь, сдвигает центрированный элемент div влево, поскольку доступная область была уменьшена появлением полосы прокрутки.

Таким образом, возможное решение состоит в том, чтобы не иметь центрированного div, т.е. изменить идентификатор переноса css на 

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

это не выглядело хорошо с тем, с чем я работал.

Другим решением было переполнение, т.е. добавление этого 

  html
  {
    overflow:scroll;    
  }

это на самом деле выглядит нормально, так что, вероятно, пойдет с этим.

Я нашел другое решение с использованием JQuery на основе this

обновить #wrap до 

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

затем используйте следующее на каждой странице 

  <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>
3 голосов
/ 02 июня 2009

Ваше автоматическое поле слева и справа от #wrap div приводит к центрированию всего содержимого по доступной ширине тела. В test2 доступная ширина уменьшается за счет появления полосы прокрутки, поэтому содержимое кажется смещенным влево на половину ширины полосы прокрутки.

2 голосов
/ 21 марта 2011

Зачем все это, когда все, что вам нужно сделать, держать полосу прокрутки всегда видимой! 

html{
   height:101%;
}
1 голос
/ 01 февраля 2013

Для моего сайта не было никакого "колебания" между страницами в Safari - я заметил это только в Firefox, и предложение Пола Роуленда использовать overflow: scroll работает отлично, потому что сайт не затронут в Safari, но исправлен в Firefox. Очень полезно и спасибо!

Я не могу поверить, что на этом сайте предложения, такие как "не беспокойся об этом", не сводятся к забвению.

1 голос
/ 29 июня 2012 
height: 100%;
overflow-y:scroll;
1 голос
/ 02 июня 2009

Лучше всего не беспокоиться о полосе прокрутки. Вы исправляете «проблему», которой не существует. Каждый центрированный веб-сайт имеет одну и ту же проблему.

Это "ожидаемое поведение", и никто из ваших пользователей не заметит, что ваша страница сдвигается на пару пикселей влево - особенно если происходит обновление страницы.

Подумайте об этом - вы когда-нибудь замечали это на других сайтах?

0 голосов
/ 18 ноября 2016

Большое спасибо, ребята. Сегодня вечером у меня была та же самая проблема со сменой текста, и мне повезло найти этот сайт и ваши предложения.

Мои две страницы вели себя одинаково - одна создала полосу прокрутки, а другая - нет. Проблема смещения текста была решена путем добавления следующего кода в файл style.css:

html { overflow:scroll; }

0 голосов
/ 27 февраля 2014

Если вы загружаете javascript для отображения кнопки, похожей на facebook, или из другого источника, подобного этому, на странице будет загружен раздел Facebook, который находится там, а затем снова от него избавитесь, что вызовет сдвиг. Попробуйте использовать css для исправления, чтобы придать этому Facebook / любому другому div установленную высоту.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...