Навигация

Партнеры


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

Css дизайн. Часть 13

Энтомология
Центрирование в современном веб-дизайне


Интересно, откуда берутся идеи? В случае «Энтомологии» идею дизайна навеял музы-
кальный клип - сингл «Булавка», исполняемый Yeah Yeah Yeah. Джон Хикс хотел создать визуальное воплощение концепции сада, которое тем не менее садом не являлось бы. Видеоряд в «Булавке» содержит изображения наколотых бабочек, которые идеально отвечали замыслу Хикса. Нарисовав грубый эскиз макета, Хикс сразу перешел к CSS, не создавая предварительно модель в Adobe Photoshop. Поскольку это был его личный проект, а у него хватало и другой
работы, то он не стал тратить время на все шаги стандарт - фотоной процедуры дизайна. Он
рассказывает, что даже надел тропический шлем и положил рядом сачок, чтобы создать реалистичную обстановку! То, что получилось в результате, резко отличается от присущей Хиксу манеры.

Фиксированная и текучая верстка

Макеты для Web традиционно принято относить к одному из двух видов: фиксированные и текучие. При фиксированной верстке задается конкретная ширина.
Контент можно выровнять по левому краю, правому краю или центру, но он не должен выступать за пределы области указанной ширины. Примером может
служить дизайн «Энтомологии».
Текучий, или динамический (liquid, fluid, dynamic), дизайн отличается тем, что ширина задается в процентах, а не в абсолютных величинах, так что макет «растекает-
ся», стремясь заполнить всю ширину окна. Возможны и комбинации этих подходов. Взять, к примеру, трехколонный макет, в котором для боковых колонок задана фиксированная ширина, а для средней - процентное отношение (или ширина не задана вовсе).
В этом случае контент займет все доступное пространство, но средняя колонка будет сжиматься или расширяться при изменении размеров окна браузера или разрешающей способности монитора. Как и во многих других случаях, пристрастия и мода
постоянно меняются. В самом начале развития Web предпочтение отдавалось фиксированной верстке. Но со временем стали обсуждаться достоинства текучего дизайна, а спустя несколько лет он стал очень популярен. В последние два года вновь растет популярность фиксированной верстки, особенно среди дизайнеров, при-
верженных стандарт - фотоам. Когда мы работали над книгой, почти все ведущие специалисты в этой области применяли фиксированный дизайн как на собствен-
ных сайтах, так и при работе на заказ. Это интересная тенденция - надо бы разобраться, почему фиксированная верстка может нравиться дизайнерам больше,
чем текучая.
Прежде всего, фиксированная верстка оставляет дизайнеру больше контроля над пространством, в котором он может работать. Проще управлять длиной тек-
стовых строк, а также взаимным расположением и близостью текста и изображений. Поэтому весьма вероятно, что фиксированная верстка вновь выйдет на
первый план.
У текучего дизайна тоже есть свои преимущества.
Если заполнено все окно браузера, то сама собой решается проблема зрительного баланса, возникающая в случае, когда фиксированная, прижатая к левому
краю верстка занимает лишь часть доступного пространства. Но за это приходится платить потерей контроля над длиной строк, потоком и взаимным расположением элементов. Для опытных дизайнеров это серьезные проблемы, а вариантов их решения совсем немного.
Чтобы одновременно иметь возможность контроля, как при фиксированной верстке, и решить проблему зрительного баланса, дизайнеры часто центрируют
контент. Тогда свободное пространство равномерно распределяется по обе стороны занятой области, что позволяет избежать широкого пустого места справа.

Способы центрирования


Центрирование с помощью CSS оказывается не совсем тривиальным делом, так как узаконенный способ горизонтального размещения по центру работает неодинаково в разных браузерах. Хикс столкнулся с этой проблемой, работая над «Энтомологией», и решил ее обходным путем. Но прежде чем знакомиться с его подходом, рассмотрим стандарт - фотоные методы центрирования макета с помощью таблиц стилей.

Центрирование с помощью автоматически устанавливаемых полей


Предпочтительный способ центрирования любого элемента по горизонтали - это использование свойства margin, значения l e f t и r i g h t которого задаются равными a u t o . Чтобы этот способ сработал, необходимо создать объемлющий d i v . При этом
обязательно должна быть задана его ширина.

div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}

