Резиновый трёхколоночный макет


Резиновая средняя колонка в трехколоночном макете

Очень часто нужно сделать трех колоночный макет сайту, где две крайних из них должны быть фиксированные, а средняя (вторая) стягиваться и растягиваться (должна быть резиновой). Когда-то давно я нашел подходящее для себя решение с отрицательным маргином и применил на одном сайте.

Всякий раз, когда нужно это повторить на другом, новом сайте, мне приходится лезть в код того, старого сайта и выковыривать эту информацию.

Спустя уже практически 3 года, я наконец-то решился вынести эту информацию в отдельную публикацию, к которой я всегда могу вернуться и перенять эту технологию на новый сайт.

Трехколоночный макет

Двухколоночный макет

Точно таким же способом можно сделать двухколоночный макет.

Самый оптимальный резиновый макет?

29.11.2013, 12:05

Резиновый макет
Может кто обьъснить,как делаются резиновые макеты,и размещение ссылок на резиновом меню. за ранние.

Резиновый макет.
Доброе время суток всем. Есть один впросс!! Подскажите где можно скачать макет РЕЗИНАВОГО сайта.

Резиновый макет на CSS
Подскажите как правильно нужно сделать, делаю первый сайт блочными элементами Div,есть два вопроса.

Двухколоночный резиновый макет
Здравствуйте, коллеги. Как сделать такой макет: две колонки, ширина одной вычисляется автоматически.

резиновый макет с bootstrap
НЕ получается доверстать макет с бутстрапом (первый раз с ним работаю). Как сделать что бы: 1).

Diplom Consult.ru

Трехколоночный макет часто используется в тех случаях, когда двух колонок уже недостаточно или требуется особым образом разделить материал. Например, одна колонка отдается под навигацию, вторая под контент, а в третьей публикуются новости сайта или другая информация (рис. 6.13). Три колонки обеспечивают большую свободу выбора размещения материалов вроде иллюстраций, рекламных баннеров, объявлений и др,

Рис. 6.13. Трёхколоночный макет

Методы формирования колонок похожи на методы для двухколоночного макета, это применение свойств float и position . Независимо от способа структура кода похожа. Контейнером выступает слой layout , для которого задаётся общая ширина макета и выравнивание, внутри располагаются слои создающие колонки.

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

Для слоя layout устанавливается относительное позиционирование, а для слоёв nav , content и sidebar — абсолютное. При таком сочетании положение элементов меняется относительно родителя с помощью свойств left , right , top , bottom . Впрочем, из этого набора понадобится только left и right

Пример 6.8. Свойство position

XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

http-equiv= «Content-Type» content= «text/html; charset=utf-8» /> Трёхколоночный макет

Резиновая верстка div 3 колонки (HTML)

Резиновый макет HTML-страницы из трех колонок лучше делать, при помощи див слоев (Страница загружается быстрей, поисковые системы довольны и это круче верстки таблицами).

Пример

Например нужно сделать макет из трех колонок, левая и правая колонки должны быть фиксированной ширины, а центральная резиновой.

