DIV меняет положение на странице zoom

после прочтения подобных вопросов по stackoverflow, ничто, казалось, не решило эту проблему. Вот оно ..DIV меняет положение на странице zoom

У меня есть DIV в верхней части моей страницы, которую я использую в качестве меню. Размеры: 1920px на 50px. А код CSS для этого является:

#top_bar{height:50px; width:1920px; margin:0px auto; 
background:url("img/top_bar.png"); left:0px; top:0px; position:relative;}

Я тогда содержание #wrapper DIV под то, что есть широкий и 960 х центрирован. Код CSS для этого является:

#wrapper{width:960px; margin:0px auto; overflow:hidden; left:0px; top:0px; 
position:relative;}

Когда я приближать на странице, содержание #wrapper DIV остается в правильном положении (по центру), но #top_bar DIV перемещается вправо.

HTML-код страницы является:

<body> 

<div id="top_bar"> 
    (...menu links, etc) 
</div> 

<div id="wrapper"> 
    (...page content) 
</div> 

</body>

Я нахожусь в процессе фиксации этого для клиента таким образом, любые решения будут высоко оценили. Заранее спасибо :)

источник

2014-01-03 Anonymous

Он по-прежнему делает то же самое, даже если я изменю его на: position: absolute; или положение: фиксированное; Даже если я оставлю его пустым. Есть ли обходной путь? Спасибо. –

Вы должны использовать поплавки и отображать их в встроенном блоке. – BuddhistBeast

Спасибо @BuddhistBeast оба дисплея: блок; и отображение: встроенный блок; работал. –

Он не сдвигается, похоже, что он делает это только потому, что ширина 1920px проходит хорошо по краям экрана. Другой div намного меньше.

Если вы хотите, чтобы оба дивов появляться одинаково выровнены вы должны дать им те же ширины

источник

2014-01-04 00:20:43 rcorrie

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

Как это: http://codepen.io/anon/pen/gJEwc – rcorrie

Благодарим страницу Масштабирование посередине, но верхний бар div по-прежнему перемещается или «сдвигает» вправо. –

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

DEMO HERE

HTML:

<div class="side-pannel" id="left-pannel"></div> 
<div id="container"> 
    <div class="two-item-column"> 
     <div class="item1 column-border-middle">1</div> 
     <div class="item2 column-border-middle">2</div> 
    </div> 
</div> 
<div class="side-pannel" id="right-pannel"></div>

CSS:

#container { 
    position: relative; 
    width: 88%; 
    height: 580px; 
    float: left; 
} 
.side-pannel { 
    position: relative; 
    width: 6%; 
    height: 580px; 
    float: left; 
} 
.two-item-column { 
    position: relative; 
    width: 100%; 
    float: left; 
} 
.column-border-middle { 
    border-right: 1px solid black; 
} 
.item1 { 
    height: 288px; 
    background: #ccc; 
} 
.item2 { 
    height: 291px; 
    background: #ccc; 
    border-top: 1px solid black; 
}

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

источник

2014-01-04 00:52:55

DIV меняет положение на странице zoom

ответ

Смежные вопросы