Навигация

Партнеры


Комментариев: 0
 (голосов: 1)

CSS дизайн. Часть 16.


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


Чтобы разобраться с абсолютным позиционировании, надо понимать, что такое поток документа. Мы уже писали, что язык HTML по природе своей линеен: сначала может идти элемент h i , за ним р, потом d i v . Элементы могут быть вложенными, но
если не применяются никакие стили, то HTML-документ прорисовывается последовательно с начала и до конца.
Абсолютное позиционирование позволяет не только переместить элемент в любое место на странице, но и изъять его из нормального потока документа. Абсолютно позиционированный блок не влияет ни на какие другие элементы, как будто его никогда и не было в потоке. Визуально он окажется в том месте, куда его поместили, но с точки зрения других элементов его просто не существует. Решать вопросы, связанные с возможным перекрытием, - задача дизайнера.
Единственный случай, когда абсолютно позиционированный блок как-то влияет на другой элемент, - это если последний является потомком первого и также пози-
ционирован. Согласно модели позиционирования, любой элемент позиционируется относительно своего контейнера. В большинстве случаев контейнером служит корневой элемент документа html. Однако если у рассматриваемого элемента есть позиционированный предок, отличный от корневого элемента, то позиционирование производится относительно него.

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


В случае относительного позиционирования элемент не изымается из нормального потока. Сначала определяется естественная позиция элемента, а затем элемент сдвигается относительно нее. Таким образом, на странице остается «дырка», которую другие элементы должны, тем не менее, принимать во внимание.
Относительное позиционирование чаще всего применяется для сдвига элементов; элемент, первоначально расположенный в ячейке сетки, можно легко вынести за ее пределы. Можно также осуществить тонкую подгонку, когда никакие другие способы позиционирования неприменимы. Например, Саварезе с помощью относительного позиционирования переместил дракона из его естественной позиции под
белой областью контента в левый угол хвостовика. Применить абсолютное позиционирование к элементам, находящимся в нижней части макета, гораздо
труднее, чем к элементам, расположенным ближе к началу, поэтому в данном случае использование относительного позиционирования позволяет решить
задачу более простым способом.

Гибкость и регулярность


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

He так уж бедно

Решение типичных проблем перекрытия

Название «Не так уж бедно» вызывает вопрос: «Не так уж бедно, как что?». С этим ди-
зайном связана целая история. Первая работа Дэна Рубина, присланная на сайт Zen
Garden, создавалась с целью добиться максимально возможной простоты. Признавая
ценность хорошего минималисткого дизайна, мы все же создавали сайт Zen Garden с це
лью избавиться от клейма минимализма, приписываемого CSS. Тогда Рубин доработал
Grazay, добавив графику, и то, что получилось, назвал «Не так уж бедно».

Когда контента слишком много


При верстке страницы с помощью CSS очень часто приходиться бороться с неопределенностью, присущей Web. Точнее, проблема состоит в том, как быть с предопределенными значениями ширины и высоты в CSS в случае, когда объем контента заранее неизвестен.
Неопределенность длины контента - неотъемлемая особенность веб-страниц, которые могут содержать как много, так и мало информации. Программы, управляющие динамическими сайтами (например, системы управления контентом - CMS), могут вставлять контент переменной длины - совсем короткий или весьма и весьма пространный.
Если ни автор, ни система CMS не налагают жестких ограничений на длину контента - а обычно это нереально, то нужно обязательно проверять, как будет выглядеть любая содержащая контент область при разной его длине. Поведение текстового контента менее предсказуемо, чем графического, так как размеры изображений известны заранее и не изменяются. Но даже это не является непреложным правилом, поскольку CMS может вставлять несколько изображений или изображения разной высоты. Да и вообще есть множество факторов, приводящих к отличиям в размерах.
Впрочем, ситуация постепенно улучшается, последние версии CMS генерируют корректную разметку в формате XHTML/CSS. К числу наиболее распространенных
систем управления контентом можно отнести Drupal и Mambo.
Многие современные браузеры предоставляют пользователю возможность изменять масштаб текста, и люди со слабым зрением этим активно пользуются. При увеличении размера шрифта тоже возможно нежелательное перекрытие. Если занятая контентом область устроена так, что проблемы с переменной длиной текста не возникает, то теоретически не должно быть и сложностей из-за масштабирования. Но короткие фрагменты текста, например навигационные ссылки, часто страдают от этой проблемы. Мы рекомендуем всегда проверять, выглядит ли страница приемлемо при увеличении размера шрифта на 150% и даже больше, поскольку обязательно найдутся пользователи, которые захотят так сделать.
Рано или поздно вы, скорее всего, столкнетесь с ситуацией, когда область контента переполняется по вертикали или по горизонтали. В результате вы увидите
либо перекрывающийся контент, либо область, простирающуюся далеко вниз, - гораздо дальше, чем следовало бы. Первое указывает на некорректное абсолютное позиционирование, второе - свидетельство наличия плавающих объектов, слишком высоких или широких для отведенной под них области.

