Навигация

Партнеры


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

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


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

Задний двор

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


Иногда не знаешь, с чего начать новую работу, но источник вдохновения можно найти везде. Немало ярких идей, изменивших мир, зародилось в кафе за чашкой кофе с молоком и интересной беседой. Рэй Генри встретил свою музу в двух садах - Zen Garden и своем собственном. Так появился на свет «Задний двор». Цветовая гамма этого дизайна пришла с фотографии, на которой запечатлены цветы, растущие в саду на заднем дворе дома Генри. Хотя дизайн с тремя колонками выглядит очень традиционно, у Генри во время работы возникло немало вопросов, и он поначалу не
был уверен, что сумеет воспроизвести табличный макет с помощью CSS. Удастся ли поместить ссылки в правую колонку? Как это сделать? Может быть, для достижения нужного эффекта нужно верстать совсем по-другому?
Но методом проб и ошибок Генри все-таки разрешил все проблемы поочередно.

Основы макета


Чтобы сверстать страницу с несколькими колонками, необходимо кое-что знать о CSS. Не существует свойства « l e f t - c o l u m n : 200px», которое волшебным
образом создало бы нужные колонки, поэтому приходится прибегать к различным трюкам.
Для создания макета, состоящего из колонок, есть два основных способа, и у каждого из них свои достоинства и недостатки. Из четырех схем позиционирования, имеющихся в CSS (absolute, static, relative и fixed), только абсолютное позиционирование позволяет изъять контент из нормального потока и поместить его в произвольное место. С другой стороны, хотя технически плавающие элементы нельзя назвать схемой
позиционирования, но таким образом CSS позволяет зарезервировать место так, что остальное содержимое документа будет обтекать его.
Любой из этих методов обеспечивает контроль над элементами, достаточный для создания многоколонного макета. Плавающие элементы и абсолютное позициониро-
вание можно использовать как вместе, так и порознь.

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


Из двух вышеупомянутых методов абсолютное позиционирование проще для понимания. Если размещать несколько элементов один за другим (это называется нормальный поток документа), как в HTML-разметке ниже, то получится линейная пос-
ледовательность. Этого и следовало ожидать.
<Ы>Это заголовок</Ы>
<р>Это текст</р>
<р>А это другой текст</р>

Применение к какому-либо элементу абсолютного позиционирования перемещает его (в данном случае заголовок) в указанное место, а оставшаяся «дырка» схлопывается. Абсолютно позиционированный элемент не оказывает влияния на своих соседей.
Все выглядит так, как будто этого элемента вообще нет в документе (хотя мы его прекрасно видим). Синтаксически конструкция выглядит примерно так:
h3 { position: absolute; top: 100 рх; }

Достоинство метода абсолютного позиционирования в том, что он обеспечивает точный контроль над положением данного элемента. Но раз элемент изъят из нормального потока, то он не может воздействовать на остальные элементы. Иногда это становится проблемой, как мы покажем в следующем размере. Плавающие элементы
С плавающими элементами разобраться сложнее, поэтому мы прибегнем к помощи рисунков.
Именно в этом и состоит суть плавающих элементов в CSS: фотография вставляется в текст и делается плавающей, а текст обтекает ее, чтобы не было уродливого разрыва.
Синтаксис прост, но овладеть им нелегко. Фрагмент таблицы стилей, описывающий только что рассмотренный пример, мог бы выглядеть примерно так:
#photo { float: left; margin: Юрх Юрх lOpx 0; }

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

Методы верстки


Разметка в примере ниже содержит базовые блоки для организации трех колонок и хвостовика. Главная область контента располагается в коде раньше обеих бо-
ковых колонок. Это сделано для удобства поисковых машин и ради пользователей, которые при просмотре страниц отключают поддержку CSS: чем раньше
текст появляется в HTML-коде страницы, тем меньше элементов навигации и прочих ссылок придется пропустить, чтобы добраться до важного контента.
<div id="wrapper">
<div id="contentArea">
<p>(здесь заголовки и текст)</р>
<div id="leftPanel">
<p>(здесь ссылки и различные текстовые
элементы)</р>
<div id=»rightPanel»>
<p>(здесь ссылки и различные текстовые
элементы)</р>
<div id=»footer»>
<р>(Авторское право, ссылки и т.д.)</р>

