В CSS для позиционирования элементов используются блоки (div-ы). Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку браузерами, поэтому приходится писать кроссбраузерный код (т.е. код, который отображается разными браузерами почти одинаково).
Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:
Эту страницу мы с вами делали в серии уроков, посвященных HTML, а точнее в уроке 10 этой серии, где мы и верстали ее с помощью таблицы. Эта страница имела следующий код:
<html>
<head>
<title>CSS позиционирование</title>
</head>
<body>
<table width="715" border="1"
align="center" cellspacing="0" cellpadding="10">
<tr bgcolor="darkred">
<td colspan="2" height="100">шапка сайта</td>
</tr>
<tr bgcolor="oldlace">
<td width="190" height="300">меню</td>
<td>контент</td>
</tr>
<tr bgcolor="darkred">
<td colspan="2" height="30">низ сайта</td>
</tr>
</table>
</body>
</html>
Теперь давайте посмотрим, как можно сверстать такую страницу средствами CSS.
Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а. Давайте напишем html-код страницы с четырьмя div-ами и каждому дадим соответствующий идентификатор (id):
<html>
<head>
<title>CSS позиционирование</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">шапка сайта</div>
<div id="menu">меню</div>
<div id="content">контент</div>
<div id="footer">низ сайта</div>
</body>
</html>
Теперь, на странице style.css зададим те свойства, которые уже знаем, а именно ширину, высоту и фон каждого блока:
#header{
background:darkred;
width:715px;
height:100px;
}
#menu{
background:oldlace;
width:190px;
height:300px;
}
#content{
background:oldlace;
width:525px;
height:300px;
}
#footer{
background:darkred;
width:715px;
height:30px;
}
Сейчас наша страница в браузере (в уменьшенном варианте) выглядит так:
Такое позиционирование элементов называется позиционированием в нормальном потоке. Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.
По своей сути нормальный поток ничем не отличается от позиционирования элементов в HTML. И для верстки такой страницы без CSS, нам пришлось бы использовать таблицу, за неимением других вариантов. В CSS же нам предоставляются и другие схемы позиционирования:
Абсолютное позиционирование
При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства:
А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu, т.е. на 190 пикселов, а от верхнего края окна на высоту блока header, т.е. на 100 пикселов.
#header{
background:darkred;
width:715px;
height:100px;
}
#menu{
background:oldlace;
width:190px;
height:300px;
}
#content{
background:oldlace;
width:525px;
height:300px;
position:absolute;
left:190px;
top:100px;
}
#footer{
background:darkred;
width:715px;
height:30px;
}
Теперь наша страница в браузере выглядит так:
Наш блок расположился не совсем так, как ожидалось. Это от того, что мы не учли один нюанс: у браузеров есть свои, встроенные таблицы стилей. И, если мы не задали какое-либо свойство, то используется свойство по умолчанию.
Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px, т.е. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей:
body{
margin:0px;
}
Теперь наша страница выглядит так, как мы и ожидали:
В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо. Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по-другому.
Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента, например, вот так:
Тогда в нашу html-страницу, в div id="content" мы добавим div id="news":
<html>
<head>
<title>css potision</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">шапка сайта</div>
<div id="menu">меню</div>
<div id="content">
контент
<div id="news">блок новостей</div>
</div>
<div id="footer">низ сайта</div>
</body>
</html>
Тогда в таблице стилей смещение мы будем указывать относительно блока content:
#news{
background:yellow;
width:150px;
height:280px;
position:absolute;
left:365px;
top:10px;
}
Ширина блока content равна 525 пикселов, а ширина блока news - 150 пикселов. Значит,
смещение от левого края равно (525-150) 375 пикселов, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365
пикселов.
Аналогично рассчитываем смещение от верхнего края: высота блока content равна 300 пикселов, а высота блока news - 280 пикселов. Значит смещение от верхнего края может быть не более (300-280) 20 пикселов, мы сделали 10.
При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала "родителя" и помните, что смещение происходит относительно "родителя".
На этом урок закончен, в следующий раз будем изучать другие схемы позиционирования.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как сделать сайт → Уроки CSS → Урок 10. Позиционирование блоков
CSS - Урок 10. Позиционирование блоков
В HTML для позиционирования элементов на странице мы использовали таблицы. У таблиц есть как преимущества (легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).В CSS для позиционирования элементов используются блоки (div-ы). Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку браузерами, поэтому приходится писать кроссбраузерный код (т.е. код, который отображается разными браузерами почти одинаково).
Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:
| шапка сайта | |
| меню | контент |
| низ сайта | |
Эту страницу мы с вами делали в серии уроков, посвященных HTML, а точнее в уроке 10 этой серии, где мы и верстали ее с помощью таблицы. Эта страница имела следующий код:
Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а. Давайте напишем html-код страницы с четырьмя div-ами и каждому дадим соответствующий идентификатор (id):
Такое позиционирование элементов называется позиционированием в нормальном потоке. Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.
По своей сути нормальный поток ничем не отличается от позиционирования элементов в HTML. И для верстки такой страницы без CSS, нам пришлось бы использовать таблицу, за неимением других вариантов. В CSS же нам предоставляются и другие схемы позиционирования:
- абсолютное позиционирование
- относительное позиционирование
- плавающая блоковая модель
- static - блок позиционируется в нормальном потоке. Это значение по умолчанию.
- relative - относительное позиционирование (относительно нормального потока).
- absolute - абсолютное позиционирование
- fixed - фиксированное позиционирование (фиксируется относительно области просмотра).
Абсолютное позиционирование
При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства:
- left - указывает на сколько надо сместить блок относительно левого края окна.
- right - указывает на сколько надо сместить блок относительно правого края окна.
- top - указывает на сколько надо сместить блок относительно верхнего края окна.
- bottom - указывает на сколько надо сместить блок относительно нижнего края окна.
А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu, т.е. на 190 пикселов, а от верхнего края окна на высоту блока header, т.е. на 100 пикселов.
Наш блок расположился не совсем так, как ожидалось. Это от того, что мы не учли один нюанс: у браузеров есть свои, встроенные таблицы стилей. И, если мы не задали какое-либо свойство, то используется свойство по умолчанию.
Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px, т.е. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей:
В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо. Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по-другому.
Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента, например, вот так:
Тогда в нашу html-страницу, в div id="content" мы добавим div id="news":
Аналогично рассчитываем смещение от верхнего края: высота блока content равна 300 пикселов, а высота блока news - 280 пикселов. Значит смещение от верхнего края может быть не более (300-280) 20 пикселов, мы сделали 10.
При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала "родителя" и помните, что смещение происходит относительно "родителя".
На этом урок закончен, в следующий раз будем изучать другие схемы позиционирования.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.