Как сверстать(вопрос внутри)?

Question

[gleendo]

Не понимаю как верстать сайты у которых есть слева или справа блок, который не зависит от остального контента. Он всегда стоит на одном месте или выезжает при нажатии отпределенной кнопки.
Например что то похожее реализовано здесь(тостер).

Как реализовывать такие блоки?

Я попробывал сделать, но получилось совсем не то. Блок слева получился, но вот остальной контент заходит под него. Как сделать чтобы получилось что похожее на 2-х колоночный макет, где блок слева будет во всю высоту экрана и будет фиксированным, а все остальное будет как обычный сайт со скролом.

PS. Как вообще научиться верстать более сложные макеты. Где почитать про техники верстки сложных макетов.

Ссылка на CodePen - codepen.io/evg_/pen/xGyRdm

Answer 1

[Дмитрий]

например блок слева:

<div class='left'>
<a>Тостер 1</a>
<a>Тостер 2</a>
<a>Тостер 3</a>
</div>

.left{
position:fixed;
top:0;
bottom:0;
left:0;
width:200px;
}

Comments

[Дмитрий]

а ну и у второго блока (с контентом) margin-left:200px или padding-left:200px;

[gleendo]

Так не сработает. контент просто сдвинется и появится гор.скролл

[Андрей Гончаров]

Все верно, у контента width: 100%; padding-left: 200px;

[gleendo]

Андрей Гончаров: Да работает, просто картинки нужно было в отдельный контейнер обернуть, а я самим картинкам давал отступ.
Это правильный вообще подход или можно как то лучше сделать?

[Андрей Гончаров]

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

Answer 2

[sashavol]

Это обычные фиксированные блоки, посмотрите на ютубе, там обучения полно

Answer 3

[Андрей Б.]

Конкретно в вашем примере, укажите

body {
    padding-left: 250px; // отступ равный ширине колонки
}

Либо оберните все содержимое в блок, например .wrap и для него пропишите такие стили

.wrap {
    width: 100%;
    height: 100%;
    padding-left: 250px; // отступ равный ширине колонки, это добавит прокрутку снизу
    box-sizing: border-box; // нужно чтобы отступ включался в ширину, это уберет прокрутку снизу
}

Результат будет аналогичен.
Это часто используемый метод.

Comments

[gleendo]

Большое спасибо за развернутый ответ. так и буду делать.

Answer 4

[Вадим Полухин]

Как из вариантов (плохой)
codepen.io/anon/pen/pJxNQV

Comments

[gleendo]

Да вот так примерно мне нужно. А почему это плохой вариант?

Answer 5

[kolibry1]

position: fixed;

Answer 6

[iamdeveloper]

Советую вам онлайн-ресурс htmlacademy
Во первых, там имеется множество заданий по всем темам, касающимся верстки. Задания выполняются в онлайн режиме, после выполнения, можно проверить правильность выполнения. Часть заданий доступна бесплатно, часть - по платной подписке (300 руб/мес).

Во-вторых, есть курсы - интенсивы, на которых еще больше обучают всем особенностям верстки. Делятся на Базовый и Продвинутый (также есть курс по JS). Лучше проходить эти интенсивы уже после выполнения этих заданий, т.к. на курсе на них же отправляют.

В-третьих есть ежемесячная рассылка, в к-рой помимо всего прочего высылаются макеты для тренировки

От себя скажу, что все эти 3 компонента вместе довольно неплохо прокачивают как верстальщика. До этого ресурса я верстал очень неуверенно и многих вещей не знал.

Сейчас же чувствую себя уверенно верстке. Устроился работать верстальщиком в веб-студию и расту до полноценного фронтендера!