Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
| ← Октябрь 2003 → | ||||||
|
1
|
2
|
3
|
4
|
5
|
||
|---|---|---|---|---|---|---|
|
7
|
9
|
10
|
11
|
12
|
||
|
13
|
14
|
16
|
17
|
18
|
19
|
|
|
21
|
22
|
23
|
24
|
25
|
26
|
|
|
28
|
29
|
30
|
||||
Статистика
-26 за неделю
Рецепты HTML # 104
| Информационный Канал Subscribe.Ru |
| | Руководство
| Дизайн и юзабилити
| Графика
| Создание и раскрутка сайта | | Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум | |
Добрый день.
Рассылка Рецепты HTML по решению администрации Subscribe.Ru переведена в класс "Золотой". Для вас, уважаемые читатели, вряд ли что поменяется в связи с этим событием, поскольку статус никак не меняет содержания. Но все же приятно, что заслуги оценены.
Появилась идея возродить на сайте раздел с электронными книгами. Сделать некоторые книги как платными, так и бесплатными. Данный раздел был по ряду причин удален с сайта, только уже не помню по каким. А раз нет никаких причин его скрывать, пора и сделать доступным для всех. Мне хотелось бы знать ваше мнение по поводу этого раздела и отношение к стоимости электронных книжек. Пишите на адрес vlad@htmlbook.ru или в форум на сайте.
Много за последнюю неделю обновлений и статей.
Раздел Все статьи расширен и содержит не только список материалов по разделам, но также по дате публикации, дате обновления и популярности. Теперь отслеживать появление новых материалов будет проще.
Две интересные статьи Константина Рощупкина - История одного сайта. Часть 1 и Часть 2
В статях автор делится опытом по созданию и раскрутке своего проекта. Все основные моменты процессов подробно описаны и комментированы. Полезно будет почитать не только начинающим, но и всем остальным, любой опыт всегда полезен.
Продолжение темы о верстке с применением слоев - Фиксированный дизайн. Часть 3
Речь идет о размещении слоев с использованием параметра position. Эта статья уже приводилась в прошлых выпусках рассылки,
но теперь она дополнена и доступна целиком для прочтения.
В ближайшее время планируется продолжение этой темы, которая многим пришлась по
душе - наложение слоев друг на друга для создания разных эффектов.
Потратив много времени на поиск решения, нашел простой и универсальный
подход, одинаково работающий в разных браузерах. В скором времени поделюсь
им с читателями.
Краткие советы по оптимизации можно почитать в статье Оптимизация веб-страниц
Сегодня статья посвящена стилям и позиционированию. С помощью параметров CSS можно управлять положением элементов, видом полосы прокрутки и многими другими вещами. Адрес статьи на сайте - www.htmlbook.ru/content/?id=181
Позиционирование элементов
Позиционирование элементов позволяет определять их положение на странице, а также управлять формой и определять, что делать с элементом, если его размер слишком большой, чтобы соответствовать указанной области.
Свойства CSS имеющие отношения к позиционированию приведены в таблице.
| Свойство | Значение | NC | IE | W3C | Описание | Пример |
|---|---|---|---|---|---|---|
| bottom | auto % значение |
6+ |
5+ |
CSS2 | Задает положение нижнего края элемента относительно его родителя. | P { bottom: 20% } |
| clip | auto форма |
6+ |
4+ |
CSS2 | Определяет область вырезки элемента. | P { clip: rect(10px 110px 80px 20px) } |
| left |
auto % значение |
4+ |
4+ |
CSS2 | Определяет положение левого края элемента относительно его родителя. |
P { left: -100px } |
| overflow | visible hidden scroll auto |
6+ |
4+ |
CSS2 | Отображение полос прокрутки, если содержание не помещается в заданную область. | DIV {overflow: scroll } |
| right | auto % значение |
- |
5+ |
CSS2 | Задает положение нижнего края элемента относительно его родителя. | P { right: 20px } |
| top | auto % значение |
4+ |
4+ |
CSS2 | Определяет положение верхнего края элемента относительно его родителя. | P { top: 50% } |
| vertical-align | baseline sub super top text-top middle bottom text-bottom % значение |
4+ | 4+ | CSS1 | Вертикальное выравнивание элемента относительно базовой линии. | SPAN.sup {vertical-align: super } |
| z-index | auto номер |
6+ | 4+ | CSS2 | Порядок элемента при наложении нескольких элементов друг на друга. | .top { z-index: 10 } |
NC – Netscape Communicator, IE – Microsoft Internet Explorer, W3C – Веб-стандарт CSS, 4+ означает, что свойство поддерживается в браузере с номером версии 4 и выше.
Положение элемента
Положение координат элемента зависит от свойства position, которому обычно присваивают значение absolute (абсолютное) или relative (относительное).
При абсолютном позиционировании элемент размещается относительно левого верхнего угла окна документа с помощью параметров left и top (рис. 1). В случае размещения слоя внутри другого, абсолютные координаты считаются от левого верхнего угла родительского слоя (рис. 2).
Рис. 1. Положение слоя относительно окна браузера
Кроме тегов DIV и SPAN абсолютное позиционирование поддерживают следующие элементы: APPLET, INPUT, BUTTON, OBJECT, SELECT, FIELDSET, IFRAME, TABLE, IMG, TEXTAREA.
Параметр position: relative используется для смещения слоя относительно родительского элемента (рис. 2). Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе.
Рис. 2. Положение слоя относительно родительского элемента
Последние версии браузеров стали поддерживать еще один способ размещения элементов на веб-странице – через свойства bottom и right, определяющих положение правого нижнего угла элемента. Пока, однако, такое задание координат не так распространено и ограничено тем, что не все браузеры его поддерживают. Поэтому более традиционным вариантом можно считать определение положения элемента с помощью параметров left и top (пример 2).
Пример 1. Позиционирование элементов<body>
<div style=""xposition:" relative; width: 200px; color: white; background:
#7F4C3E; border: solid 1px black; float: left">
<p style=""padding:" 10px">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>
</div>
<div style="""position: relative; left: -50px;
top: 130px; width: 200px; background: #c0c0c0; border: solid 1px black;
float: left">
<p style=""padding:" 10px">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.</p>
</div>
</body>
</html>
Значения координат могут принимать и отрицательные значения, тогда дочерний элемент будет накладываться на предыдущий элемент, как показано на рис. 3.
Рис. 3. Результат наложения элементов
Область вырезки
Если взять лист бумаги и проделать в нем прямоугольное отверстие, то при наложении на другой лист с текстом он будет закрывать и делать невидимым все, где нет выреза. Этот принцип лежит в основе многих идей – маски в графических редакторах и область вырезки на веб-страницах.
Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области – прямоугольник. Все остальное остается только в мечтах.
Расстояние от края элемента до области вырезки определяется по следующему шаблону.
Если край области нужно оставить без изменений, следует поставить параметр auto (пример 2).
Пример 2. Создание области вырезки<body>
<div style="""position: absolute; clip: rect(20px
auto auto 20px); width: 200px; color: white; background: #7F4C3E; border:
solid 1px black;">
<p style=""padding:" 10px">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>
</div>
</body>
</html>
Несколько замечаний:
- Параметр clip работает только для абсолютно позиционированных элементов.
- Браузер Opera не поддерживает это свойство CSS.
Полосы прокрутки
Свойство overflow управляет содержанием блочного
элемента, если оно целиком не помещается и выходит за область заданных размеров.
Параметр overflow принимает одно из четырех значений.
visible – отображается все содержание элемента, даже за пределами установленной
высоты и ширины.
hidden – отображается только область внутри элемента, остальное будет
обрезано.
scroll – всегда добавляются полосы прокрутки.
auto – полосы прокрутки добавляются только при необходимости.
Приведенный ниже пример демонстрирует создание текстового блока с полосой прокрутки (пример 3).
Пример 3. Полосы прокрутки для отдельного элемента<body>
<div style="""overflow: scroll; width:
300px; height: 150px; border: solid 1px black">
<h2>Новости сайта</h2>
<p>Новость 1. Выпили</p>
<p>Новость 2. Закусили</p>
<p>Новость 3. Повторили n раз</p>
<p>Новость n+2. А что дальше было, уже ни для кого не новость</p>
</div>
</body>
</html>
Результат примера показан ниже.
Новости сайта
Новость 1. Выпили
Новость 2. Закусили
Новость 3. Повторили n раз
Новость n+2. А что дальше было, уже ни для кого не новость
Все, новостей больше не будет...
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
