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

Рецепты HTML

  Все выпуски  

Рецепты HTML # 127


Информационный Канал Subscribe.Ru

Рецепты HTML
Выпуск № 127

Добрый день.

Предлагаю купить за 1 WMZ (один бакс по-нашему) локальную копию сайта htmlbook.ru. Вы получаете сайт в виде файлов html, которые можно смотреть без подключения к Интернету. В итоге, вы будете иметь следующее:

  • сайт содержит только ценную информацию, все лишнее в виде кнопок, баннеров и другой фигни, убрано;
  • вы получаете более 200 эксклюзивных статей по теме создания сайта;
  • локальная версия сайта по содержанию является точной копией его Интернет-сайта, в том числе содержит статьи по графике, дизайну, JavaScript, PHP, CSS и т.д.;
  • сайт выполнен в виде одного архива, что делает его удобным для передачи другим людям и хранения на любом компьютере;
  • не требуется подключения к Интернету, что актуально для владельцев модемов или при отсутствии Интернета вообще;
  • разрешается передавать сайт другим людям, которые в нем нуждаются;
  • вы получаете возможность консультации автора по любым темам, упомянутым в локальной версии сайта, через электронную почту

Все эти возможности доступны всего за 1 WMZ.

Как получить сайт
Перешлите 1WMZ на кошелек с номером Z049001049533 или 30WMR на кошелек R706338466912 в системе WebMoney. В комментарии укажите ящик электронной почты. После чего вы получите письмо, где будет указан адрес страницы, откуда можно скачать локальный сайт. Скачивайте сайт, распаковывайте его и наслаждайтесь. По выходным деньги принимаются, но отправка производится только по будним дням.

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


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

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

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

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

Так как координаты слоя определяются от его левого верхнего угла, для точного выравнивания следует добавить параметры margin-left и margin-top с отрицательными значениями. Их величина должна быть равна половине ширины (для margin-left) и высоты слоя (для margin-top).
Чтобы высота слоя не менялась из-за его контента, добавлен параметр overflow: auto, он добавляет полосы прокрутки, если в них возникнет нужда, высота при этом остается неизменной (пример 1). Учтите, что этот параметр не работает в браузере Opera 6 и ниже.

Пример 1. Выравнивание по центру слоя с шириной, заданной в пикселах
<html>
<head>
<style>
#center {
width: 400px; /* ширина слоя */
height: 300px; /* высота слоя */
position: absolute; /* абсолютное позиционирование */
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=center>
<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. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.</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.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>

</body>
</html>

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

Пример 2. Выравнивание по центру слоя с шириной, заданной в процентах
<html>
<head>
<style>
#center {
width: 40%;
height: 30%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20%;
margin-top: -15%;
background: #fc0;
border: solid 1px black;
padding: 10px;
overflow: auto;

}
</style>
</head>
<body>
<div id=center>
<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. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.</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.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>

</body>
</html>


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


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


В избранное