Резиновая блочная верстка с фиксированными колонками по бокам

**archerl** · 04.10.2011 00:30

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

Для начала рассмотрим стандартную разметку для блочной верстки.

Код HTML:

<div id="wrapper"> <div id="header">
    Шапка
  </div> <div id="content_right"> <div id="content">
      Контент
    </div> <div id="right">
      Правая колонка
    </div> </div> <div id="left">
    Левая колонка
  </div> <div id="footer">
    Подвал
  </div> </div>

Блок wrapper служит «оберткой» для всей нашей верстки Назначения остальных блоков такие: header – заголовок или шапка сайта; content – основное содержимое сайта (центральная колонка); right – правая колонка; left – левая колонка; footer – «подвал» сайта; content_right – вспомогательный (не семантический) блок, содержащий центральную и правую колонки сайта.

Данная модель прекрасно подходит для верстки с фиксированными или заданными процентным соотношением колонками. Для нашей же задачи необходимо добавить два не семантических элемента content_right_inner и content_center. Вот как это выглядит.

Код HTML:

<div id="wrapper"> <div id="header">
    Шапка
  </div> <div id="content_right"> <div id="content_right_inner"> <div id="content_center"> <div id="content">
          Контент
        </div> </div> <div id="right">
        Правая колонка
      </div> </div> </div> <div id="left">
    Левая колонка
  </div> <div id="footer">
    Подвал
  </div> </div>

Далее пропишем стили для наших блоков. Для начала зададим минимальную ширину сайта в 800 пикселей.

Код HTML:

#wrapper
{
  min-width: 800px;
}

Боковые колонки сделаем шириной в 200 пикселей и с помощью отрицательных и положительных margin-ов описываем остальные стили.

Код HTML:

#header
{
  height: 100px;
  color: white;
  background-color: blue;
}
#content_right
{
  width: 100%;
  float: right;
  margin-left: -200px;
}
#content_right_inner
{
  margin-left: 200px;
}
#content_center
{
  width: 100%;
  float: left;
  margin-right: -200px;
}
#content
{
  margin-right: 200px;
  color: white;
  background-color: green;
}
#right
{
  width: 200px;
  float: right;
  color: white;
  background-color: gray;
}
#left
{
  width: 200px;
  float: left;
  color: white;
  background-color: red;
}
#footer
{
  clear: both;
  height: 50px;
  color: white;
  background-color: purple;
}

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

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

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

Автор статьи: http://chtonovenkogo.ru

**FullHouse** · 04.10.2011 12:13

Мой вариант, вроде, с меньшим кодом

PHP код:

     <div id="header"><p>Шапка</p></div>

        <div id="left-col">Левая колонка</div>

        <div id="right-col">Правая колонка</div>

 
        <div id="center-col">Центральная колонка</div>

    <div id="footer">футер</div>

и CSS

PHP код:

 /*Границы для вида*/

#header {width:100%; height:200px; border: 1px solid black;}

#left-col {width:250px; float:left; border: 1px solid green;}

#right-col {width:250px; float:right; border: 1px solid green;}

#center-col {margin:0 250px 0 250px; border: 1px solid red; height:500px;}

#footer {width:100%; height:200px; border: 1px solid black; clear: both;}

Валидность не гарантирую(не проверял), но работает точно.
Скачать одним архивом http://www.qpqr.ru/htmlTemplate.rar

Кстати, вместо wrapper я бы задействовал body, если фон будет белый.

**Faraday** · 04.10.2011 16:57

Мой вариант, вроде, с меньшим кодом

Минус этого варианта в том, что сначала идут сайдбары, а только потом контент. Поэтому сначала в браузер загружается (или поисковый робот ест) баннеры, всякие теги, и прочий мусор, и только потом контент.
Для SEO (да и для пользователей) лучше сначала кода контент а затем сайдбары.
В этом отношении первый способ лучше имхо.

**OKyJIucT** · 04.10.2011 17:30

Faraday, при современных скоростях интернета доли секунды ничего не решат :)

**FullHouse** · 04.10.2011 17:53

Сообщение от Faraday

Минус этого варианта в том, что сначала идут сайдбары, а только потом контент. Поэтому сначала в браузер загружается (или поисковый робот ест) баннеры, всякие теги, и прочий мусор, и только потом контент.
Для SEO (да и для пользователей) лучше сначала кода контент а затем сайдбары.
В этом отношении первый способ лучше имхо.

