Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2004   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML # 125


Информационный Канал Subscribe.Ru
Рецепты HTML
Выпуск № 125

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

Центрирование по вертикали

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

Самый простой и один из старых способов центрирования по вертикали состоит в использовании таблиц. В примере 1 создается таблица с шириной и высотой равной 100 процентам. По умолчанию все, что помещается в ячейку таблицы, будет автоматически располагаться по центру вертикали, поэтому никаких дополнительных параметров указывать не нужно. Что касается выравнивания по горизонтали, для этого к тегу TD следует добавить аргумент align=center, иначе изображение в таблице станет размещаться по левому краю.

Пример 1. Использование таблицы
<table width=100% height=100%>
<tr>
<td align=center>
<img src=/images/title.gif width=413 height=100 alt="Рецепты HTML">
</td>
</tr>
</table>

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

Пример 2. Использование абсолютного позиционирования
<table width=100% height=100% style="""position: absolute; left: 0px; top: 0px">
<tr>
<td align=center>
<img src=/images/title.gif width=413 height=100 alt="Рецепты HTML">
</td>
</tr>
</table>

Пример 2 не действует должным образом из-за того, что высота перестает быть 100 процентов, и ограничена высотой вложенных в ячейку элементов. В этом легко убедиться, если залить фон таблицы каким-нибудь цветом через параметр bgcolor.

Вернемся немного назад и разберемся, зачем вообще в данном случае требуется позиционирование. Если необходимо поместить картинку строго по центру пустой веб-страницы, то пример 1 работает безукоризненно. Но для создания наложения, когда изображение отображается поверх уже существующего контента, например, текста, придется воспользоваться тем, что слои можно располагать один поверх другого. Чтобы изображение выводилось всегда в одно и то же место и необходимо для него применять абсолютное позиционирование с заданными координатами. Такой подход используется для создания разных эффектов на веб-странице вроде всплывающих окон, контекстных меню и т.д. В примере 3 показано применение простого приема скрытия и отображения слоя, который располагается по центру окна, через написание собственных функций.

Слой с именем korzina размещается с абсолютным позиционированием (параметр position), его можно разместить точно по центру горизонтали, если задать его ширину в процентах и установить отступ от левого края также в процентах через аргумент left. С вертикальным выравниванием по центру дела обстоят также. Следует установить высоту блока через свойство height и отступ от верхнего края с помощью свойства left.

Пример 3. Размещение слоя поверх текста
<html>
<head>


<style>

#korzina {
position: absolute; /* абсолютно заданные координаты */
top: 40%; /* расстояние от верхнего края */
left: 30%; /* расстояние от левого края */
width: 40%; /* ширина блока */
height: 20%; /* высота блока */
border: 1px solid black; /* рамка вокруг */
visibility: hidden; /* слой невидим */
background: #fc0; /* цвет блока */
padding: 10px /* поля от края до содержимого */
}

</style>

<script language="JavaScript">

function turnOn() { // Функция для включения видимости слоя
document.getElementById("korzina").style.visibility = "visible";
}

function turnOff() { // Функция для отключения видимости слоя
document.getElementById("korzina").style.visibility = "hidden";
}

</script>

</head>
<body>

<div id="korzina">
<div style=""width:" 100%; text-align: center"> Содержимое корзины </div>
</div>

<a href="javascript: turnOn()">Включить корзину</a> |
<a href="javascript: turnOff()">Выключить корзину</a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Выравнивание по центру в данном случае происходит только при использовании процентов в качестве единиц измерения. Текст в слое всегда размещается по верхнему краю, в случае, когда требуется расположить его по центру, можно воспользоваться отступами, которые устанавливаются через параметры стилей padding-top и padding-bottom (пример 4).

Пример 4. Размещение текста по центру слоя
<html>
<head>
<style>
#text {
border: 1px solid black;
background: #fc0;
padding: 10px;
padding-top: 130px;
padding-bottom: 130px
}
</style>
</head>
<body>

<div id=text>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

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

В следующий раз поговорим о том, как использовать JavaScript для точного позиционирования слоя.


Copyright © Влад Мержевич 2002 - 2004
Запрещается частичное или полное воспроизведение и цитирование статей без разрешения автора.

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу

В избранное