Резиновая блочная верстка в 3 колонки разной высоты на DIV
Верстка
Резиновая блочная верстка в 3 колонки разной высоты на DIVВ предыдущем материале мы говорили о табличной верстке в 3 колонки. Такой метод годится для новичков, так как он достаточно прост. Но профессионалы давно используют блочную верстку.
Вариантов резиновой блочной верстки на DIV-ах существует огромное множество. В этом материале рассмотрим самый простой вариант. В нем первая колонка используется для навигации и имеет фиксированную ширину. Вторая колонка для материала и она может трастягиваться в зависимости от размера окна. Третяя колонка для сопутствующей информации и вспомогательных элементов и также имеет фиксированную ширину. Каждая колонка имеет свою высоту.
Плюсы такой верстки:
- Загрузка структуры страницы происходит синхронно.
- Для обозначения ширины фиксированных колонок можно использовать как проценты, так и пиксели.
- Минимум кода.
Минусы верстки:
- Жесткая семантика. Вначале идет навигация, затем идет вспомогательная информация и только после них основной текст.
- Резиновой может быть только центральная колонка.
Итак, приступим. Основной карскас резиновой блочной верстки в 3 колонки разной высоты на DIV выглядит так:
Колонка 1 (левая)
</div>
<div class="col3">
Колонка 3 (правая)
</div>
<div class="col2">
Колонка 2 (центр)
</div>
<br class="clear">
Тег BR с классом clear нужен для отмены обтекания плавающих блоков.
Стиль для такого каркаса будет такой:
col1{
float: left; /* делаем элемент плавающим и смещаем влево */
width: 25%; /* задаем ширину левой колонки */
background: #f00;
}
col3{
float: right; /* делаем элемент плавающим и смещаем вправо */
width: 30%; /* задаем ширину правой колонки */
background: #00f;
}
col2{
width: 45%; /* задаем ширину центральной колонки (ie fix) */
margin: 0 30% 0 25%; /* задаем отступы под левую и правую колонку */
background: #0f0;
}
clear{
clear: both; /* отменяем обтекание */
font-size: 1px;
}
</style>
Пример резиновой блочной верстки в 3 колонки на DIV:
(навигация)
(форма регистрации, баннеры)
(основной текст)
На этом пока все. Дальше будет больше.
Удачи в свершениях!
Не по теме. Немного смешного видео.
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Резиновая блочная верстка в 3 колонки разной высоты на DIV
Верстка
Скрипты, инструкции, справочники
| Категория: | Верстка |
| Просмотрено: | 12814 |
| Рейтинг: | 4.2/6 |
| Дата добавления: | 2013-11-15 13:14, Пятница |
| Добавил: | Szen |
| Теги: | блочная верстка, 3 колонки, блоки, верстка на DIV, колонки |
Рекомендуем
Дополнительно к Резиновая блочная верстка в 3 колонки разной высоты на DIV
Мини-форум
| № 0 | 2013-11-15 13:14 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Резиновая блочная верстка в 3 колонки разной высоты на DIV". |
| Гость |
