Главная страница Карта сайта Написать письмо

HTML, Excel, Word, SEO   учебник HTML (хтмл) позиционирование элементов
JavaScript + DHTML HTML Word Excel VBA Графика Свой сайт Free soft вебмастера SEO-новости Статьи
HTML профессионально
Учебник HTML (хтмл)
...Старт
...Основные тэги
...Заголовки и комментарии
...Специальные символы
...Форматирование текста ч.1
...Форматирование текста ч.2
...Форматирование текста ч.3
...Создание списков
...Работа с графикой ч.1
...Работа с графикой ч.2
...Работа с графикой ч.3
...Работа с графикой ч.4
...Таблицы ч.1
...Таблицы ч.2
...Таблицы ч.3
...Гиперссылки
...Фреймы
...Что такое формы
...Что такое JavaScript
...Маленькие секреты Вэб-дизайна
...Эффект постепенной прорисовки
...Карта ссылок
...Внутренний лист стилей
...Работа с листами стилей
...Свойства шрифта - font
...Свойства текста
...Свойство фона - background
...Рамки и размеры
...Относительное и абсолютное позиционирование элементов
...Основные мета тэги
...Таблица дескрипторов HTML и их атрибутов
...Таблица свойств css
...Заключительное слово
HTML-редакторы
...Что такое HTML-редактор
...FrontPage 2003
...Adobe GoLive CS
...Macromedia Dreamweaver MX 2004
...HomeSite
...CuteSite Builder
...Namo WebEditor
...CoffeeCup HTML Editor
...1stPage 2000
...Arachnophilia
...HotDog Professional
...CSE HTML Validator Pro
 
 

«рамки и размеры  ||  язык HTML  ||  основные мета теги»

Позиционирование элементов документа html

Способ воспроизведения элементов

Разрыв страницы

Относительное позиционирование

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

Способ воспроизведения элементов

Свойство display позволяет задать способ воспроизведения элемента html-страницы.

Значение block заставляет отображать элементы в виде объектов уровня блока. Такие объекты отделяются от остальных элементов страницы пустыми строками. Этим значением пользуются в тех случаях, когда надо воспроизвести элементы (графика, гиперссылки) на отдельных строках страницы.

Значение inline трактует элементы как встроенные объекты. Такие объекты размещаются на тех же строках страницы, что и соседние. Этим значением пользуются тогда, когда надо принудительно разместить элементы уровня блока (заголовки, например) в общем потоке данных.

Значение list-item служит для придания объекту статуса элемента списка. Такие объекты воспроизводятся как элементы списка, снабженные маркерами.

Значение none скрывает все элементы страницы, описанные с помощью определенного дескриптора. В этом случае соседние элементы сдвигаются, занимая место скрытых.

Разрыв html-страницы

Для указания места разрыва страницы при печати документа используются свойства page-break-before, page-break-after со значениями always, avoid.

Свойство page-break-before со значением always указывает браузеру располагать символы разрыва страницы перед каждым элементом, описанным с помощью конкретного дескриптора. Так, например, при использовании этого свойства в определении стиля для тэга Н3 браузер будет печатать разделы документа, начинающиеся с заголовка Н3 на новой странице.

Свойство page-break-after со значением always указывает браузеру располагать символы разрыва страницы после элемента.

Для предотвращения вставки браузером символов разрыва страницы перед или после определенных элементов, надо использовать те же свойства, но со значением avoid.

Относительное позиционирование

Для относительного позиционирования элементов Вэб-страницы служит свойство position со значением relative. При этом браузер не влияет на положение других элементов Вэб-страницы.

Для указания направления смещения служат свойства top, bottom, left, right.

Величину смещения можно задавать в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании смещения при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

Пример:

HTML-код:


<style>

p.rel{position:relative;bottom:27px;left:1px;color:red}

</style>

...

<p>Пример относительного позиционирования</p>

<p class="rel">Пример относительного позиционирования</p>

Отображение в браузере:


Пример относительного позиционирования

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

Для абсолютного позиционирования элементов Вэб-страницы служит свойство position со значением absolute. При этом браузер "вырывает" элементы абсолютного позиционирования из общего контекста страницы, причем соседние элементы сдвигаются, занимая "освободившееся" пространство.

Для указания направления отсчета координат элемента относительно сторон "родительского" объекта (обычно Вэб-страницы) служат свойства top, bottom, left, right. Например, при задании свойства top, отсчет будет вестись от верхней границы.

Величину абсолютных координат можно задавать в пунктах, пикселях, миллиметрах, сантиметрах, дюймах, пиках, а также единицах ex, em. При задании координат при помощи единиц ex, функцию единицы измерения выполняет высота строчной буквы "x" текущего шрифта. em - позволяет указать размер относительно высоты шрифта в целом.

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

top

«рамки и размеры  ||  язык HTML  ||  основные мета теги»
Рекомендую
Смотреть все книги»
 
 
 

Спасибо, что заглянули на сайт. Надеюсь, Вам понравилось. Заходите еще. Здесь всегда рады вам :)
При копировании материалов, размещенных на сайте, ссылка на первоисточник обязательна.

© 2008
Айнур Турушев All Rights Reserved

  

E-mail:
sozdaysait@narod.ru

Хостинг от uCoz