Исчезает блок (position: absilute) при скроле.

[volshebnyi]

Здравствуйте!

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

http://tia.in.ua/untitled/study_lecture.html

Заранее благодарю за помощь.

[klierik]

main {
    padding: 0 325px;
}

aside {
    left: 0;
}

 

[klierik]

У меня с вышеуказанном кодом получается — http://take.ms/1izha

Разве что добавил

main { box-sizing: border-box; }

... думал то и так понятно.

[Azat Akhmetshin]

Такое поведение предсказуемо, ведь для блока aside Вы установили значение свойства left: -325px; , т.е. отрицательный отступ от левого края блока main и сама верстка фиксированная. Вот он и уходит за пределы экрана при более маленьких разрешениях экрана. Я как вижу, ширина основного блока 1180px. В таком случае нужно и aside и основной контент располагать в пределах основного блока в 1180px. Вы под каким разрешением экрана верстаете?

Edited September 19, 2016 by Azat Akhmetshin

[volshebnyi]

В 19.09.2016 в 22:18, Azat Akhmetshin сказал:

Такое поведение предсказуемо, ведь для блока aside Вы установили значение свойства left: -325px; , т.е. отрицательный отступ от левого края блока main и сама верстка фиксированная. Вот он и уходит за пределы экрана при более маленьких разрешениях экрана. Я как вижу, ширина основного блока 1180px. В таком случае нужно и aside и основной контент располагать в пределах основного блока в 1180px. Вы под каким разрешением экрана верстаете?

Верстаю с основным разрешением 1920 на 1080. Но так же смотрю и на всех основных - больших и маленьких. Просто там сам факт в том, что есть центральный основной блок, а сайдбар должен быть не привязан по центрированию к основному блоку main

[klierik]

1 час назад, volshebnyi сказал:

сайдбар должен быть не привязан по центрированию к основному блоку main

Что значит эта фраза? По верстке не понятно зачем надо было делать sidebar абсолютно позиционированным, ведь достаточно было использовать тот же float

[volshebnyi]

1 минуту назад, klierik сказал:

Что значит эта фраза? По верстке не понятно зачем надо было делать sidebar абсолютно позиционированным, ведь достаточно было использовать тот же float

Если делать обычный двухколоночный макет, оборачивая его, допустим, в блок wrapper (wrapper = main + sidebar), то именно этот wrapper будет центрироваться на странице. А по дизайну нужно чтобы центрировался только main, а sidebar был именно левее. Как это с float можно сделать я не знаю...

[volshebnyi]

4 минуты назад, klierik сказал:

main {
    padding: 0 325px;
}

aside {
    left: 0;
}

 

Вообще не получается...

[volshebnyi]

29 минут назад, klierik сказал:

У меня с вышеуказанном кодом получается — http://take.ms/1izha

Разве что добавил

main { box-sizing: border-box; }

... думал то и так понятно.

Нет. Мне было не понятно про box-sizing...)))

Спасибо Вам огромное. Вот, что получилось - http://tia.in.ua/untitled/study_lecture.html ? Правильно? 

[klierik]

2 минуты назад, volshebnyi сказал:

Правильно? 

Если решение тебе подходит — то оно правильное.

[Azat Akhmetshin]

Вот что творится при разрешении 1366x768

[volshebnyi]

12 часа назад, Azat Akhmetshin сказал:

Вот что творится при разрешении 1366x768

Сайдбар ведет себя правильно. А вот верхнее меню почему-то обрывается...

[Azat Akhmetshin]

4 часа назад, volshebnyi сказал:

Сайдбар ведет себя правильно. А вот верхнее меню почему-то обрывается...

Ваш дизайн не масштабируем. Ширина блока main фиксированная и выталкивается сайдбаром, создавая при этом скролл. Используйте гибкую сетку. Можете приложить макет этого шаблона? 

Edited September 22, 2016 by Azat Akhmetshin

[volshebnyi]

18 часов назад, Azat Akhmetshin сказал:

Ваш дизайн не масштабируем. Ширина блока main фиксированная и выталкивается сайдбаром, создавая при этом скролл. Используйте гибкую сетку. Можете приложить макет этого шаблона? 

В том то и дело, что макет должен быть фиксированным ( не адаптивным). Все ведет себя правильно, кроме верхнего меню. Оно почему-то обрывается, хотя у него установлена ширина 100%...

[Azat Akhmetshin]

12 минуты назад, volshebnyi сказал:

В том то и дело, что макет должен быть фиксированным ( не адаптивным). Все ведет себя правильно, кроме верхнего меню. Оно почему-то обрывается, хотя у него установлена ширина 100%...

Смог добиться такого вида.
Убрал у блока main.study ширину, установил ему padding: 0 0 0 325px. До этого было padding: 0 325px, и это создавало ненужный отступ справа в 325px.

.