Верстка розтягуються сайтів

1. проблема
2. Пошук рішення
3. ускладнюємо завдання
4. Проблема з розрахунком відсоткових значень
5. висновки
6. недоліки

січня 6, 2010

У цій статті я поділюся способом верстки розтягуються сайтів (а інших, як виявилося, я верстати не вмію), яким користуюся останні 2-3 роки. Цей спосіб застосовується для складних модульних сіток; він легкий в застосуванні, але складний в розумінні і у нього є ряд недоліків. В цілому, представлена ​​тут інформація стане в нагоді і веб-дизайнерам, так як сам макет сайту повинен бути правильно підготовлений.

Почнемо з простого. Припустимо, у нас є ось такий макет розтягується сайт:

На перший погляд все досить просто: типова трёхколоночная сітка (ширина колонки - 25%), одна колонка - меню, дві колонки - контент, і все це розташовується по центру. Типова версткою такого макета може бути наступною: укладаємо обидва блоки в контейнер шириною 75%; меню в цьому випадку буде шириною 33%, контент - 67%. Саму обгортку вирівнюємо по центру за допомогою margin: 0 auto, або просто зміщуємо вліво. Перший спосіб краще, оскільки поводиться адекватно, якщо ми обмежимо мінімальну ширину обгортки. Візуалізація цього рішення:

проблема

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

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

Тут ми приходимо до найголовнішого правилу верстки макетів: контент повинен знаходитися в єдиному потоці. Я не раз помічав, що хлопці починають верстати нові макети, якщо контент раптом стає багатоколонкові або багатоблокових. Починають виділяти нові інформаційні поля в адмінці, які обов'язково повинні бути заповнені, щоб сторінка вийшло такою, якою була задумана. А якщо ці блоки раптом розташовуються в іншому порядку - роблять нові макети і поля в адмінці, перетворюючи сайт в смітник ще до його випуску.

Щоб такого не вийшло, потрібно приділяти максимальну увагу модульної сітці ще на етапі створення першого прототипу. Вважайте, що ви закладаєте фундамент, від якого залежить, переживе чи будівлю землетрус, або провалиться після першого дощу. І обов'язково досягнете того, щоб весь контент розташовувався в одному блоці, а не був розмазаний по всьому макету: під меню, над футером, після шапки і так далі. Досягнете цього - і стилізація контенту стане хвилинною справою: в одному і тому ж макеті збираєте, як з конструктора, різні блоки в різному порядку, дописуєте додаткові стилі і сторінка готова.

