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

Создание собственного сайта от А до Я.

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

При закрытии подписчики были переданы в рассылку "Cекреты успешных идей для интернет-бизнеса" на которую и рекомендуем вам подписаться.

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

←   Октябрь 2006   →
 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
31
Автор
Студия Мастера Монтажа

Статистика

2.025 подписчиков
0 за неделю
←   Все выпуски   →

Создание собственного сайта от А до Я. 17 урок - Тэг DIV


Урок 17 - Тэг DIV

Вся информация по рассылке доступна здесь. Вы можете скачать все выпуски рассылки.

От Автора.

Добрый вечер уважаемые слушатели Рассылки "HTML это просто"!!!

Ох, сколько времени прошло с нашего последнего урока. Разобрался более менее с текучими делами, а тут и тема интересная подвернулась. Которую до этого еще не освещал в уроках. На написание урока на эту тему, натолкнул меня не давний редизайн моего ресурса, изменил полностью всю структуру. И как раз основу дизайна построил на DIV, почти полностью отказавшись от таблиц. Заценить можно здесь.

За время отсутствия выпусков, писали новенькие слушатели, построившие свои ресурсы на основе уроков. К сожалению, часть их не затерялась, просьба, если вы не увидели свою работу в списке справа, послать запрос еще раз. И со следующего выпуска вы увидите свою работу в списке. Еще раз приношу свои извинения.

Еще есть просьба, Mega Obzor участвует в премии Рунета 2006, поддержать наш проект своим голосом по этой ссылке. Нужно поставить галочку на megaobzor.com и отправить свой голос.

Также изменена структура и дизайн страница рассылки "HTML это просто", спешите заценить.

Web Coder, именно на нее ориентируясь, будут написаны уроки. Поэтому все кто желает понять и свободно владеть HTML , качаем по этой ссылке (600 кб).

Итак начнем

За основу была взята статья Влада Мержевича

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

Когда речь идет об использовании слоев, то для выравнивания в нашем распоряжении имеется несколько способов — с помощью отступов, через позиционирование, а также используя параметр align тега <DIV>.

Использование отступов

Если добавить отступ к слою слева с помощью параметра margin-left, то визуально слой сместится на указанное значение вправо. Зная ширину слоя, его можно сместить так, чтобы слой располагался по центру веб-страницы. Для чего от 100%, составляющих общую доступную ширину, надо отнять ширину слоя в процентах и полученное значение разделить пополам. Результат и будет значением параметра margin-left (пример 1).

Пример 1. Использование параметра margin-left

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
 margin-left: 30%; /* Отступ слева */
 width: 40%; /* Ширина слоя */
 background: #fc0; /* Цвет фона */
 padding: 10px;/* Поля вокруг текста */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

Как вариант, можно не указывать ширину, а регулировать ее с помощью отступа слева и справа (пример 2).

Пример 2. Использование отступов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
 margin-left: 30%; /* Отступ слева */
 margin-right: 30%; /* Отступ справа */
 background: #fc0; /* Цвет фона */
 padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

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

Применение параметра text-align

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

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

Пример 3. Применение параметра text-align

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
BODY {
 text-align: center; /* Выравниваем содержимое веб-страницы по центру */
}

#centerLayer {
 width: 400px; /* Ширина слоя в пикселах */
 margin-left: auto; /* Отступ слева */
 margin-right: auto; /* Отступ справа */
 background: #fc0; /* Цвет фона */
 padding: 10px; /* Поля вокруг текста */
 text-align: left; /* Выравнивание содержимого слоя по левому краю */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

В данном примере ширина слоя устанавливается 400 пикселов и выравнивается по центру двумя способами. Первый предназначен для браузера Internet Explorer и состоит в использовании параметра text-align со значением center, который добавляется к селектору BODY. Второй способ ориентирован на браузер Firefox и Opera и заключается в применении отступа слева и справа со значением auto. Такой подход гарантирует универсальность работы кода в разных браузерах.

Параметр align тега <DIV>

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

Пример 4. Параметр align тега DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
 width: 400px; /* Ширина слоя в пикселах */
 background: #fc0; /* Цвет фона */
 padding: 10px; /* Поля вокруг текста */
 text-align: left; /* Выравнивание по левому краю */
}
</style>
</head>
<body>

<div align="center">
<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</div>

</body>
</html>

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

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

