» ПРАВИЛО

создание сайтов Самара

При створенні плаваючих блоків є тільки одне важливе правило:

ПРАВИЛО

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

Раз вуж плаваюча модель виявилася простий зрозумілої, давайте спробуємо застосувати її до нашого багатостраждального приклада. Як і раніше, будемо користуватися правильною блоковою моделлю, тобто код адаптований для браузерів Mozilla й Opera. Пізніше я покаджу, як внести в код кросс-браузерность. За основу будемо брати код, що був написаний при спробі зверстати макет на основі абсолютного позиціювання.

Як звичайно, почнемо із шапки. Сам HTML-код зовсім не зміниться: всі ті ж блоки з логотипом і т.п. Але зате поміняється CSS-код. Для двох верхніх блоків він стане от таким:

#top-left {

width: 487px;

background: url(i/bd.gif) repeat-x 0px 49px;

padding-left: 30px;

float: left}

#top-right {

width: 233px;

padding-top: 49px;

float: left}

У блоці top-left з’явилося тільки одне оголошення, що робить блок плаваючої, і зникло оголошення висоти блоку. Виявляється, що висота блоку в даному випадковий ні на що не впливає. У блоці top-right я забрав всі властивості абсолютного позиціювання й теж включив для блоку плаваючу модель. Але раніше ми задавали зсув від верхнього краю, а в плаваючої моделі такої властивості немає. Значить зсув треба реалізувати іншим способом. Звичайний зсув можна зробити за допомогою відступу, у цьому випадку верхнього padding-top.

Після таких змін два верхніх блоки будуть у браузері виглядати зовсім так само, як при абсолютному позиціюванні, тобто правильно. Далі між верхніми блоками й центральними блоками є простір. Для того, щоб бути впевненим у тім, що центральні блоки почнуться після верхніх блоків, не перешкодить створити блок із властивістю clear. Заодно він буде відбивати блоки:

.space {clear: left; height: 20px}

В HTML-коді блок із класом space буде перебуває між верхніми й центральними блоками:

. . .

<div id=”top-right”>

<div class=”rectangle”></div>

<img src=”i/news.gif” width=”59″ height=”9″ border=”0″ alt=”">

</div>

<div class=”space”></div>

<div id=”main-left”>

. . .

Давайте швидко розберемося із центральними блоками. HTML-код для них теж не зміниться, а стилі стануть от такими:

#main-left {

width: 125px;

float: left}

#main {

width: 364px;

padding: 0px 14px;

float: left}

#main-right {

font: 10px Verdana;

width: 233px;

float: left}

Властивості абсолютного позиціювання замінені на властивості плаваючої моделі. Крім того, знову виникає необхідність зробити відступи між центральним блоком і двома крайніми. Найпростіше задати лівий і правий відступи тільки для центрального блоку, що й зроблено оголошенням padding: 0px 14px.

Як бачите, у цілому можна помітити, що CSS-код для плаваючої моделі компактніше, ніж для абсолютного позиціювання.

Зараз саме настав момент, коли можна відмінно помітити, для чого необхідна властивість clear. Давайте не будемо вставляти блок з такою властивістю між центральними блоками й нижнім блоком. Блок bottom-left зробимо плаваючої:

#bottom-left {width: 233px; float: left}

Блок bottom-left позиціюється зовсім правильно. Він зміщається максимально нагору й прилипає до іншого плаваючого блоку main. Так і повинен поводитися будь-який пристойний плаваючий блок. Але нам такого не треба, нам треба розташувати нижній блок під всіма іншими. Тому в HTML-коді після всіх центральних блоків ми вставляємо блок із класом space.

Залишилося тільки зробити блок з копирайтом:

#bottom-right {

background: url(i/bd.gif) repeat-x;

font: 10px Verdana;

width: 237px;

padding-left: 280px;

float: left}

Використаємо чорну крапку для створення фонової чорної лінії, потім задаємо шрифт для копирайта, установлюємо ширину й великий лівий відступ, щоб правильно позиціювати текст усередині блоку. У підсумку в браузері Mozilla макет виглядає відмінно. Ура, можна наливати шампанське!

Давайте, щоправда, шампанським небагато почекаємо, тому що спереду в нас адаптація коду для браузера Internet Explorer. Нам треба виправляти блокову модель, а точніше, задавати для даного браузера інші значення властивостей width там, де використаються відступи. Таких блоків у нас усього три: top-left, main й bottom-right. Ще раз сформулюю завдання: для браузера Internet Explorer необхідно встановити ширину з урахуванням відступів, а для всіх інших браузерів залишити поточні значення ширини. Тобто нам придасться рішення, що дозволяє розділити код для двох таких типів браузерів. Рішення, на щастя, є. Якщо укласти значення властивості в лапки, то його не будуть сприймати браузери Mozilla й Opera. Наприклад, якщо ми напишемо:

A {border: “1px solid #000″}

Те рамки навколо посилань зробить тільки браузер Internet Explorer. У нашому випадку щось подібне треба створити із шириною. Давайте подумаємо. Почнемо думати на прикладі блоку main:

#main {

width: 364px;

padding: 0px 14px;

float: left}

Спочатку порахуємо, яку ширину треба задати для браузера Internet Explorer. Раз ширина змісту 364 пикселя, а ширина відступів (лівого й правого) 28 пикселей, те ширина повинні бути 264+28=392 пикселя. Відмінно, робимо наступне. Для браузера Mozilla залишаємо першим поточне оголошення ширини. А відразу слідом за ним вставляємо оголошення ширини для браузера Internet Explorer, але укладене в лапки!

#main {

width: 364px; width: “392px”;

padding: 0px 14px;

float: left}

У підсумку виходить, що браузер Mozilla прочитає перше значення, але проігнорує друге. А браузер Internet Explorer прочитає й перше, і друге значення, але значення, зазначене в коді пізніше, переписує перше значення! От таким простим, з одного боку, але досить елегантним способом вирішується проблема блокової моделі. Звичайно, способів безліч, але це найбільш ефективний. Зовсім аналогічним образом додаємо оголошення для інших двох блоків:

#top-left {

background: url(i/bd.gif) repeat-x 0px 49px;

width: 487px; width: “517px”;

padding-left: 30px;

float: left}

#bottom-right {

background: url(i/bd.gif) repeat-x;

font: 10px Verdana;

width: 237px; width: “517px”;

padding-left: 280px;

float: left}

Всі, після цього вид макета у всіх браузерах правильний, і вуж точно можна відкривати шампанське (у вас у холодильнику обов’язково повинна лежати бутылочка для подібних моментів).

Напевно, багато хто з вас із подивом виявлять, що вага документа змінилася незначно. Дійсно, досить часто заявляється, що застосування стилів значно скорочує розмір коду. Однак у нашому випадку правило не спрацювало. Почасти це пов’язане з тим, що макет досить простий, але все-таки звичайно економія не буває дуже великий.

За рахунок чого ж плаваюча модель виграє в порівнянні з табличною версткою? Сама головна перевага - зменшення складності й підвищення логічності. Значно скоротилося використання картинок і дуже сильно спростився чистий HTML-код. Так, додалися стилі, які самі по собі не є простими, але відбувся якісний поділ структури й подання документа. Тепер HTML-код описує структуру, а CSS-код - подання. Відразу скажу, що поділ не стовідсоткове, але дуже навіть значне.

O HTML