» Позиціювання CSS
фото на весь экран Nokia C5Мнимий монументализм абсолютного позиціювання
Очевидним недоліком HTML є відсутність можливості однозначно й просто позиціювати блок там, де хочеться. Наприклад, я хочу, щоб блок був зміщений на 250 пикселей від верхнього краю, і на 45 від лівого. Звичайно, в HTML можна реалізувати таке положення блоку за допомогою таблиць і розпірок, але хочеться простоти. В CSS така можливість забезпечується властивістю position, саме популярне значення в якого absolute. Для завдання зсуву існують властивості top й left. Моє бажання за допомогою каскадних таблиць стилів реалізується от так:
#block {position: absolute; top: 250px; left: 45px}
А в коді документа дуже простий блок:
<div id=”block”>
зміст блоку
</div>
Якщо повернутися до таблиць і спробувати позиціювати такий же блок з їхньою допомогою, то код небагато ускладниться:
<table cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”45″></td>
<td>
<img src=”i/0.gif” width=”1″ height=”250″><br>
<div>
зміст блоку
</div>
</td>
</tr>
</table>
Перший осередок таблиці використається для відступу ліворуч, а відступ зверху формується розпіркою. Пристойна різниця в коді, не чи правда? Звичайно, у реальному житті такої переваги й каскадних таблиць стилів звичайно не буває, але все-таки економія може бути істотної.
Отже, у нас є три чарівних властивості, які дозволяють точно позиціювати блоки. Виникає питання, щодо чого задається зсув? Варіанта два: або щодо вікна браузера, або щодо іншого позиционированного блоку. Якщо один блок вкладений в інший, і обоє з них мають оголошення position: absolute, то зсув другого блоку буде здійснюватися щодо першого. Давайте краще на прикладі, а те занадто складно звучить. Допустимо, є два блоки:
<div id=”left-col”>
<div id=”news”>
</div>
</div>
Стилі на блоки наступні:
#left-col {position: absolute; top: 20px; left: 10px}
#news {position: absolute; top: 20px; left: 10px}
Давайте подивимося, якими будуть абсолютні значення відступів щодо вікна браузера. Перший блок буде на 20 пикселей відбитий від верхнього краю й на 10 від лівого. Другий блок буде відбитий на 40 пикселей від верхнього краю й на 20 від лівого. Тобто він зміщається на зазначені значення не від самого вікна браузера, а щодо першого блоку. А якби блоки не були вкладеними:
<div id=”left-col”>
</div>
<div id=”news”>
</div>
Те вони накладалися б один на одного. Сподіваюся, зараз усе стало зрозуміло.
У нас є інструмент, що, по ідеї, може відмінно заміняти табличну верстку. Правда, чому б і немає? Адже він дозволяє з точністю до пикселя позиціювати блоки, не використовуючи розпірки. Давайте перевіримо можливості абсолютного позиціювання на нашому прикладі. Зараз ми спробуємо зверстати сторінку на основі CSS-блоків й CSS-позиціювання.
Поверніться до початку глави й подивитеся на мал. 9.1, якщо ще не запам’ятали всіх деталей. Як не крути, виходить три окремих головних блоки: шапка, основний із трьома колонками й копирайт. Ми вже верстали кожний із цих блоків за допомогою таблиць, а зараз спробуємо CSS. Помічу, що відразу я буду створювати блоки відповідно до специфікації, тобто для браузерів Mozilla й Opera. Адаптацією коду під Internet Explorer займемося небагато пізніше.
Як і при табличній верстці, верхній великий блок краще розбити на два маленьких. Перший блок назвемо top-left, а другий - top-right. Перший блок містить логотип, а другий жовтогарячу плашку й слово «новини». Почнемо з верхнього лівого блоку:
<div id=”top-left”>
<img src=”i/logo.gif” border=”0″ alt=”">
</div>
Зверніть увагу, що для картинки я вже не вказую атрибути width й height, тому що немає таблиць. Уже немає необхідності вказувати розміри картинок для того, щоб таблиці швидше оброблялися браузером.
Залишилося написати стилі для блоку. Ми знаємо, що ширина блоку 517 пикселей, а висота дорівнює висоті логотипа, тобто 74 пикселя. Пишемо:
#top-left {width: 517px; height: 74px}
Цей перший блок навіть не треба позиціювати. Дійсно, однаково зсуву ліворуч і зверху дорівнюють нулю. Потім треба зробити чорну лінію, що перетинає весь наш блок. Коли ми верстали таблицями, то робили лінію за допомогою фонового малюнка, висотою 50 пикселей. Він дублювався в осередку таблиці й у такий спосіб створювалася лінія. В CSS їсти можливість розмножувати фоновий малюнок уздовж необхідної осі. Більше того, їсти можливість точно позиціювати тло, тобто зміщати малюнок на необхідну кількість пикселей від верхнього краю блоку. Все це дозволяє нам як фоновий малюнок взяти всього одну чорну крапку розмірів 11 пиксель! Ми зміщаємо тло на 49 пикселей щодо верхнього краю блоку:
#top-left {
background: url(i/bd.gif) repeat-x 0px 49px;
width: 517px; height: 74px}
Із тлом усе в порядку, але логотип треба відбити на 30 пикселей. Раніше ми робили це за допомогою атрибута hspace тегу <img>, але тепер для блоку top-left можна просто задати лівий відступ необхідної ширини:
#top-left {
background: url(i/bd.gif) repeat-x 0px 49px;
width: 517px; height: 74px;
padding-left: 30px}
Але я забув, що відступи впливають на сумарну ширину блоку. Тобто мені зараз треба відняти від значення властивості width рівно 30 пикселей:
#top-left {
background: url(i/bd.gif) repeat-x 0px 49px;
width: 487px; height: 74px;
padding-left: 30px}
У результаті таких стилів перший блок буде виглядати точно так само, як і при верстці таблицями.
Створюємо правий блок:
<div id=”top-right”>
</div>
Ми знаємо, що його ширина 233 пикселя, а висота 32 пикселя. От зараз нам знадобиться й позиціювання. Раз ширина першого блоку 517 пикселей, те другий блок треба зрушити вліво рівно настільки ж.
#top-right {
width: 233px; height: 32px;
position: absolute; left: 517px}
Поки я точно не знаю, яке потрібне вертикальний зсув. Тому я поки відкладаю сам блок і переходжу до його вмісту. Плашку я зроблю на чистому CSS без усяких картинок. Ну, а «новини» прийде вставити картинкою. HTML-код буде наступний:
<div id=”top-right”>
<div class=”rectangle”></div>
<img src=”i/news.gif” border=”0″ alt=”">
</div>
Тепер треба написати стилі на клас rectangle (так я назвав плашку). Ширина плашки рівно 233 пикселя, а загальна висота 19. Але я знаю, що блок повинен мати рамку товщиною 1 пиксель, значить значення властивостей height й width треба вказувати на 2 пикселя менше (щоб компенсувати ширину рамки). Виходить от так:
.rectangle {
width: 231px; height: 17px;
border: 1px solid #000}
Після цього залишається тільки задати жовтогаряче тло:
.rectangle {
background: #F90;
width: 231px; height: 17px;
border: 1px solid #000}
Як бачите, за замовчуванням другий блок позиціюється точно під першим. Ми явно для блоку top-right не задали зсув щодо верхнього краю, а крім чисельних значень властивості top й left можуть приймати значення auto. Щоб краще розібратися, як воно діє на блок, треба небагато поглибитися в теорію.