Исчезает блок (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]

  On 9/19/2016 at 7:18 PM, Azat Akhmetshin said:

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

Expand  

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

[klierik]

  On 9/21/2016 at 7:49 AM, volshebnyi said:

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

Expand  

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

[volshebnyi]

  On 9/21/2016 at 8:54 AM, klierik said:

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

Expand  

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

[volshebnyi]

  On 9/21/2016 at 9:03 AM, klierik said:

main {
    padding: 0 325px;
}

aside {
    left: 0;
}

 

Expand  

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

[volshebnyi]

  On 9/21/2016 at 9:19 AM, klierik said:

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

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

main { box-sizing: border-box; }

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

Expand  

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

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

[klierik]

  On 9/21/2016 at 9:49 AM, volshebnyi said:

Правильно? 

Expand  

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

[Azat Akhmetshin]

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

[volshebnyi]

  On 9/21/2016 at 6:34 PM, Azat Akhmetshin said:

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

Expand  

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

[Azat Akhmetshin]

  On 9/22/2016 at 7:21 AM, volshebnyi said:

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

Expand  

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

Edited September 22, 2016 by Azat Akhmetshin

[volshebnyi]

  On 9/22/2016 at 12:12 PM, Azat Akhmetshin said:

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

Expand  

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

[Azat Akhmetshin]

  On 9/23/2016 at 7:09 AM, volshebnyi said:

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

Expand  

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

.