Вы думаете поисковый бот не умеет определять где сайдбар а где контент? Тогда надо шапку сайта помещать, так же, как и остальные сайдбары, вниз под контент?
А если я в таблицах верстаю, то всё!, не видать мне топа))), так как в любом случае при трех колонках, левая будет выше.
Для того чтобы закрыть "мусор", если у вас он есть, а сайдбар не является таковым, надо пользоваться тегами noindex.
Кстати в Яндексе тоже не знают как правильно сайты верстать (пример: http://help.yandex.ru/catalogue/?id=873431) - напишите им))

**Faraday** · 04.10.2011 18:10

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

**pyramida** · 09.10.2011 22:13

to archerl есть стандартные шаблоны в Dreamweaver CS5 зачем делать то что уже есть? И выбор там лучше.

**archerl** · 10.10.2011 23:10

pyramida, а точно там лучше есть? Приведи лучшее решение, если не трудно.

**pyramida** · 11.10.2011 04:39

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

**doctordick** · 11.10.2011 08:10

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

В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и еб*шат друг друга в квейк.
© neatkariga at lj

Люди! Смотрите на мир проще! :-)

	04.10.2011 16:57 #3
Faraday Дипломник Регистрация: 17.04.2011 Сообщений: 143 Репутация: 30	Мой вариант, вроде, с меньшим кодом Минус этого варианта в том, что сначала идут сайдбары, а только потом контент. Поэтому сначала в браузер загружается (или поисковый робот ест) баннеры, всякие теги, и прочий мусор, и только потом контент. Для SEO (да и для пользователей) лучше сначала кода контент а затем сайдбары. В этом отношении первый способ лучше имхо.
0 Faraday

	04.10.2011 17:30 #4
OKyJIucT Sunshine reggae Регистрация: 02.09.2011 Сообщений: 3,240 Репутация: 1830 Webmoney BL: ?	Faraday, при современных скоростях интернета доли секунды ничего не решат :)
0 OKyJIucT

	04.10.2011 18:10 #6
Faraday Дипломник Регистрация: 17.04.2011 Сообщений: 143 Репутация: 30	Я не говорю, что это критично, да и сам далеко не профи в СЕО. Конечно я знаю, что поисковики отлично определяют сквозные блоки на страницах, но во многих местах советуют размещать главное содержание по коду как можно выше. + иногда такое замечал, какой-то баннер или скрипт не открывается (сторонний сайт оффлайн), и вся страница тормозит. Всё это моё имхо, сори если у кого то другое мнение.
0 Faraday

	09.10.2011 22:13 #7
pyramida Гуру Регистрация: 09.10.2011 Сообщений: 1,814 Репутация: 251	to archerl есть стандартные шаблоны в Dreamweaver CS5 зачем делать то что уже есть? И выбор там лучше.
0 pyramida

	10.10.2011 23:10 #8
archerl Опытный Регистрация: 02.10.2011 Сообщений: 469 Записей в дневнике: 1 Репутация: 26 Webmoney BL: ?	pyramida, а точно там лучше есть? Приведи лучшее решение, если не трудно. http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
0 archerl

Резиновая блочная верстка с фиксированными колонками по бокам

Опции темы

Спасибо сказали:

Спасибо сказали:

Спасибо сказали:

Тэги топика:

Похожие темы

Вёрстка/натяжка на WP

Движок форума с боковыми колонками

HTML верстка сайтов. HTML/CSS верстка.

Верстка

Интересные темы

верстка с помощью div

быстрый броузер

самый быстрый браузер

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	11.10.2011 04:39 #9
pyramida Гуру Регистрация: 09.10.2011 Сообщений: 1,814 Репутация: 251	archerl, открой программу и посмотрите шаблоны. Их решения включают даже совместимость с броузерами твое нет.
0 pyramida

	11.10.2011 08:10 #10
doctordick Опытный Регистрация: 03.09.2009 Сообщений: 302 Записей в дневнике: 1 Репутация: 60	Не в обиду, но: когда встречаю термин резиновой верстки на дивах и вижу специально написанный для этого опус, всегда вспоминаю следующее высказывание: В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и еб*шат друг друга в квейк. © neatkariga at lj Люди! Смотрите на мир проще! :-)
0 doctordick

Темы	Раздел	Ответов	Последний пост
Вёрстка/натяжка на WP	Создание сайтов	7	15.04.2014 18:34
Движок форума с боковыми колонками	Софт, скрипты, сервисы	0	27.04.2011 21:30
HTML верстка сайтов. HTML/CSS верстка.	Реклама партнерских программ	2	26.07.2010 13:12
Верстка	Софт, скрипты, сервисы	13	03.01.2010 02:20