. CSS урок 15. Блочная верстка сайта: абсолютное и относительное позиционирование
CSS урок 15. Блочная верстка сайта: абсолютное и относительное позиционирование

CSS урок 15. Блочная верстка сайта: абсолютное и относительное позиционирование

Абсолютное позиционирование CSS в фиксированном дизайне

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

Таким образом, недостатки верстки с фиксированным абсолютным позиционированием:

  • сложность последующих модификаций дизайна;
  • жесткая привязка к координатной сетке.
Необходимые свойства

Рис. 1. Пример абсолютного позиционирования слоев в блочной верстке

  • Отдельные слои для заголовков с id : header1 , header2 , header3
  • Отдельные слои для основных колонок с контентом: col1 , col2 , col3
  • Схематично получаем следующее размещение блоков:

<body> <div Евтушенко</div> <div Брюсов</div> <div Асадов</div> <div снится старый друг,<br/> который стал врагом,<br/> но снится не врагом,<br/> а тем же самым другом.<br/> Со мною нет его,<br/> но он теперь кругом,<br/> и голова идет<br/> от сновидений кругом. </div> <div вблизи неуловимо,<br/> Лишь издали торжественно оно,<br/> Мы все проходим пред великим мимо<br/> И видим лишь случайное звено. </div> <div любых делах при максимуме сложностей<br/> Подход к проблеме все-таки один:<br/> Желанье - это множество возможностей,<br/> А нежеланье - множество причин. </div> </body>

. position: absolute; /* Абсолютное позиционируем */ top: 30px; /* Расстояние от верхнего края */ .

#header1 < left: 20px; >#header2 < left: 280px; >/* 20 + 250 + 5 + 5 */ #header3 < left: 540px; >/* 20 + 250 + 250 + 5 + 5 + 5 + 5 */ #col1 < left: 20px; >#col2 < left: 280px; >#col3

Резюме по абсолютному позиционированию

Самыми главными свойствами, необходимыми для абсолютного позиционирования слоев являются:

  • для всех слоев width: 250px ;
  • для всех слоев position: absolute ;
  • Координаты по вертикали (от верхнего края) для всех слоев заголовков header : top: 30px ;
  • Координаты по вертикали (от верхнего края) для всех слоев колонок col : top: 60px ;
  • Координаты по горизонтали (от левого края) для всех слоев заголовков:
    • #header1
    • #header2 < left: 280px; >(20 + 250 + 5 + 5)
    • #header3 < left: 540px; >(20 + 250 + 250 + 5 + 5 + 5 + 5)

    Весь код стиля будет выглядеть следующим образом:

    В результате получаем веб-страницу, как на рис. 1 задания.

    Относительное позиционирование CSS в фиксированном дизайне

    Один из наиболее распространенных вариантов верстки. Блочная верстка css с относительным позиционированием подразумевает, что слои привязываются друг к другу, а их точные координаты относительно окна браузера не задаются. Поэтому сам макет можно центрировать на странице или выравнивать как по левому краю, так и по правому.

    Необходимые свойства

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

    Тогда необходимы следующие свойства:

    Ширина задается как контейнеру, так и обеим колонкам. Для контейнера она рассчитывается как сумма ширины двух колонок (при отсутствии иных отступов).

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

    В данном примере ширина колонок рассчитана, как ширина контейнера 700px - внутренние отступы padding 5+5+5+5px - ширина рамки 1+1+1+1 px = 676px на обе колонки. Для одной колонки получаем ширину 338px . (На рамку на самом деле при заданном 1px отводится 0.8px, поэтому чтобы расположить колонки стык в стык, лучше задать ширину 338.5px)

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

    Результат:

    Рис. 2. Две колонки рядом при относительном позиционировании

    Рис. 3. Две колонки с зазором при относительном позиционировании

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

    Весь код стилей:

    Расположить три колонки рядом не получится, произойдет смещение. Поэтому необходимо два слоя также оставить в контейнере:

    Рис. 4. Три колонки при относительном позиционировании

    Для контейнера можно установить абсолютное позиционирование, а для третьей колонки — относительное позиционирование CSS. Для двух других колонок — в зависимости от макета и взаиморасположения слоев.

    Необходимо задать ширину для всех трех колонок. Для контейнера ширина не нужна.

    Для второй третьей колонок необходимо задать расстояние от левого края браузера или контейнера: