Навигация

Партнеры


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

СSS 38. Дизайнерский прорыв.


К югу от границы
Контент, загнанный в стойло с помощью полей и позиционирования


Большая доза кофеина - это как раз то, что надо, чтобы подстегнуть воображение. В нашем случае идеи посетили Роба Шклдса после приема толики горячего чая. Уж не знаем, что там было намешано, но в результате появилось никак не меньше 50 идей - в виде ключевых слов, описывающих общую тему сайта.
В конце концов Шилдс остановился на третьей идее - теме Юго-Запада. Он не стал заранее ограничивать свое воображение, решив, что найдется место для любой полезной картинки. После чего запустил Adobe Photoshop и работал с графикой, пока не нашел понравившуюся композицию. Немного подправив картинки в Photoshop, Шилдс приступил к кодированию CSS, и в результате получился дизайн «К югу от границы» с четко выраженной темой.

Начнем с простого

Один из интересных аспектов работы Шилдса - это выбор цветовой гаммы, на которую его вдохновил вид коричневого костюма в синюю полоску. Он подготовил площадку для работы, задав светло-синий фон в элементе body, светло-коричневый и более темный оттенок синего - для ссылок и белый цвет для основного текста, расположенного на темно-синем фоне:

body {
font: 83%/150%;
color: #fff;
background: #EDEDED url(background.gif)
repeat-y fixed bottom center,-
margin: Opx;
padding: Opx;
}


Шилдс намеренно задал размер шрифта в процентах, чтобы он мог масштабироваться. Эффект от такого управления шрифтами и фоном показан на следующей странице.
Стилизация контейнера Задав основные свойства (опущенные здесь фрагменты таблицы стилей можно посмотреть в исходном CSS-файле), можно переходить к стилизации раздела # c o n t a i n e r . Ниже приведены стили для присоединенной к контейнеру фоновой картинки, полей и ширины:

ttcontainer {
position: relative;
background: url(bg-central.gif) repeat top
left;
margin: Opx auto Opx auto;
width: 655px;


Разумеется, # c o n t a i n e r позиционирован относительно, а поскольку свойства t o p и l e f t остались незаданными, то этот элемент остался в нормальном потоке. Тех, кто только приступает к изучению CSS, часто вводит в заблуждение слово «относительное».
Кажется, что речь идет о позиционировании относительно какого-то другого элемента. Это естественная, но совершенно неправильная интерпретация.
Относительное позиционирование позволяет разместить элемент, не изымая его из нормального потока. Это совсем не то, что делает браузер с элементами, позиционированными по-другому, например абсолютно. Очень скоро вы отчетливо увидите разницу.
А пока наша цель - создать контейнер, визуально окружающий находящиеся внутри него элементы. После применения стилей к разделу # c o n t a i n e r (см. оригинальный CSS-файл), можно заняться дополнительной стилизацией содержащихся в нем элементов.

Взнуздаем текст

Теперь основной текст следует отодвинуть от краев объемлющего контейнера. Это достигается заданием полей для каждого d i v внутри элемента ttcontainer:

#intro {
margin:Opx;
#quickSummary, tpreamble {
margin: Opx 200px Opx 68px;
fpageHeader {
margin: Opx;
}
#supportingText {
margin: Opx 20Opx Opx 68px;


При такой установке полей текст занимает нужное положение.
В шапку их!
Добавление графических заголовков - в особенности для элемента ttpageHeader hi -уравновешивающих текст, приближает дизайн к окончательному виду:

#pageHeader hi {
margin: Opx Opx Opx Opx;
.
background: transparent url(top.gif) norepeat
top left;
width: 655px;
height: 206px;
}


На рис. 4 показано, как выглядит страница после присоединения картинки к элементу #pageHeader hi.
Еще несколько достойных внимания примеров заголовков из CSS-файла помогут понять, как с помощью задания полей, фоновых изображений и ширины с
высотой можно эффективно управлять положением графики и текста:

