возврат

Рецепт 1. Три цветные колонки высотой в страницу

Постановка задачи

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

Макет с тремя колонками

Высоту заголовочной части возьмём 100 пикселов. Ширину левой колонки определим в 150 пикселов, правой — в 200 пикселов, а центральная (основная) колонка будет резиновая.

Сначала построим HTML-код страницы:

Файл index.htm

  
Посмотреть

Теперь запишем стилевые определения. Для того, чтобы колонки распространялись вниз до конца страницы, будем использовать стилевое указание height:100%. Отступы содержимого колонок от краёв колонок зададим в 10 пикселов и добавим это значение к отступам от краёв документа в соответствующих свойствах padding

Файл style.css

  
BODY
{
  margin:0px;
  padding:0px;
}

/* Заголовок и логотип  */
.title
{
  position: absolute; 
  z-index:5; /* Блок расположен поверх других блоков */
  left:0px;
  top: 0px;
  width: 100%;
  height: 100px;
  margin:0px;
  padding:0px;
  border-bottom: 1px solid black;
  background: #06DFE1;  
}

/* Левая колонка    */
.left
{
  position: absolute; 
  left:0px;
  top: 0px;
  width: 150px;
  height:100%;
  margin: 0px;
  padding: 110px 10px 10px 10px;
  background: #FFE3CC;  
}

/* Правая колонка    */
.right
{
  position: absolute; 
  right:0px;
  top:0px;
  width: 200px;
  height:100%;
  margin: 0px;
  padding: 110px 10px 10px 10px;
  background: #E5E5E5;  
}

/*  Центральная колонка */
.center
{
  height:100%;
  margin: 0px;
  padding: 110px 210px 10px 160px;
  background: #FFF2A6;  
}

/* Подвал  */
.bottom
{
  font-size:70%;
  font-family:sans-serif;
  margin-top:10px;
  border-top: 1px solid black;
}

Стилевые определения устроены так. На основную область center накладываются три абсолютно позиционированные области (заголовочная часть, левая и правая колонки). Чтобы в основную область содержимое выводилось правильно, задаются соответствующие отступы при помощи свойства padding:

Макет с тремя колонками

Посмотрим, что у нас получилось.

Файл index.htm Посмотреть

В браузере Microsoft Internet Explorer смотрится, как и было задумано. В браузерах Mozilla Firefox и Opera налицо проблемы:

Макет с тремя колонками

Во-первых, появилась вертикальная прокрутка, хотя содержимое не выходит за низ окна, во-вторых, текст центральной колонки обрезается слева. Эти проблемы возникают из-за разной интерпретации свойств padding и border в этих браузерах. В IE отступы и границы входят в состав области, другие браузеры добавляют размеры отступов и границ к размерам областей (появляются смещения и линейка прокрутки).

Возникает идея: вложить каждую колонку в дополнительный блок, для которого будет записано свойство padding=0px.

Сначала переделаем HTML-код:

Файл index.htm

  

Cоответственно с задуманным изменим стилевые определения:

Файл style.css

  
BODY
{
  margin:0px;
  padding:0px;
}

/* Заголовок и логотип  */
.title
{
  position: absolute; 
  z-index:5; /* Блок расположен поверх других блоков */
  left:0px;
  top: 0px;
  width: 100%;
  height: 100px;
  margin:0px;
  padding:0px;
  border-bottom: 1px solid black;
  background: #06DFE1;  
}

/* Оболочка левой колонки */
.leftroot
{
  position: absolute; 
  left:0px;
  top: 0px;
  width: 150px;
  height:100%;
  margin: 0px;
  padding 0px;
  background: #FFE3CC;  
}

/* Левая колонка    */
.left
{
  padding: 110px 10px 10px 10px;
}

/* Оболочка правой колонки */
.rightroot
{
  position: absolute; 
  right:0px;
  top:0px;
  width: 200px;
  height:100%;
  margin: 0px;
  padding: 0px;
  background: #E5E5E5;  
}

/* Правая колонка    */
.right
{
  padding: 110px 10px 10px 10px;
}

/*  Оболочка центральной колонки  */
.centerroot
{
  height:100%;
  margin: 0px;
  padding: 0px;
  background: #FFF2A6;  
}

/*  Центральная колонка */
.center
{
  padding: 110px 210px 10px 160px;
}

/* Подвал  */
.bottom
{
  font-size:70%;
  font-family:sans-serif;
  margin-top:10px;
  border-top: 1px solid black;
}

Посмотрим, что получилось.

Файл index.htm Посмотреть

Отображается правильно, и в Microsoft Internet Explorer, и в браузерах Mozilla Firefox и Opera:

Макет с тремя колонками

Вверх вверх | возврат

© Александр Александрович Дуванов kurs@robotland.pereslavl.ru