Обратите внимание на код! Центральный див слой (

В левой колонке часто располагается навигация сайта.

В правой колонке часто размещают новости, форму авторизации, поиска, ссылки, спонсоры и так далее.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Многоколоночный макет

В предыдущем примере среди прочего мы познакомились с тегом

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

Попробуем снова на рисунке определить функциональные части, которые отобразим в HTML. У нас есть левая колонка содержащая меню. В центральной колонке располагается основное содержание страницы. Правая колонка содержит краткий текст.

Илон Маск рекомендует:  Псевдокласс focus в CSS

Начнём с контейнера, который содержит эти три колонки. Как уже отмечалось ранее, мы хотим чтобы все они занимали пространство не шире 960 пикселей. В HTML нет специальных тегов для такого условия, мы будем использовать старого знакомого, тег

Мы только что дали

Теперь добавим место для меню, оно будет в

Двигаемся дальше и поместим контейнер для основного содержимого в среднюю колонку:

А теперь правая колонка, боковая панель или «сайдбар».

Теперь проанализируем наш следующий шаг основываясь на изображении. Что должно содержаться в левой колонке? Как предполагает название, это должно быть наше меню из предыдущих упражнений:

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

Средняя колонка будет содержать статью и форму комментариев:

В правую колонку мы положим боковой элемент не связанный с основным содержанием, используя тег :


Хорошо, наш HTML готов. Теперь пришло время для CSS. Первая задача — это установить максимальную ширину основного контейнера с классом main-container :

Мы задали ему свойство max-width , теперь что бы ни случилось, ширина всего контейнера с классом main-container никогда не будет шире 960 пикселей.

Далее центрируем блок. Это делается путём установки автоматических полей:

С помощью этого кода браузер берёт всё свободное пространство вокруг main-container и распределяет пространство поровну между двумя краями.

Теперь у нас есть готовый код отвечающий за основной контейнер. Перейдём к коду для трёх колонок. Пусть контейнер с меню занимает 20% от доступной ширины. Это делается просто, указав значение в процентах:

И аналогичная ширина для правой колонки:

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

Теперь перейдём к средней колонке. Она займёт оставшуюся ширину (60%), так как две боковые колонки занимают в сумме 40%.

К сожалению, наши контейнеры по-прежнему выводятся в виде блоков (один над другим). Чтобы установить их рядом друг с другом мы должны дать им специальное свойство float . Мы используем его, чтобы сказать браузеру, что хотим сделать элемент X ближе к левому или правому краю контейнера, в котором он находится. Когда контейнер содержит «плавающие» элементы у левого края, то они устанавливаются рядом друг с другом и мы можем хитро воспользоваться возможностями этой механики.

Всё это для того, чтобы левая колонка «прилипла» к левому краю основного контейнера.

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

По умолчанию это выглядит так:

Так происходит, потому что тег является компонентом «строки», так как он был вставлен в начале строки и текст будет просто следовать за ним.

Однако если мы установим для изображения float как right , то получим в какой-то степени намного лучший вид:

Картинка теперь «плавает» у правого края текста, в котором она находится. В нашем случае это края абзаца

Теперь установим float как left :

Как видите, картинка теперь «плавает» у левого края абзаца, а текст обтекает её по правой стороне.

Возвращаясь к нашим колонкам, мы можем сделать то же самое для колонок, которые хотим расположить «слева» по краю контейнера. Обратите внимание, что мы добавляем float для всех контейнеров, группируя их через запятую:

Бинго! Смотрим теперь как наш браузер отображает элементы:

Проанализируем, что произошло после того, как мы добавили float: left . Каждый элемент пытается «плыть» влево согласно приоритету в списке. В этом случае .site-nav занимает левый край, .main-content встаёт рядом в линию, чтобы заполнить крайнее левое пространство. Наконец, .sidebar заполняет последний «левый» край, завершая расстановку.

Отлично! Мы только что получили многоколоночную компоновку. Для иллюстрации этой темы добавим фоновый цвет к каждой колонке:

Эффект подходящий. Следующий результат показывает, что нам удалось правильно разделить основное содержание на колонки:

Финальный код CSS выглядит следующим образом:

С помощью этого кода мы создали простой макет с тремя колонками. Теперь нужно просто вставить остальной код HTML и CSS из предыдущих упражнений и наша работа сделана!

Резиновый трёхколоночный макет

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Илон Маск рекомендует:  Что такое код imap_getsubscribed

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Макет из трех колонок. Резиновый трёхколоночный макет

Резиновый макет с тремя колонками, пожалуй, самый гибкий и настраиваемый из существующих макетов. Сочетание процентов и пикселов для указания ширины колонок позволяет делать разные макеты, выбирая их под свои задачи. На рис. 5.17 представлены варианты трёхколоночных макетов, для удобства они пронумерованы.

Рис. 5.17. Трёхколоночные макеты

Здесь символ процентов (%) означает, что ширина колонки задана в процентах от ширины макета, px — ширина колонки указана в пикселах, а знак бесконечности (∞), что колонка занимает оставшееся пространство. Несмотря на обилие разных макетов, принципы их построения остаются одинаковыми и включают два основных способа: позиционирование и плавающие элементы. Также можно воспользоваться таблицами для создания колонок одинаковой высоты.

Использование позиционирования

Для управления положением слоёв относительно родительского элемента необходимо для родителя установить свойство position со значением relative , а дочерним элементам, которые формируют колонки, значение absolute . Структура кода для первых четырёх макетов будет одинаковой и представлена в примере 5.13.

Пример 5.13. Две колонки в пикселах или три в процентах

Верстка сайта с нуля. Трехколоночный макет. Часть 4

Мы продолжаем серию уроков по верстке сайта с нуля с плоским дизайном. На первом уроке была сверстана шапка макета. На втором уроке — блок с большой картинкой. На третьем — галерея с иконками портфолио. Сегодня нам предстоит сверстать трехколоночный макет.

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

Следуя рекомендациям W3C по использованию HTML5, каждая колонка была сгруппирована в теге: article. Поскольку содержимое каждой из трех колонок можно легко объединить в три похожих по смыслу группы.

Появление новых смысловых блочных тегов, облегчает работу вебмастерам. До появления HTML5, исходник с HTML-кодом был весь «забит» div-ами. Разбираться в таком коде было крайне тяжело, приходилось ставить много комментариев. В современной блочной верстке применять тег div следует только там, где не подходят другие.

Итак, давайте приступим к верстке трехколоночного макета. Для начала создадим секцию section с коричневым фоном, куда поместим три белых блока. В обычном потоке данные блоки встали бы друг под другом. Но мы меняем им данное свойство по умолчанию, прописав в стилях у всех трех блоков float:left; Таким образом, поставив их в один ряд. После этого, не забываем делать отмену обтекания, прописав пустой блок div.

и соответственно в стилях будет:


Кусок кода верстаемого блока на HTML-странице:

Обо мне

Я умный, милый, обаятельный и в меру упитанный мопс.

Мой загадочный друг

Мы с Каспером лучшие друзья. Он конечно внешне не такой милый как
я, но мне нравиться с ним играть. Он загадочный и похож на инопланетянина.

Мое главное занятие

Я могу спать везде и всегда — дома на подоконнике, на всех
кроватях и диванах, а особенно в машине у мамы на ручках. Меня дома называют «спящая красавица»

Мои хобби

Я собака-компаньон. Что это значит на деле? На самом деле долгие
прогулки с хозяином — это не про меня. А вот красиво лежать на диване — здесь нет мне равных.

Обратите внимание на то, что такой лаконичный и легкий для восприятия HTML-код, нравиться не только верстальщикам и программистам, но и поисковым машинам. Индексировать ваш сайт им будет легко и приятно.

Содержимое CSS3 файла стилей предназначено только для браузеров. Оттуда они узнают, как надо отображать дизайн сайта.

.about <
color:#fff;
background-color: #a87a7a; /* коричневый фон секции «Обо мне» */
text-align:center; /* позиционирование текста */
padding: 5em 0em; /* отступы для текста */
>
.wrap_about <
width: 90%; /* занимаемая ширина блоков по отношению к браузеру */
margin: 0 auto; /* расположение секций по центру */
>
.about h2 <
font-size:2em;
padding-bottom: 0.5em; /* отступ снизу для заголовка */
>
.about p <
font-size:1em;
padding-bottom: 4em; /* отступ снизу для параграфа */
>
.grid <
width: 30%; /* ширина белого блока */
float: left; /* выстраивание в ряд трех белых блоков */
background-color: #fff; /* цвет блока */
margin: 0 1.5% 0 1.5%; /* отступы для белых блоков */
border: 1px solid black;
min-height: 508px; /* минимальная высота белых блоков */
>
.grid h3 < /* цвет,размер и верхний отступ для заголовка белого блока */
color: #292828;
font-size: 1.4em;
margin-top: 15px;
>
.grid p < /* значения свойств для параграфа белого блока */
color: #444444;
font-size: 1.02em;
text-align: left;
padding: 1em 1em 2em 1em;
line-height: 1.9em;
>
.clear /* отмена float */

Илон Маск рекомендует:  Атрибут marginheight в HTML

Посмотреть на готовый результат Вы можете на jsfiddle

Дорогие друзья! Вы наверное согласитесь со мной, что верстать сайт с нуля, увлекательный и творческий процесс. Не говоря о том, что такие умения востребованы на рынке труда и хорошо оплачиваются. Однако, работая в одиночку, вы рано или поздно упретесь в потолок, в плане доходности этого бизнеса. Мой новый курс «Своя Web-студия за 55 дней» поможет Вам открыть успешную Web-студию в разы увеличить Ваш доход, просто повторяя за мной все действия.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 2 ):

    Привет всем, хочу представить миру новый редактор кода HTML, JavaScript и jQuery, прошу оценить http://ciberfox.ru Я думаю что это очень хороший инструмент для вебмастеров желающих сэкономить свое время на создании сайта.

    А бывает при редактировании просто всё слетает в нуль. А так лучше при работе и написания каких либо гиперссылок, лучше всего сохраняться старый вариант

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Резиновый шаблон

    Чтобы сделать резиновый шаблон, вам нужно изменить единицы измерения ширины у селекторов #leftcol и #rightcol , а именно, вместо пикселей установить проценты. А для селектора #wrap указать минимальную ширину min-width , при которой будет появляться горизонтальная полоса прокрутки. Например, возьмем фиксированный шаблон с тремя колонками, в файле style.css укажем следующие свойства для селектора #wrap :

    И для боковых колонок вместо 180px установим ширину, равную 20% .

    Посмотреть примеры для резинового шаблона можно, перейдя ссылкам:

    Все шаблоны для фиксированного макета находятся в папке fix, для резинового макета в папке float данного учебника.

    Diplom Consult.ru

    Трехколоночный макет часто используется в тех случаях, когда двух колонок уже недостаточно или требуется особым образом разделить материал. Например, одна колонка отдается под навигацию, вторая под контент, а в третьей публикуются новости сайта или другая информация (рис. 6.13). Три колонки обеспечивают большую свободу выбора размещения материалов вроде иллюстраций, рекламных баннеров, объявлений и др,

    Рис. 6.13. Трёхколоночный макет

    Методы формирования колонок похожи на методы для двухколоночного макета, это применение свойств float и position . Независимо от способа структура кода похожа. Контейнером выступает слой layout , для которого задаётся общая ширина макета и выравнивание, внутри располагаются слои создающие колонки.

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

    Для слоя layout устанавливается относительное позиционирование, а для слоёв nav , content и sidebar — абсолютное. При таком сочетании положение элементов меняется относительно родителя с помощью свойств left , right , top , bottom . Впрочем, из этого набора понадобится только left и right

    Пример 6.8. Свойство position

    XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

    http-equiv= «Content-Type» content= «text/html; charset=utf-8» /> Трёхколоночный макет

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL