web-development.ucoz.ru

Позиционирование блоков

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

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

1. Нормальный поток.
2. Относительное позиционирование.
3. Абсолютное позиционирование.
4. Плавающая блоковая модель.

Кроме того, важную роль играет само расположение блоков в коде документа. К этому вы должны были уже привыкнуть, поскольку порядок записи элементов в коде, как правило, соответствует порядку их вывода на экран (с учетом порядка вложенности). В GSS для позиционирования порядок записи в коде несуществен только для блоков, позиционируемых абсолютно. А в нормальном потоке положение элементов в коде полностью определяет внешний вид документа, так же как в HTML.

Следует отметить, что параметры устройств вывода также играют немаловажную роль, - например, размер и разрешение экрана монитора. Все Web-разработчики давно привыкли адаптировать свои работы к минимальному разрешению 800x600, но с появлением мультимедийных мобильных телефонов, с которых также стало возможным просматривать не WAP, а обычные Web-страницы, ситуация усложнилась. Конечно, таких пользователей пока немного, но со временем их количество будет расти, однако не следует ожидать, что экраны мобильных телефонов будут сколько-нибудь заметно увеличиваться. Видимо, скоро перед разработчиками встанет новая задача - адаптировать сайты и под миниатюрные экраны мобильных телефонов.

Так, если вы рассчитывали, что вашу Web-страницу будут смотреть на разрешении 1024x768, то в лучшем случае появится полоса прокрутки, а в худшем может "расползтись" весь дизайн.

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

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

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

Как считают многие, будущее именно за CSS-позиционированием (иначе его называют CSSP), хотя и оно не лишено своих недостатков. Почему же все-таки делают ставки на CSSP? Во-первых, CSSP поддерживает идею разделения структуры и визуального оформления документов. Все больше и больше сайтов создается на основе баз данных, и Web-страницы формируются динамически по запросу пользователя на основе определенных шаблонов. С появлением CSS вообще и CSSP в частности стало возможным создавать шаблоны документов, а затем, изменив только лишь таблицу стилей, полностью менять дизайн сайта. При этом можно изменить даже положение блоков, а не только их оформление, вовсе не внося каких-либо изменений в код страницы. Кроме того, созданный подобным образом код страниц значительно меньше по объему и логичнее по своей структуре. Его проще читать и редактировать.

Одним из главных препятствий на пути CSS-позиционирования является неодинаковая поддержка этой технологии браузерами. Здесь, конечно, решающую роль играет популярность определенных браузеров среди пользователей. Поскольку браузеры, хорошо поддерживающие CSS (такие, как Opera и Mozilla), пока недостаточно широко распространены, приходится ориентироваться на самый популярный браузер Internet Explorer 5 и 6, который множество возможностей CSS поддерживает хуже, чем другие браузеры.

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