WebScript.Ru
C:\   главная  ::   о сайте  ::  каталог скриптов  ::  гнездо  ::  форум  ::   авторам  :: Новостройки ::   ХОСТИНГ  ::

|| разделы::
|| поиск по сайту::

|| реклама::
|| новости почтой::
Рассылки Subscribe.Ru ::



Новости сайта WebScript.Ru
Популярные статьи

Hot 5 Stories

|| рекомендуем::




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


Прислал: Алексей Ткаченко [ 22.03.2012 @ 11:40 ]
Раздел:: [ Веб-технологии ]


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

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

<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. Вот как это выглядит.

<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 пикселей.

#wrapper
{
  min-width: 800px;
}

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

#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.

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

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

Создание сайтов в Хабаровске




 :::::  Denis пишет 13.02.2015 @ 11:27 
уже устарело
 :::::  Кирилл пишет 25.06.2016 @ 13:09 
В принципе можно еще использовать, почему бы нет. Тип документа поставить обычный
для HTML5.

Можно использовать теги как head, footer и т.д., вместо div с классами.
 :::::  Kirill пишет 25.06.2016 @ 13:13 
А вообще сайт устарел уже, конечно. Неплохо было бы обновить и развить.
Имя:
Email:
URL

Введите сумму двух чисел семь и шесть (семь+шесть=?)
Запомнить мою информацию

* Html запрещен* Ваш E-mail опубликован не будет.

Copyright © 2000-2001 WebScript.Ru nas@webscript.ru
Design © 2001 by Parallax Design Studio (aka Spectator.ru)
Все торговые марки и авторские права на эту страницу принадлежат их соответствующим владельцам.
Сгенерировано за: 0.0365310