Але повернемося до нашої завданню: як же розташувати помаранчевий блок так, щоб його ліва межа збігалася з лівого кордоном меню? Ми вже вирішили, що цей блок повинен бути частиною контенту, а не модульної сітки. Тим більше, що блок контекстний (тобто прив'язаний до якогось певного фрагменту тексту, а не просто бовтається десь зліва).

Ширина контенту - 67%, меню - 33%. Щоб блок встав рівно, його потрібно змістити на 49.25% (33/67 * 100 ≈ 49.25). По-перше, наш результат вийшов приблизними, по-друге, всі браузери (крім Firefox 3) досить своєрідно працюють з дробовими відсотками (та й з відсотками взагалі), а деякі взагалі їх не сприймають. У підсумку виходить, що у нас немає крос-браузерного способу поєднати ці блоки при обраної розмітці.

Пошук рішення

Рішенням цієї проблеми, як ви вже здогадалися, буде вибір іншого способу розмітки модульної сітки, який дозволить нам витворять такі (і не тільки) трюки. Подивимося уважніше на сам макет:

Уважний читач зверне увагу на те, що ширина меню рівно в 2 рази менше ширини контенту (50/25 = 2). Розподіл виходить цілочисельним (немає дробів), а значить ми можемо створити крос-браузерні і - найголовніше - точне рішення проблеми.

Поступимо таким чином. Завернём обидва блоки в контейнер, ширина якого буде не 75%, як раніше, а 50% (тобто дорівнює ширині контенту). Сам контент буде шириною 100%, а меню - 50%, при цьому зміщений вліво на свою ширину.

Приблизний код цього прикладу :

<Style type = "text / css"> #page {position: relative; margin: 0 auto; width: 50%; left: 10%; } #Menu {width: 50%; margin-right: -50%; / * Щоб правильно в IE працювало * / position: relative; left: -50%; float: left; } #Content {width: 100%; float: left; / * Новий контекст форматування * /} </ style> <div id = "page"> <div id = "menu"> </ div> <div id = "content"> </ div> </ div>

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

Цей дуже простий приклад повинен звернути увагу два ключових моменти такого способу верстки: вибір розміру базової колонки і вибір розміру контейнера (точка відліку). Розглянемо ці параметри трохи докладніше.

ускладнюємо завдання

Щоб краще розкрити потенціал цього способу, спробуємо зверстати шестіколоночний макет:

Проблема в тому, що 100 не ділиться на 6 без залишку (100/6 ≈ 16.66666), а дизайнер і раніше хоче вирівнювати тематичні блоки по межах основних колонок.

Одним з рішень цієї проблеми може бути наступне: зробимо розмір контейнера рівним ширині двох колонок. Розмір внутрішнього блоку в цьому випадку буде дорівнює 50%, що відповідає розміру основної колонки. А вказавши цього блоку margin-right: -50% ми приберемо його вплив на потік по горизонталі: це дозволить нам створити скільки завгодно блоків в контейнері, кожен з яких буде впливати на його висоту, але не на ширину.

З такою розміткою ми отримали рівномірний розподіл колонок, яке дозволяє зосередити весь контент в одному блоці і точно позиціонувати виносні блоки всередині нього .

Проблема з розрахунком відсоткових значень

Якщо в попередньому прикладі погратися з розміром вікна браузера, то можна помітити, що у всіх браузерах, крім Firefox 3, з'являються однопіксельні зазори між деякими блоками:

Пов'язано це з тим, як браузери розраховують розміри процентних значень. Якщо вам потрібна висока точність в позиції і розмірах блоків (наприклад, коли вони мають чіткі межі), потрібно розібратися, чому так відбувається і як від цього можна позбутися.

Відсотки - це відносна величина, яка перераховується в абсолютну - пікселі (ну добре, пікселі - це теж відносна величина , Яка залежить, наприклад, від DPI екрану). Тобто коли браузер бачить, наприклад, процентну ширину у блоку, він повинен розрахувати значення в пікселях щодо контейнера цього блоку. Припустимо, ширина контейнера дорівнює 60 пікселям, а внутрішнього блоку - 50%. Ширина в пікселях цього блоку буде дорівнює: 60 × 0.5 = 30px. Значення красиво примножилися / поділилися. Але що буде, якщо ширина контейнера дорівнює 61px? 61 × 0.5 = 30.5px - браузер не може отрисовать половину пікселя, тому він округлює це значення в меншу або більшу сторону.

Насправді алгоритм набагато складніше: наприклад, 4 блоки поспіль шириною 25% в сучасному браузері повинні займати 100% ширини контейнера; якісь блоки будуть менше, якісь більше. Ми ж розглядаємо найпростіший випадок.

Отже, ширина блоку вийшла 30.5px, браузер для себе округлює її до 30px. Що буде, якщо в цей блок ми вкладемо ще один, шириною 200%? За ідеєю його ширина повинна дорівнювати ширині контейнера, тобто 61px. Але так не вийде, тому що абсолютна ширина проміжного блоку дорівнює 30px, відповідно: 30 × 2 = 60px. Отримали розбіжність в 1 піксель. З усіх сучасних браузерів правильне значення дасть тільки Firefox 3: судячи з усього, він десь всередині зберігає справжнє значення ширини, від якого робить все розрахунки.

Але! Зверніть увагу, що абсолютна ширина нашого нового внутрішнього блоку завжди буде парному. Наприклад, якщо ширина проміжного блоку буде розрахована як 31px, то внутрішній блок буде шириною 31 × 2 = 62px. А парні числа, як відомо, діляться на 2 без залишку.

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

висновки

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

1. Визначаємо ширину колонки модульної сітки. Тут, звичайно, багато що залежить від дизайнера: якщо він буде ліпити блоки абияк, то ніякі стандартні способи не підійдуть. Мені дуже пощастило, що в САЛ практично у всіх дизайнерів є голова на плечах. Перед тим, як щось намалювати, вони розбивали макет на кілька шпальт однакової ширини, за якими вирівнювали блоки. Якщо ж макет не вкладався в мою схему, я трохи розсовував блоки, вирівнюючи їх за моїми колонок і показував дизайнеру - він був не проти. Важливо розуміти, що ширина вашої колонки не завжди буде дорівнює ширині дизайнерської колонки. Це можна побачити в самому першому прикладі, де ширина зверстаний колонки дорівнює двом дизайнерським. Зазвичай, коли я отримую макет від дизайнера, я використовую його гайди виключно для того, щоб побачити принципи вирівнювання блоків, після чого я створюю свою розбивку на колонки.
2. Визначаємо ширину основного контейнера. Цей контейнер я називаю точкою відліку (хоч це і не крапка зовсім). Важливо, щоб ширина точки відліку дозволяла створювати ширину колонки, яка ділить 100 без залишку: 100%, 50%, 20%, 10%, 5%. Створивши колонки такого розміру, можна точно позиціонувати і розсовувати виносні блоки всередині контенту.
3. Додаємо ще обгортку для точного округлення відсотків. Це якщо вам необхідно точне вирівнювання по блокам з видимими межами. У прикладі я показав, як створити блок, ширина якого завжди кратна 2. Точно так само можна створювати обгортки, ширина яких кратна, наприклад, 4 (25% / 400%).

Найскладніше в цьому способі - визначити правильний розмір колонки і точки відліку. Щоб наочніше продемонструвати переваги цього способу, покажу кілька прикладів його застосування:

1. Фотогалерея Imperia Private Banking . Блок з галереєю розтягується точно (± 1 піскелей) за розмірами загального контейнера, при цьому сам контентний блок займає половину ширини і розташовується по центру контейнера. Галерей на сторінці може бути скільки завгодно (як і контенту між ними), при цьому вони будуть знаходиться в нормальному потоці документа. На цьому ж сайті можна побачити ще кілька прикладів того, як тематичні виносні блоки вирівнюються по колонках макета.
2. банк AB.LV . Сайт досить великий, містить багато різного контенту і ледь помітних декорацій (однопіксельні тінь навколо основного блоку, наприклад). На сторінці " Про банк »Можна побачити, як четверта колонка в контенті вирівнюється точно за основним меню (це чистої води дрочерство, але дизайнер був задоволений, та й мені було не складно таке зробити).
3. (Прикладів, насправді, багато, але не можу згадати найвиразніші).

недоліки

Куди ж без них. Найголовніший - спосіб зовсім не підходить для макетів, які повинні розтягуватися на всю ширину вікна браузера. Через тих самих заокруглень процентних значень є великий ризик того, що який-небудь блок вийде на 1px за межі вікна, створивши тим самим горизонтальний скрол. Ще комусь може може здатися недоліком те, що розміри блоків змінюються з кроком, більше одного пікселя. Ну і не забуваємо, що дизайнер теж повинен включити мозок перед тим, як щось намалювати. Хоча, звичайно, якщо постаратися, то можна зверстати і зовсім екзотичні варіанти, вибравши розмір колонки по-менше (наприклад, 10%).

PS: не варто ставитися до цього способу як до вирішення всіх бід. Якщо є патерни програмування, придумані для вирішення певного кола завдань, то описаний спосіб - патерн проектування, також спрямований на рішення певного кола завдань.