Отправляет 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 # 124


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

Добрый день.
После некоторого перерыва продолжаем выпуск статей. Сайт по-прежнему скорее мертв, чем жив, однако это будет продолжаться не долго. В данный момент я веду работы по изменению структуры сайта, будут добавлены новые разделы и статьи. Свои пожелания вы можете направлять мне на адрес inferos@yandex.ru, буду рад получить от вас разные предложения о том, чтобы вы хотели увидеть на сайте.

Хотя сайта как такового еще нет и рассылка «новости сайта» не имеет смысла, все же время от времени буду создавать разные статьи. Сегодня первый материал из двух-трех статей, посвященных использованию слоев для создания рекламы и разных эффектов.

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


Выравнивание по центру

Основное отличие веб-страницы от листа бумаги заключается в их размерах. Если лист имеет заданную фиксированную ширину и высоту, то по отношению к веб-сайту такого сказать нельзя. Веб-документ отображается в окне браузера и может изменять свои размеры в зависимости от операционной системы, типа монитора, установленного разрешения и т.д. Использование выравнивания позволяет проигнорировать указанную особенность и располагать элемент у края окна или по его центру.
Когда речь идет об использовании слоев, то в нашем распоряжении имеется несколько способов — с помощью отступов, а также используя параметр align тега DIV.

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

Пример 1. Размещения слоя по центру через отступы
<html>
<head>
<style type="text/css">

#center {
margin-left: 30%;
margin-right: 30%;
background: #fc0;
padding: 10px;
}

</style>
</head>

<body>
<div id=center>
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>

В примере показано размещение слоя шириной 40 процентов по центру. Хотя сама ширина никак не задается, она определяется значением атрибутов margin-left и margin-right. Эти параметры устанавливают отступ слева и справа, чтобы слой располагался по середине, их значения должны быть равны.

Недочетом приведенного метода является необходимость задавать ширину слоя в процентах. В случае, когда ширина указывается в пикселах, вышеописанный прием не работает, ведь нам не известна общая ширина окна в пикселах, а значит, и определить отступы не представляется возможным. Можно, конечно, воспользоваться языком JavaScript, но его лучше приберечь для более сложных случаев.
Следующий способ более универсален и уже не зависит от того, какие единицы измерения используются для установки ширины. Основная работа в этом случае выпадает параметру text-align (пример 2).

Пример 2. Использование параметра text-align
<html>
<head>
<style type="text/css">

BODY {
text-align: center
}

#center {
width: 400px;
margin-left: auto;
margin-right: auto;
background: #fc0;
padding: 10px;
text-align: left;
}

</style>
</head>
<body>

<div id=center>
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>

Выравнивание по центру производится с помощью атрибута text-align: center, который устанавливается для селектора BODY. Этот параметр воздействует не только на слои, но и на их содержимое, поэтому для стиля самого слоя необходимо также использовать text-align, но уже с другим параметром. Обычно используется значение left (как в примере), которое задает выравнивание по левому краю и justify, определяющее выравнивание по ширине (одновременно по правому и левому краю). По правому краю, как правило, текст не равняется из-за того, что читать его становится сложнее.

Ширина слоя определяется параметром width, его значение можно указывать в процентах или пикселах. Атрибуты margin-left и margin-right со значением auto используются для браузера Opera, который обязательно требует их наличия.

Еще один способ размещения по центру вообще не требует использования никаких стилей и связан с параметром align тега DIV. Указывая значение center, заставляем содержимое слоя выравниваться по центру слоя. Поэтому необходимо создать два слоя, один из которых будет служить контейнером для другого (пример 3).

Пример 3. Использование параметра align
<html>
<head>
<style type="text/css">

#center {
width: 400px;
background: #fc0;
padding: 10px;
text-align: left;
}

</style>
</head>
<body>

<div align=center>
<div id=center>
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>
</div>

</body>
</html>

Опять же, как и в случае использования параметра text-align, размещаться по центру будет и текст внутри слоя. Поэтому следует насильно задать ему необходимое выравнивание.

В следующий раз рассмотрим способы центрирования элементов по вертикали.


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

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

В избранное