русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

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

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

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

<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»>

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


Источник: http://archerl.com

Просмотров: 2448




Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.