Чтобы по-быстрому сверстать макет, в котором используется абсолютное позиционирование, не нужно долгого планирования. Задайте для всех трех колонок
фиксированную ширину, позиционируйте каждую из них, ведя отсчет от левого верхнего угла документа, и временно забудьте о хвостовике.
#contentArea {width: 450px; position:
absolute; top: 0; left: 150px; }
#leftPanel {width: 150px; position: absolute;
top: 0; left: 0 }
trightPanel {width: 150px; position: absolute;
top: 0; left: 600px; }
#footer {display: none; }

Сейчас все прижато к левому краю, а как можно отцентрировать? Легко. Модель позиционирования обладает полезной особенностью: если вы абсолютно позиционируете элементы, содержащиеся в другом элементе, который тоже абсолютно позиционирован, то значения t o p и l e f t отсчитываются не от положения корневого элемента html (то есть от левого верхнего угла окна браузера), а от левого верхне-
го угла объемлющего элемента. Непонятно? Объемлющий элемент ведет себя как но-
вая точка отсчета для абсолютного позиционирования всего, что в нем находится. Поэтому если элемент #wrapper позиционировать и центрировать, то все
колонки останутся внутри него. Приведенная ниже таблица стилей показывает, как связать все это воедино (свойство t e x t - a l i g n включено для того, чтобы
обойти «глюк» в Internet Explorer 5 для Windows, который не центрирует элементы со свойством margin, равным auto).

body {
text-align: center;
#wrapper {
width: 750px;
margin: 0 auto;
text-align: left;
position: relative;
}
#contentArea {
width: 450px;
position: absolute;
top: 0;
left: 150px;
}
SleftPanel {
width: 150px;
position: absolute;
top: 0;
left: 0
#rightPanel {
width: 150px;
position: absolute;
top: 0;
left: 600px;
}

Но что делать, если нужен хвостовик? Поскольку абсолютно позиционированные колонки не влияют на соседние элементы, то хвостовик их игнорирует и располагается так, как если бы этих колонок не существовало. В данном случае он окажется первым элементом на странице.
Чтобы решить эту проблему с помощью абсолютного позиционирования, нужно заранее знать высоту каждой колонки и задать позицию хвостовика так, чтобы он оказался в самом низу. Не обращаясь к javascript, сделать это невозможно, остается только
перейти от абсолютного позиционирования к плавающим элементам.
На рис. 8 хвостовик автоматически позиционируется под колонками благодаря использованию плавающих элементов.

body {
text-align: center;
}
#wrapper {
width: 750px;
margin: 0 auto,-
text-align: left;
position: relative;
}
ttcontentArea {
width: 450px;
float: left;
UeftPanel {
width: 150px;
float: left;
}
#rightPanel {
width: 150px;
float: left;
}
#footer {
clear: both;


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

Все абсолютно сочетаемо


Как и многие другие, приступающие к изучению верстки на основе CSS, Рэй Генри для своего макета с тремя колонками выбрал абсолютное позиционирование.
Во многих случаях и уж, конечно, для «Заднего двора» это вполне здравое решение, поскольку методика эффективна и проста для понимания.
Но не для всех сценариев это решение идеально, иногда возникают сложности. Если необходим хвостовик или элементы на странице должны что-то знать о взаимном расположении, на помощь приходят плавающие объекты. Само по себе ни одно ре-
шение не идеально, но они неплохо дополняют друг друга. Пользуйтесь и тем и другим, в сочетании они способны реализовать все, что вы только можете себе
вообразить.










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



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



Поиск

***

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

20-ка посетителей: vrsgeihuch, lunar.elf, carleneup1, helenaog16, Jamesvum, dorothymy1, RichardHaf, soniaav60, RickyHot, shawnaxo4, Koaress, cindyrs11, wordpress, AgnesAccony, GrobockTot, Curtisdum, Andrewbok, msvuser, Asteroigck, NikollCype


Партнеры

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

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

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

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