При абсолютном позиционировании координаты слоя вычисляются относительно левого верхнего угла окна браузера, а сам слой не зависит от остального содержимого веб-страницы. Поэтому слой, заданный с абсолютным позиционированием, может располагаться под основным текстом или, наоборот, поверх него. Такое положение определяется с помощью стилевого атрибута z-index и позволяет гибко управлять положением слоя по условной z-оси. Таким способом удобно выводить на веб-странице различные подсказки, всплывающие окна, рекламу или плавающие меню.

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

Следующий шаг — задаем абсолютное позиционирование слоя через аргумент position: absolute. Положение слоя следует определить как 50% по горизонтали и вертикали с помощью свойств left и top. Эти значения остаются неизменными, независимо от используемых единиц измерения.

Так как координаты слоя определяются от его левого верхнего угла, для точного выравнивания следует добавить параметры margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины слоя (для margin-left) и высоты (для margin-top).

Чтобы высота слоя не менялась из-за его контента, включен параметр overflow: auto, он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 5).

Пример 5. Ширин слоя в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
 position: absolute; /* Абсолютное позиционирование */
 width: 400px; /* Ширина слоя в пикселах */
 height: 300px; /* Высота слоя в пикселах */
 left: 50%; /* Положение слоя от левого края */
 top: 50%; /* Положение слоя от верхнего края */
 margin-left: -200px; /* Отступ слева */
 margin-top: -150px; /* Отступ сверху */
 background: #fc0; /* Цвет фона */
 border: solid 1px black; /* Параметры рамки вокруг */
 padding: 10px; /* Поля вокруг текста */
 overflow: auto; /* Добавление полосы прокрутки */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

В случае использования процентной записи стиль меняется незначительно, надо так же поделить ширину и высоту пополам и добавить полученные значения в качестве аргументов к свойствам margin-left и margin-top (пример 6).

Пример 6. Ширина слоя в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#centerLayer {
 position: absolute; /* Абсолютное позиционирование */
 width: 40%; /* Ширина слоя в процентах */
 height: 30%; /* Высота слоя в процентах */
 left: 50%; /* Положение слоя от левого края */
 top: 50%; /* Положение слоя от верхнего края */
 margin-left: -20%; /* Отступ слева */
 margin-top: -15%; /* Отступ сверху */
}
</style>
</head>
<body>

<div id="centerLayer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>
</html>

Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, соответственно, поменяется и запись другого параметра. Как показано в данном примере, ширина слоя установлена в 40%, следовательно, и для свойства margin-left также надо применить проценты, в данном случае, –20%.

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

Обсуждение всего, что связано с тематикой 17 урока.

Связь с Автором

Свои вопросы, пожелания, замечания можете задать:
С уважением, Ленар Минныханович.
Создают с нами:

  http://yurasite.narod.ru

  http://brigadir25.narod.ru

  http://u4ilka2005.narod.ru

  http://inyi.narod.ru

  http://electro20.narod.ru

  http://all5mb.narod.ru

  http://tolyattinec.narod.ru

  http://xskernel.narod.ru

  http://comingin.narod.ru

  www.mobilepincod.narod.ru

  http://yur-pechnik.narod.ru

  http://timouru.narod.ru

  http://ra4uik.narod.ru

  http://polyna3.narod.ru

  vesmirvkarmane.narod.ru

  http://vsuprunenko.narod.ru

  http://kir242.narod.ru

  http://ofiska.narod.ru

  http://muxaul.boom.ru

  http://sarzh-1.narod.ru

  http://flovers-ch.narod.ru

  kanashkevich.narod.ru

  http://bsu-305.by.ru

  http://www.ellesee.narod.ru

  supertreining.narod.ru

  spiritdrago.narod.ru

  http://piterk2006.narod.ru

  ooo-sp1c.narod.ru

  lengdon1602.narod.ru

  brodiachie-artisty.narod.ru

  http://fanrocks.narod.ru

  www.Spellen.boom.ru

  www.inta-church.narod.ru

  www.extremetourism.narod.ru

  www.irsad.narod.ru


В этой колонке, будут ссылки на ваши проекты. Которые создаете по моим урокам. Достаточно выслать на softsmm@mail.ru адрес вашего ресурса. Внимание!!! Принимаются только ресурсы, которые создаются по моими урокам, содержание, наполнение значение не имеет.
Вся информация по рассылке доступна здесь. Вы можете скачать все выпуски рассылки.
В избранное