Карт - фотоинка помещена в отдельный d i v и центрирована с помощью автоматических полей. Этот прием прекрасно работает почти во всех современных браузерах, даже в Microsoft Internet Explorer 6 для Windows при условии, что установлен режим совместимости. К сожалению, в более ранних версиях Internet Explorer для Windows он не работает, поэтому его применимость ограничена.Несмотря на неадекватную поддержку, многие дизайнеры пропагандируют использование именно этого
приема всюду, где возможно, поскольку его можно считать стандарт - фотоизованным методом горизонтального центрирования в CSS.

Центрирование с помощью свойства text-align


Другой способ центрирования состоит в использовании свойства t e x t - a l i g n . Ему нужно присвоить значение c e n t e r и применить к элементу body. Это, конечно, отъявленное мошенничество, но оно работает во многих браузерах, так что трюк можно взять на воружение.
Мошенничеством мы назвали этот прием потому, что свойство текста применяется к объемлющему элементу, а не к тексту. А это создает дополнительные сложности.
Создав div, необходимые для макета, вы применяете свойство t e x t - a l i g n следующим образом:
body {
text-align: center;
}

В чем же здесь проблема? А в том, что и все потомки body тоже будут центрироваться.
А значит, придется писать дополнительные правила для корректировки и восстановления стандарт - фотоного отображения текста:
Р С
text-align: left;
}

Как вы понимаете, это не слишком удобно. Кроме того, по-настоящему совместимые со стандарт - фотоом браузеры не будут выравнивать контейнер, только текст. Сочетание задания полей с выравниванием текста Принимая во внимание проблемы с обратной совместимостью свойства t e x t - a l i g n и желая воспользоваться поддержкой автоматических полей в большинстве современных браузеров, многие дизайнеры
объединяют оба подхода, для того чтобы центрирование правильно работало во всех браузерах:
body {
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
border: lpx solid red;
width: 168px;
text-align: left;

Увы, такое решение тоже несовершенно и по-прежнему остается трюком. Приходится писать дополнительные правила для управления выравниванием текста.
Но все же оно дает хорошие результаты для большинства браузеров.

Решение на основе отрицательных полей


Столкнувшись с проблемой центрирования в «Энтомологии», Хикс решил применить еще один прием: задать отрицательные значения полей. Впрочем, для центрирования недостаточно просто задать отрицательные поля. Понадобится еще применить абсолютное позиционирование.
Вот как это делается. Сначала создаем контейнер, абсолютно позиционируем его и задаем отступ от левой границы - 50 процентов. В результате левое поле
объемлющего блока будет начинаться в середине страницы.
Затем левому полю контейнера присваивается отрицательное значение, равное половине ширины объемлющего элемента. В итоге объемлющий блок распо-
лагается точно по центру.
Вот фрагменты из таблицы стилей «Энтомологии»:
#container {
background: #ffc url(mid.jpg) repeat-у
center;
position: absolute;
left: 50%;
width: 760px; •
margin-left: -380px;
}

Ловкость рук и никакого мошенства! Хотя этот метод нельзя назвать предпочтительным, но в качестве обходного пути он годится и поддержан очень широко. Вы не поверите, но даже Netscape 4.x поддерживает эту технику, поэтому она оказывается исключительно полезной, если дизайн должен работать с максималь-
но большим числом разных браузеров.

Верность стилю


Мода приходит и уходит, а дизайн с фиксированной версткой останется еще надолго. Он дает возможность очень точно определить макет страницы и потому
находится в арсенале любого дизайнера. Какой подход предпочесть, зависит от личных пристрастий и того, на какие браузеры вы ориентируетесь.
Использование для центрирования комбинации отрицательных полей и абсолютного позиционирования (как в «Энтомологии») — это прием, согласующийся
со спецификацией и работающий в самых разных браузерах, в том числе и тех, от которых трудно ожидать поддержки.














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



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



Поиск

***

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

20-ка посетителей: Briaxx56nAvant, eythoumb, oapedkag, oodoosque, AgnesAccony, zjExifide, NedforspidBowex, Romaflill, GeorgeReind, oliviabs69, xizvcqht28, KawaPaut, msvuser, Helenmom, hqNonfoula, StacyLic, nbfnckzx01, deEquigue, elnoraok11, StanleyWaw


Партнеры

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

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

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

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