•preamble h3 {
background: transparent url(chl.gif) norepeat
top left;
margin: Юрх Opx 5px Opx;
width: 3 88px;
height: 44px;
•benefits h3 {
background: transparent urKch4.gif) norepeat
top left;
margin: Юрх Opx 5px Opx;
width: 3 88px;
height: 44px;
•requirements h3 {
background: transparent url(ch5.gif) norepeat
top left;
margin: Юрх Opx 5px Opx;
width: 388px;
height: 44px;


Теперь заголовки удачно сочетаются с прочими элементами на странице.
Наконец, мы видим, как выглядят синие рамки:

(•benefits {
border-bottom: lpx dashed #8095AF;
}
•preamble {
border-bottom: lpx dashed #8095AF;


Рамки добавляют зрительный контраст и одновременно выступают в роли разделителей между фрагментами текста.

А теперь хвостовик

Теперь, когда центральная часть страницы оформилась, можно заняться хвостовиком. Его содержимое просто: ссылки на инструменты контроля и фоновая карт - фотоинка с головой коровы:

#footer {
text-align: center;
background: transparent url(bottom.gif) norepeat
top left;
height: 37px;
margin: Орх -200рх Орх -б8рх;
padding-top: 88рх;
}
tfooter a:link, #footer a:visited {
margin-right: 20px;
}

Обратите внимание на отрицательные поля слева и справа: они помогают удержать хвостовик в границах объемлющего элемента.

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

Вы не забыли, что элемент ttcontainer позиционирован относительно? Так вот, список ссылок абсолютно позиционирован внутри относительно позиционированного div:

ttlinkList {
position: absolute;
top: 207px;
right: 6px;
width: 181px;


В результате список ссылок оказывается сбоку от основного текста. В отличие от относительного, при абсолютном позиционировании элемент размещается
относительно своего родительского элемента1. Если такового не существует, то вычисляется позиция относительно корневого элемента html.
Чтобы наглядно увидеть, что происходит, достаточно отменить относительное позиционирование для элемента # c o n t a i n e r.
Природа абсолютного позиционирования такова, что элемент позиционируется относительно позиционированного объемлющего элемента или относительно элемента html, если объемлющего не существует. Когда с непосредственного родителя снято относительное позиционирование, элемент # l i n k L i s t позиционируется
относительно корневого элемента. После восстановления относительного позиционирования для элемента # c o n t a i n e r дизайн снова выглядит, как задумано.
Как воспользоваться этой возможностью, если родитель не позиционирован? Задайте для родителя свойство p o s i t i o n : r e l a t i v e ; , не указывая ни t o p , ни
l e f t ; на фактическом положении родителя это не отразится, зато установит новую точку отсчета. Подробнее на эту тему читайте статью Дугласа Боумена
«Making the Absolute, Relative» на сайте Stopdesign (www.stopdesign.com/articles/absolute).

Закончим со ссылками

Поместив элемент # l i n k L i s t в нужное место, можно применить к нему дополнительные стили. Прежде всего нужно задать поля и отступы равными 0:

ttlinkList ul {
margin: Opx;
padding: Opx;
}


Далее в CSS-файле следуют другие стили для ссылок, в том числе для отдельных элементов списка:

#linkList li {
list-style-type: none;
background: transparent url(li-bg.gif) repeat
top center;
padding: 8px 6px 8px 6pxl
margin: Opx;
border-top: lpx solid #5D4831;
border-bottom: lpx solid #221609;
display: block;
>


Дополнительные стили для заголовков в списках ссылок, задания цветов, полей и отступов вы сможете найти в оригинальном CSS-файле.

Все по местам

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




ss extended






ss


SS

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



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



Поиск

***

Онлайн
Всего на сайте: 25
Гостей: 19
Пользователи: - отсутствуют
Роботы: Google Bot, Google Bot, Yahoo Bot, Google Bot, crawl Bot, Yandex Bot

20-ка посетителей: thelmavk4, HamidVum, JesperMl, AgnesAccony, FelipeDand, HogarEr, Dawsonpt, Edwardkax, Koaress, ruthvj16, elsieyf3, Dustinfow, cyxknbhuch, shadowmoon, marazf2, KerthOr, CharlesKene, ShakyorGync, kittyhu1, RafaelNew


Партнеры

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

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

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

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