БлогNot. Пять простых макетов сайта из двух колонок одинаковой высоты

Пять простых макетов сайта из двух колонок одинаковой высоты

Способов, разумеется, можно придумать больше, я включил в статью только те, то успел написать и проверить за пару пар 16 февраля 2021-го.

Макеты реализованы непосредственно как прикреплённые файлы .html в кодировке Юникода UTF-8, пояснения содержатся в тексте файлов, продублирую их здесь в целях лучшей находимости.

Для простоты стили помещены внутри тега <head> документов, в реальном шаблоне их лучше вынести в отдельный стилевой файл, помещённый во вложенную папку, например, как вот здесь.

Макет 1. Шапка, две колонки резиновой ширины и футер

Чтобы колонки были "резиновыми", ширина раздела контента указана в процентах.

К колонке с контентом применено float: right;, чтобы она прижалась вправо, а колонка с меню поднялась на один уровень с ней.

Чтобы меню не залезло под контент, у него установлен margin-right: 80%;, соответствующий ширине блока с контентом.

Если высота контента окажется больше, чем меню, остаться внизу футеру поможет отмена обтекания clear: both;

 template_1.html, открыть в текущем окне/вкладке (2 Кб)

Макет 2. Шапка, две колонки с контентом впереди и футер, дополнительная обёртка для контента

В этом макете контент дополнительно обёрнут в раздел #wrapper. Чтобы колонка меню могла обтечь контент, разделу-обёртке было задано левое отрицательное поле margin-left: -20%;. Также этому блоку нужна ширина в 100%, чтобы при всплытии вправо его ширина не уменьшалась.

Чтобы контент не "залезал" под меню, ему задано такое же левое положительное поле, как ширина меню: margin-left: 20%;

Колонке меню дополнительно указано float: left;, так как без этого старые браузеры не поднимут меню на один уровень с контентом. Плюс без этого у меню не будет фонового цвета.

Футеру по-прежнему нужно прерывание обтекания clear: both;, чтобы он всегда находился под колонками.

 template_2.html, открыть в текущем окне/вкладке (3 Кб)

Макет 3. Смещение колонок и контейнера

Вот ещё один двухколоночный макет.

Для #sidebar и #content задаются float: left;, position: relative; и устанавливается относительная ширина.

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

У контейнеров указано то же значение float, что у колонок (можно было всё сделать и right). Им же задан фоновый цвет для основных колонок.

Вложенный div по порядку наложения выше, чем внешний. Мы сдвигаем внутренний div так, чтобы он показывался только там, где мы хотим отображать боковую панель (right: 75%;). Это позволит фону внешнего div проступать там, где мы хотим показать колонку с контентом.

Позиционируем внутреннюю колонку, установив значение right на 75% (точней, на такое же, как ширина колонки с контентом).

Содержимое обоих колонок также сдвинется на 75% влево, мы возвращаем их на место, сказав left: 75%;.

Недостаток метода, пожалуй, лишь в том, что два внешних div'а не семантичны, а служат только для оформления. Ну и при попытке растянуть вертикальный размер с помощью min-height, как в примерах 1 и 2, всё заполнится фоном container-outer. Правда, указать минимальный вертикальный размер в пикселях для container-inner - не проблема, что и сделано в шаблоне.

 template_3.html, открыть в текущем окне/вкладке (3 Кб)

Макет 4. Простой семантический макет на двух колонках и display

Здесь мы просто пользуемся возможностями свойства display по отображению элементов, ведущих себя как ячейки таблиц.

К тому же, контент и сторонее содержимое семантически правильно помещены в соответствующие теги.

 template_4.html, открыть в текущем окне/вкладке (2 Кб)

Макет 5. Огромные безумные отступы

Неканонично, но забавно.

Обратите внимание на значения margin-bottom и padding-bottom у колонок.

Суммарная ширина двух колонок должна равняться ширине из класса content.

Обе колонки "подрежут" слишком длинное содержимое, например, 1000 символов подряд без пробелов.

 template_5.html, открыть в текущем окне/вкладке (2 Кб)

16.02.2021, 22:58 [1083 просмотра]


теги: html css вебдезигн

К этой статье пока нет комментариев, Ваш будет первым