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

Авторadmin / Опубликовано

Цель урока: Знакомство с принципами относительного и абсолютного позиционирования блочной верстки css

Назад
К оглавлению
Далее

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

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

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

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

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

    position
  1. Для всех основных слоев устанавливается абсолютное позиционирование:

    2. position: absolute

    width (height)
  2. Для всех слоев необходимо задать ширину (иногда и высоту)
    3. top и left (right)
  3. Необходимо задать координаты слоев по горизонтали и вертикали. Достаточно двух координат, например, расстояние от левого края браузера до левого края слоя — left (иногда легче задать расстояние от правого края — right) и расстояние от верхнего края браузера до слоя — top
Пример: Создать дизайн страницы, изображенной на рис. 1. Выполнить блочную верстку с абсолютным позиционированием слоев

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

Выполнение:

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

    • абсолютное позиционирование

<body>
    <div id="header1">Евгений Евтушенко</div>
    <div id="header2">Валерий Брюсов</div>
    <div id="header3">Эдуард Асадов</div>
    <div id="col1">
		Мне снится старый друг,<br/>
		который стал врагом,<br/>
		но снится не врагом,<br/>
		а тем же самым другом.<br/>
		Со мною нет его,<br/>
		но он теперь кругом,<br/>
		и голова идет<br/>
		от сновидений кругом.
    </div>
    <div id="col2">
	Великое вблизи неуловимо,<br/>
	Лишь издали торжественно оно,<br/>
	Мы все проходим пред великим мимо<br/>
	И видим лишь случайное звено.
	</div>
    <div id="col3">
	В любых делах при максимуме сложностей<br/>
	Подход к проблеме все-таки один:<br/>
	Желанье - это множество возможностей,<br/>
	А нежеланье - множество причин.
    </div>
</body>
2. Задаем общие свойства для колонок и заголовков, касающиеся оформления шрифта, ширины, границ и внутренних отступов:
#header1, #header2, #header3, #col1, #col2, #col3 { 
    width: 250px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
    font-family: Verdana, Arial, sans-serif; /* Не серифный или рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
}
3. Добавляем для тех же селекторов свойства абсолютного позиционирования:
...
    position: absolute; /* Абсолютное позиционируем */
    top: 30px; /* Расстояние от верхнего края */
...
4. Отдельно создаем свойства для колонок. Для позиционирования устанавливаем расстояние от верха (top):
#col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
    top: 60px; /* Расстояние от верхнего края */
}
5. Для каждого слоя необходимо отдельно задать координату расстояния от левого края (left):
   #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 { left: 540px; }
6. Для каждого слоя отдельно задаем фон:
   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

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

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

1. Ширина всех слоев — свойство width:
  • для всех слоев width: 250px;
2. Установка абсолютного позиционирования для всех слоев:
  • для всех слоев position: absolute;
3. Установка двух координат (одной — по вертикали, другой — по горизонтали) для каждого слоя:
  • Координаты по вертикали (от верхнего края) для всех слоев заголовков header: top: 30px;
  • Координаты по вертикали (от верхнего края) для всех слоев колонок col: top: 60px;
  • Координаты по горизонтали (от левого края) для всех слоев заголовков:
    • #header1{ left: 20px; }
    • #header2{ left: 280px; } (20 + 250 + 5 + 5)
    • #header3{ left: 540px; } (20 + 250 + 250 + 5 + 5 + 5 + 5)

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

/* для колонок и их заголовков */
#header1, #header2, #header3, #col1, #col2, #col3 { 
    font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт */
    font-weight: bold; /* Жирное начертание текста заголовка */
    font-size: 80%; /* Размер шрифта */
    color: white; /* Цвет текста заголовка */
    width: 250px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
	/* позиционируем */
    position: absolute; /* Абсолютное позиционируем */
    top: 30px; /* Расстояние от верхнего края */
}
   /* для колонок */
#col1, #col2, #col3 { 
    font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
    font-size: 100%; /* Размер шрифта */
    font-weight: normal; /* Нормальное начертание */
    color: black; /* Цвет текста */
    top: 60px; /* Расстояние от верхнего края */
} 
 
   /* Расстояние от левого края отдельно каждого слоя */
   #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 { left: 540px; }
 
   /* Цвет фона каждого слоя */
   #header1 { background: #B38541; }
   #header2 { background: #008159; }
   #header3 { background: #006077; }
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

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

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

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

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

Для двух колонок

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

<div class="container">
    <div id="col1">
	колонка 1
    </div>
    <div id="col2">
	колонка 2	
    </div>
</div>

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

width

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

.container{
	width:700px;
}

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

#col1, #col2{
        border: 1px solid black; /* Рамка вокруг слоя */
	padding: 5px; /* Поля вокруг текста */
	width: 338px; /* Ширина колонок */
}

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

float

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

#col1 {float:left}
#col2 {float:left}

Результат:

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

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

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

.container{
        margin-left:auto; 
	margin-right:auto;
	width:700px;
}

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

.container{
	margin-left:auto; 
	margin-right:auto; 
	width:700px;
}
/* Общее для колонок */
#col1, #col2{ 
    width: 335px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
} 
/* Отдельно для колонок */
   #col1 {float:left }
   #col2 {float:right }
/* Цвет фона каждого слоя */
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
Для трех колонок

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

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

<div class="container">
    <div id="col1">
		Колонка 1
	</div>
    <div id="col2">
		Колонка 2
    </div>
</div>
    <div id="col3">
		Колонка 3
    </div>
position

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

   .container{
	position:absolute; 
}
   #col1 {position: absolute}
   #col2 {position: relative}
   #col3 {position: relative}
width

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

#col1, #col2, #col3 { 
    width: 200px;
}
left

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

   #col2 {
		position: relative;
		left:205px;
   }
   #col3 {
		position: relative;
		left: 410px;
   }

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

  .container{
	position:absolute; 
}
/* Общее для колонок */
#col1, #col2, #col3 { 
    width: 200px; /* Ширина колонок */
    border: 1px solid black; /* Рамка вокруг слоя */
    padding: 5px; /* Поля вокруг текста */
} 
/* Отдельно для колонок */
   #col1 {position: absolute}
   #col2 {
		position: relative;
		left:205px;
   }
   #col3 {
		position: relative;
		left: 410px;
   }
/* Цвет фона каждого слоя */
   #col1 { background: #EBE0C5; }
   #col2 { background: #BBE1C4; }
   #col3 { background: #ADD0D9; }

Результат:

три колонки при относительном позиционировании
Рис. 5. Три колонки при относительном позиционировании
Назад
К оглавлению
Далее