Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 7969 / 742 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Лекция 36:

Статическое и относительное позиционирование CSS

< Лекция 35 || Лекция 36: 12345 || Лекция 37 >
Создание столбцов

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

1. Добавьте в файл CSS следующие правила:

#main {
  float: left;
}

#sidebar {
  float: left;
  width: 13em;
  padding: 0 0.5em;
  background-color: #ff6;
}

#nav {
  float: left;
  width: 11em;
  padding: 0 0.5em;
  background-color: #ddd;
}

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

2. Давайте сначала разберемся с нижним колонтитулом. Проблема состоит в том, что три столбца являются плавающими, что извлекает их из потока документа. Нижний колонтитул выталкивается вверх рядом с верхним колонтитулом и содержащий текст линейный бокс укорачивается, так что слово "Footer" появляется справа от плавающих элементов. Можно исправить это, очищая нижний колонтитул от всех плавающих столбцов. Добавьте в файл CSS следующее правило:

#footer {
  clear: left;
  border-top: 1px solid #369;
}

3. Теперь займемся тремя столбцами. Это будет сделано шаг за шагом, и будет выглядеть достаточно уродливо в течение некоторого времени, но не отчаивайтесь - в конце все встанет на свои места.

Ключевым моментом в этом подходе является элемент оболочки. Мы зададим на нем левое и правое поле, которые соответствуют по ширине боковым столбцам (навигации и боковой панели). Столбец основного контента будет занимать всю ширину оболочки, в то время как боковые столбцы будут смещаться в пространство, освобожденное полями. Звучит замысловато? Не беспокойтесь, мы разберем это подробно, маленькими шагами. Сначала зададим для оболочки поля, добавляя следующее правило в файл CSS:

#wrapper {
  margin: 0 14em 0 12em;
  padding: 0 1em;
}

Помните, что значения в сокращенном свойстве margin определяются в следующем порядке: top, right, bottom, left. Мы задаем верхнее и нижнее поля как 0, правое поле равным 14em (для боковой панели) и левое поле как 12em (для навигации). Мы добавляем также горизонтальное заполнение в 1em, так как мы не хотим, чтобы контент вплотную подходил к боковым столбцам, ему нужно немного пространства для дыхания.

4. Следующий шаг состоит в задании для столбца основного контента всей ширины оболочки его предка; код временно также задаёт для него яркий цвет фона, итак делаем следующее:

#main {
  float: left;
  width: 100%;
  background-color: lime;
}

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

Затем мы перейдем к боковой панели - она является плавающей и имеет правильную ширину, но так как столбец #main имеет ширину 100%, он смещает боковую панель вниз. Как заставить ее подняться вверх и остаться рядом с #main, когда #main занимает всю ширину? Давайте сделаем это за два маленьких шага: сначала мы переместим ее вверх, а затем сместим ее на поле.

6. Здесь мы используем хитроумный прием, чтобы заставить плавающую боковую панель, которая была смещена вниз, снова переместиться вверх - сделаем следующее добавление в правило #sidebar:

#sidebar {
  float: left;
  width: 13em;
  padding: 0 0.5em;
  background-color: #ff6;
  margin-left: -14em;
}

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

8. Нам нужно сместить панель на место поля так, чтобы она не упала снова вниз, и именно здесь начинает играть - наконец - относительное позиционирование. Оно делает именно то, что нужно: оно смещает сгенерированный бокс, не перемещая сам элемент. Добавьте выделенные ниже свойства в правило для #sidebar:

#sidebar {
  float: left;
  width: 13em;
  padding: 0 0.5em;
  background-color: #ff6;
  margin-left: -14em;
  position: relative;
  left: 15em;
}

Отметим, что нужно сместить ее на 15em, а не 14em - потому что имеется правое заполнение в 1em для оболочки, которое необходимо пропустить. Боковая панель находится теперь там, где должна быть: на месте поля, рядом со столбцом контента, аккуратно выровненная с правыми краями верхнего и нижнего колонтитулов.

9. Теперь нужно сделать то же самое с навигацией, что делается аналогично, но со своими особенностями. Перемещение и сдвиг боковой панели выполняется легко, так как эти движения были по сути такими же, как и ширина столбца: отрицательное поле 14em и смещение на 14em+1em вправо. Но столбец навигации необходимо переместить через весь столбец контента и затем сдвинуть еще дальше на поле.

Нашим помощником здесь будут проценты. Значение процента на полях навигационного столбца будет задаваться относительно ширины его предка, оболочки. Чтобы переместить столбец через всю оболочку - добавьте свойство, выделенное ниже в правиле #nav:

#nav {
  float: left;
  width: 11em;
  padding: 0 0.5em;
  background-color: #ddd;
  margin-left: -100%;
}

10. Сохраните и перезагрузите еще раз, и вы должны увидеть как навигация перекрывает левую сторону столбца контента. Теперь необходимо сместить ее на поле. Добавьте следующие выделенные свойства в правило для #nav:

#nav {
  float: left;
  width: 11em;
  padding: 0 0.5em;
  background-color: #ddd;
  margin-left: -100%;
  position: relative;
  right: 13em;
}

Ширина навигации снова будет 12em, но еще надо пропустить 1em заполнения оболочки, поэтому требуется сместить бокс на 13em. Вы смещаете его влево, другими словами от правого края, поэтому и используется свойство right.

11. Удалите ярко-зеленый фон из столбца контента, и все будет готово.

< Лекция 35 || Лекция 36: 12345 || Лекция 37 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Наталья Олимпиева
Наталья Олимпиева

Как оплатить курс? Обязательны ли для этого документы какие-то? Или можно просто иметь 1 рубль на счету, чтобы потом его сняли?
В общем, хватит ли обычного пополнения счёта или нужно конкретно куда-то запошлять?

Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989