Переполнение в плавающих объектах


Строго говоря, атрибут f l o a t - это не инструмент верстки. Плавающие объекты предназначены для того, чтобы текст мог обтекать строчные элементы, их применение для верстки макета никогда не рассматривалось. Но нам приходится пользоваться плавающими элементами по одной простой причине: нет другого способа расчистить место (clear) для контента. В простейшей форме атрибут c l e a r и вся концепция
расчистки сводятся к тому, чтобы сказать браузеру, что некий элемент не следует начинать рисовать, пока не будет завершен какой-то другой элемент. Проблема
переполнения при абсолютном позиционировании по большей части проистекает из невозможности расчистить место, занятое позиционированным объектом.
Но механизм плавающих объектов не идеален, и его несовершенства еще ярче проявляются из-за неодинаковой поддержки браузерами.

Для расчистки нужна подходящая разметка


Чтобы механизм расчистки правильно работал, в HTML-коде должны присутствовать по крайней мере два элемента: тот, к которому применяется свойство f l o a t , и еще один, который расчищает место. Два d i v могут «уплыть» соответственно налево и направо, но тогда понадобится третий, который прекратит обтекание. Часто можно воспользоваться уже существующими в разметке элементами, например, прекратить
обтекание плавающего h3 с помощью одного из следующих за ним абзацев р.
Но иногда приходится мириться с неизбежным злом: добавлять лишний пустой элемент в разметку с единственной целью расчистить место. Для таких случаев мы рекомендуем универсальный div, не содержащий никакого контента:
<div class="clear"x/div>

К этому классу может быть применено свойство c l e a r . Решение некрасивое, но оно работает и не слишком загромождает структурную разметку ненужными элементами.

При размещении плавающих объектов нужна точность


Если наполнить аквариум до краев, а потом всыпать в него горсть песку, что произойдет? Понятно что - часть воды выльется. У плавающих объектов аналогичные ограничения, связанные по большей части с переполнением по горизонтали. Если два плавающих объекта, каждый шириной в 50% окна, расположить один за другим и за-
дать для первого поле шириной 100 пикселей, то второй будет вытеснен и окажется под первым. Поэтому нужно заранее рассчитывать ширину. Но Microsoft Internet Explorer для Windows не поддерживает атрибуты w i d t h и h e i g h t так, как это реко-
мендовано в спецификации CSS. Предполагается, что элемент, контент которого шире, чем значение width, попытается перерисовать свой контент, а если это не
получится, то оставит ширину неизменной и позволит контенту «выплеснуться» за границы контейнера. Смысл в том, чтобы не менять положение плавающего объекта, даже если контент начинает перекрывать другие элементы.
Но Internet Explorer позволяет элементу расширяться по мере необходимости. Как только плавающий объект становится хотя бы на пиксель шире допустимого, он вытесняет другие плавающие объекты. Решить эту проблему можно несколькими
способами.

Сделать область шире


Если есть возможность увеличить ширину области, в которой размещены плавающие объекты, то этого может оказаться достаточно. Такое решение не оптимально, но начать нужно с него, поскольку реализуется оно очень просто.

Ограничить ширину контента


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

html

Добавить статью в:
0



Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.



Поиск

***

Онлайн
Всего на сайте: 42
Гостей: 22
Пользователи: msvuser
Роботы: Yandex Bot, robot Bot, robot Bot, robot Bot, robot Bot, robot Bot, robot Bot, Google Bot, robot Bot, robot Bot, robot Bot, Google Bot, Yahoo Bot, Google Bot, crawl Bot, robot Bot, robot Bot, robot Bot, robot Bot

20-ка посетителей: msvuser, Jamesvum, JaffarCano, AgnesAccony, Michaelflill, Porgangent, dwightza4, nolajq16, Melvinvor, haleyvn11, nikkiuf4, JasonOwelo, EnzoZogy, IUEdgar, karynih4, shadowmoon, lunar.elf, wlwkgnhuch, jerryvt4, twilacl3


Партнеры

Мы в социальных сетях
Популярные статьи

Последние комментарии
Файлы почтой

Облако тегов
Abstract, ai, background, backgrounds, clipart, design, eps, Flyer, frame, frames, Graphic, jpg, photo, Photoshop, PNG, PSD, scrap, Stock, template, vector, Wallpapers, Вектор, Графика, Дизайн, Клипарт, Обои, Рамка, Рамки, Цветы, Шаблон, исходники, картинки, кисти, новый год, скрап, фоны, фото, фоторамка, фотошоп, шаблоны

Показать все теги