Сдвиг Divs вне зависимости друг от друга

Question

Разделители нижней страницы веб-страницы смещаются с выравниванием, когда окно сделано слишком узким или кликнут эскизы изображений. Есть ли способ предотвратить это?

http://nosgoth.net/NR-Test/ff_scroll-test3.html

Обратите внимание, что «frametop» ДИВ и «framebtm» деление с содержать изображения, вставленные в HTML, в то время как «текст», «содержание» и «контейнер» дивы использовать фоновые изображения. Благодарю.

Answer 1

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

Один из способов исправить это было бы использовать медиа-запросы (например, Trix и afelixj). Другой способ - переделать код и не использовать фоновое изображение. Я придерживался такого подхода.

Вместо того, чтобы каждая часть вашего фрейма была построена на элементах, используемых для контента, я переместил их в свой собственный div под названием #frame. С небольшим фиксированным позиционированием ваша оригинальная концепция остается невредимой. Тем не менее, он не реагирует (хотя вы можете сделать его текучим с процентами и единицами просмотра).

Вот полосатая вниз понятие, как я переписал его:

CSS:

#frame .scroll_bg, 
#frame .frametop, 
#frame .frame_sides, 
#frame .framebtm, 
#frame .side_decor { 
    display: block; 
    position: fixed; 
    left: 50%; 
    transform: translate(-50%); 
} 

#frame .side_decor { 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

#frame .scroll_bg, 
#frame .frame_sides, 
#frame .side_decor { 
    z-index: -5; 
} 

#frame .scroll_bg, 
#frame .frametop, 
#frame .frame_sides { 
    top: 0; 
} 

#frame .framebtm { 
    bottom: 0; 
} 

HTML:

<div class="content">...</div> 
<div id="frame"> 
    <img class="scroll_bg" src="http://nosgoth.net/NR-Test/images/scroll_bg.png" alt="" /> 
    <img class="frame_sides" src="http://nosgoth.net/NR-Test/images/frame_sides.png" alt="" /> 
    <img class="side_decor" src="http://nosgoth.net/NR-Test/images/side_decor.png" alt="" /> 
    <img class="frametop" src="http://nosgoth.net/NR-Test/images/frametop.png" alt="" /> 
    <img class="framebtm" src="http://nosgoth.net/NR-Test/images/framebtm.png" alt="" /> 
</div> 

Я поставил раму на дне (так было бы поверх всего остального) и перемещает каждую часть на место с фиксированным позиционированием. Фон прокрутки, боковые панели и боковые декорации получили отрицательный индекс z, чтобы все содержимое было поверх него и оставалось кликабельным.

После этого было сделано все, что нужно. Я немного поиграл с вашими значениями, но по большей части остальная часть кода - ваша (тело и html - единственные другие места, которые я внедрил).

Все это по-прежнему перемещается, когда изображения нажимаются внизу, но у меня есть подозрение, что это проблема fancybox.

Вот код final result.

Answer 2

Это потому, что это div

<div class="text"></div> 

имеет фиксированную ширину фоновое изображение:

.text { 
    background-image: url(images/side_decor.png); 
} 

Если вы хотите, чтобы сделать это правильно в различных размерах окна браузера, вы можете рассмотреть возможность иметь несколько копий от side_decor.png и назначить тему для разных броузеров шириной:

@media screen and (max-width: 400px){ 
    .text { 
     background-image: url(images/side_decor_400.png); 
    } 
} 
@media screen and (min-width: 400px) and (max-width: 800px){ 
    .text { 
     background-image: url(images/side_decor_800.png); 
    } 
} 

Answer 3

Для быстрого исправления, пожалуйста, попробуйте добавить следующие стили

body{ 
    max-width: 814px; 
    width: auto; 
} 
.frametop, .framebtm { 
    left: 50%; 
    transform: translateX(-50%); 
} 
@media (max-width: 680px){ 
    body{ 
     overflow-x: hidden; 
    } 
    img{ 
     height: auto; 
     max-width: 100%; 
    } 
    .text{ 
     padding: 0 20px; 
    } 
}