Колонки однакової висоти
2017-06-04 2:08:55
Колонки, одержувані за допомогою елементів таблиці, мають одну висоту. Це не дивно, оскільки осередки взаємопов'язані і при підвищенні висоти одного осередку, відповідно збільшується висота поруч розташованих осередків. Багато розробники намагаються зробити подібний ефект з допомогою шарів, тобто зробити їх взаємопов'язаними і однієї висоти, незалежно від обсягу вмісту. Насправді, при верстці шарами висота колонок встановлюється автоматично виходячи з обсягу контенту. Тому штучні прийоми по створенню колонок однакової висоти суперечать самій ідеології шарів.
Таким чином, видно чіткий поділ підходів до верстці:
- якщо використовуються шари, то колонки повинні мати висоту, яка визначається їх вмістом;
- колонки однакової висоти будуються за допомогою таблиці.
Ігнорування цих принципів призводить до ускладнення коду і появі помилок у відображенні документа браузерами, як наслідок, підвищується час на розробку сайту і його налагодження. Винятком може слугувати застосування властивості height, яке встановлює висоту шарів. У прикладі 5.32 показано створення подібного макету.
Приклад 5.32. Використання height
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Колонки однакової висоти .layout {overflow: hidden; / * Скасування обтікання * /} .col1, .col2, .col3 {width: 33.33%; / * Ширина колонок * / float: left; / * Створюємо колонки * /} .layout div div {margin: 0 10px; / * Відступ * / padding: 10px; / * Поля * / height: 150px; / * Висота колонок * / background: # 4f703e; / * Колір фону * / color: # f5e8d0; / * Колір тексту * / overflow: auto; } SSI Вставляє вміст інших файлів в код сторінки. Мікроформати Формат і спосіб обміну даними між сайтами. SVG Мова розмітки масштабована векторна графіки для опису в форматі XML.Результат даного прикладу показаний на рис. 5.23.
Мал. 5.23. Колонки однакової висоти
Зрозуміло, що обсяг тексту в колонках може відрізнятися, тому висоту через height зазвичай вказують з запасом. Ще можна додати властивість overflow із значенням auto. Якщо текст перевищить задану висоту, з'явиться смуга прокрутки.
Також існують способи, побудовані на візуальному обмані. Колонки здаються однаковими за рахунок використання кордонів як колонок, додавання фонової картинки або кольору фону. Насправді ж їх висота, як їм і покладено, визначається контентом.
Межі як колонок
Суть методу в наступному - встановлюємо ліворуч або праворуч від елемента кордон, ширина якої збігається з шириною однієї з колонок. Зрозуміло, що межі призначені зовсім для інших цілей, але в даному випадку таке їх використання дозволяє отримати бажаний результат. Для цього створюємо шар з ім'ям layout і для нього встановлюємо стиль, як показано нижче.
.layout {border-left: 200px solid # c7e3e4; / * Ширина кордону і колір лівої колонки * / background: # e0d2c7; / * Колір фону правої колонки * /}Оскільки шар у нас всього один, то колонки, імітовані за допомогою широкої вертикальної лінії і фону, завжди мають одну висоту. Залишається розташувати інформацію точно поверх кордону. Для лівої колонки, назвемо її col1, слід задати ширину і за допомогою стильової властивості float вказати, що це плаваючий елемент. Оскільки межа не є частиною текстового блоку, то потрібно змістити шар col1 вліво за рахунок додавання властивості margin-left з негативним значенням, рівним ширині кордону.
.col1 {width: 200px; / * Ширина лівої колонки * / float: left; / * Перетворюємо в плаваючий елемент * / margin-left: -200px; / * Зрушуємо все вліво на ширину кордону * /}В даному прикладі поєднання властивостей float і margin-left дозволяє розташувати вміст шару прямо поверх кордону. Для правої колонки col2 ніяких додаткових умов вказувати не треба, текст буде розташовуватися як нам потрібно.
Через те, що використовується плаваючий елемент, може вийти, що текст в лівій колонці виходить за межі кольорового прямокутника. Щоб цього не сталося, слід скасувати дію властивості float за рахунок використання clear. В даному випадку використовувати overflow: hidden не можна, буде обрізано простір всередині кордону, включаючи нашу фальшиву колонку. Остаточний код показаний в прикладі 5.33.
Приклад 5.33. дві колонки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <metahttp-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> Дві колонки однієї висоти </ title> <span styletype = "text / css"> .layout {border-left: 200px solid # c7e3e4; / * Ширина кордону і колір лівої колонки * / background: # e0d2c7; / * Колір фону правої колонки * /} .col1 {width: 180px; / * Ширина лівої колонки без полів * / float: left; / * Перетворюємо в плаваючий елемент * / margin-left: -200px; / * Зрушуємо все вліво на ширину кордону * /} .col1, .col2 {padding: 10px; } .Clear {clear: both; / * Скасовуємо обтікання * /} </ style> </ head> <body> <div class = "layout"> <div class = "col1"> Кумкват </ div> <div class = "col2"> Невеликий екзотичний фрукт оранжевого або оранжево-жовтого кольору, з вигляду нагадує невеликий апельсин. </ Div> <div class = "clear"> </ div> </ div> </ body> </ html>Результат прикладу показаний на рис. 5.24.
Мал. 5.24. Дві колонки, створені за допомогою кордону
Для створення трёхколоночного макета кордон слід додати зліва і праворуч від контейнера layout. Для різноманітності ширина правої колонки вказується в em (у відсотках кордон задавати не можна).
.layout {border-left: 200px solid # c7e3e4; / * Ширина кордону і колір лівої колонки * / border-right: 15em solid # ecd5de; / * Ширина кордону і колір правої колонки * / background: # e0d2c7; / * Колір фону середньої колонки * /}Для першої колонки стильової код залишається незмінним, а третій колонці слід вказати властивість float із значенням right і зрушити її вправо за допомогою властивості margin-right (приклад 5.34).
Приклад 5.34. три колонки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <metahttp-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> Три колонки однієї висоти </ title> <span styletype = "text / css"> .layout {border-left: 200px solid # c7e3e4; border-right: 15em solid # ecd5de; background: # e0d2c7; } .Col1 {width: 180px; float: left; margin-left: -200px; } .Col3 {width: 13em; float: right; margin-right: -15em; padding: 1em; } .Col1, .col2 {padding: 10px; } .Clear {clear: both; } </ Style> </ head> <body> <div class = "layout"> <div class = "col1"> Грейпфрут </ div> <div class = "col3"> <img src = "images / grapefruit. jpg "alt =" "/> </ div> <div class =" col2 "> Грейпфрут - плід субтропічного вічнозеленого дерева роду цитрусових. Діаметр в середньому становить 10-15 см, шкірка жовта, м'якоть червоного відтінку. Смак гіркий, чому сприяє тонка плівка навколо кожної часточки. Якщо її прибрати, то гіркоту сильно знизиться. </ Div> <div class = "clear"> </ div> </ div> </ body> </ html>Результат прикладу показаний на рис. 5.25.
Мал. 5.25. Три колонки, створені за допомогою кордону
Браузер IE6 містить помилку з кордонами і некоректно відображає дані приклади. Щоб він правильно виводив макет, для нього слід величину кордонів зменшити вдвічі.
<! - [if IE 6]> <span styletype = "text / css"> .col1 {margin-left: -100px; } .Col3 {margin-right: -7.5em; } </ Style> <! [Endif] ->фонова картинка
Принцип використання фонового зображення для колонок заснований на тому, що ми бачимо, що повторюється по вертикалі картинку, зверху якої розташовується текст та інші елементи. Оскільки нам треба зробити ефект колонок, фон додається не до колонок окремо, а для їх батьків. Тут має значення, який це фон, що він собою являє і які його розміри. Припустимо, що у нас двоколонковому фіксований макет шириною 980 пікселів, ліва колонка займає ширину 200 пікселів. Створюємо зображення розміром 980х60 пікселів. Ширина відповідає ширині макета, а висоти зазвичай береться 20-30 пікселів.
Багато розробники роблять малюнок висотою 1-2 пікселя, вважаючи, що розмір файлу буде мінімальним, і завантаження відбудеться швидше. Однак все йде навпаки. Комп'ютер витрачає в кілька разів більше часу для відображення однієї сторінки з вузьким фоном, що особливо помітно при прокручуванні вікна браузера. Так що при використанні фонового малюнка робіть зображення висотою не менше 20-30 пікселів - так відображення його на сторінці буде відбуватися швидше.
Занадто нудно робити колонки однотонними, раз ми маємо справу з зображеннями, тому додамо якісь обмежувачі з боків колонок (рис. 5.26). Тут найголовніше, щоб малюнок повторювався без стиків по вертикалі.
Мал. 5.26. фоновий малюнок
Тепер вставляємо фон для шару layout, всередині якого розташовані наші колонки (приклад 5.35).
Приклад 5.35. Фон для фіксованого макета
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <metahttp-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> двоколонковому фіксований макет </ title> < span styletype = "text / css"> .layout {width: 980px; / * Ширина макета * / background: url (images / 2col.png) repeat-y; / * Шпалери * / overflow: hidden; / * Скасовуємо обтікання * /} .sidebar {width: 180px; float: left; padding: 10px; } .Content {margin-left: 210px; padding: 10px; } </ Style> </ head> <body> <div class = "layout"> <div class = "sidebar"> <ul> <li> Головна </ li> <li> Все коктейлі </ li> <li > Колекції </ li> <li> Келихи </ li> <li> Компоненти </ li> </ ul> </ div> <div class = "content"> <h1> Яблучний ЕГ-ніг </ h1> < p> Молоко - 40 мл, сік яблучний - 100 мл, сироп цукровий - 30 мм, один яєчний жовток. </ p> <p> Приготувати напій в міксері, подати в келиху хайбол з льодом і соломинкою. </ p> </ div> </ div> </ body> </ html>Результат даного прикладу показаний на рис. 5.27. Добре помітно, що колонки мають однакову висоту.
Мал. 5.27. Колонки однакової висоти, створені фоновою картинкою
При використанні в малюнку будь-яких декоративних елементів, слід подбати, щоб текст від них був відсунутий через padding і не "налипав".
Для трьох і більше колонок у фіксованому макеті процес підготовки зображення подібний, а ось для гумового макета є ряд особливостей через те, що ширина макета може лежати в широкому діапазоні. Тоді фонову картинку необхідно зробити свідомо широкої, наприклад, 2000. пікселів. Фон не впливає на ширину веб-сторінки і якщо не поміщається в відведені йому розміри, то обрізається. Цим якістю і скористаємося. Як приклад розглянемо гумовий макет з фіксованою правої колонкою шириною 300 пікселів. Для нього зробимо зображення шириною 2000х30 пікселів з темно-червоним прямокутником праворуч (рис. 5.28).
Мал. 5.28. Фон для гумового макета
Фіксована колонка розташовується праворуч, тому фон також треба встановити в правий верхній кут, вказавши 100% 0 для властивості background (приклад 5.36).
Приклад 5.36. Фон для гумового макета
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <metahttp-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> двоколонковому гумовий макет </ title> < span styletype = "text / css"> .layout {background: url (images / bg-liquid.png) repeat-y 100% 0; / * Шпалери * / overflow: hidden; / * Скасовуємо обтікання * /} .sidebar {width: 280px; float: right; padding: 10px; color: #fff; } .Content {margin-right: 300px; padding: 10px; } </ Style> </ head> <body> <div class = "layout"> <div class = "sidebar"> Колонка 2 </ div> <div class = "content"> Колонка 1 </ div> </ div> </ body> </ html>Під кінець перелічу плюси і мінуси використання фону в якості штучних колонок.
плюси
- Метод простий і не вимагає зміни існуючого коду.
- В малюнок можна додати різні декоративні елементи на зразок градієнтів, ліній і ін. Це дозволить урізноманітнити дизайн колонок.
мінуси
- Найкращі результати виходять, коли одна з колонок або все мають фіксовані розміри. Для макета, де ширина колонок гумова, фон коректно додати не вийде.
- При відключенні зображень в браузері текст може виявитися нечитабельним. Втім, це легко обійти, задавши поряд з фоновою картинкою колір фону.
- Файл з фоновою картинкою може мати великий обсяг і довго завантажуватися. Відзначимо, що для простого зображення, на кшталт наведеного на рис. 5.27, це не так, при розмірах 2000х30 пікселів файл займає всього 275 байт.
Колір фону
При імітації колонок однакової висоти за допомогою фонової картинки вона додається через властивість background до батьківського елементу колонок (шар layer). Схожим чином працює і колір фону. Його досить встановити для шару layer, а найвищою колонці задати свій власний колір. У прикладі 5.37 приведений трёхколоночний макет, в якому колір фону бічних колонок встановлюється через шар layer, а центральної колонки через шар col2.
Приклад 5.37. Використання фонового кольору для колонок
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <metahttp-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> Трёхколоночний гумовий макет </ title> < span styletype = "text / css"> .layout {background: # b2d235; / * Колір фону крайніх колонок * / overflow: hidden; / * Скасовуємо обтікання * /} .layout div {float: left; } .Col1 {width: 40%; } .Col2 {background: # ffc60b; / * Колір фону середньої колонки * / width: 20%; height: 200px; } .Col3 {width: 40%; } </ Style> </ head> <body> <div class = "layout"> <div class = "col1"> Колонка 1 </ div> <div class = "col2"> Колонка 2 </ div> <div class = "col3"> Колонка 3 </ div> </ div> </ body> </ html>Властивість height в прикладі додано, щоб стало помітно вплив кольору на колонках. В реальності воно не потрібно.
У цього методу є ряд недоліків, які слід враховувати на практиці.
- Складно оцінити попередньо, яка з колонок матиме найбільшу висоту.
- Для "розфарбовування" колонок застосовується всього два кольори, так що не можна задати трьома і більше колонкам різний колір і щоб вони при цьому мали однакову висоту.
Переваги у методу теж є, але їх можна виразити всього парою слів: це простота і витонченість рішення. Тому цей метод можна досить часто зустріти в верстці, зокрема, він застосовується на сайті W3C.
макетколонкі
CSS по темі
background
float
height
margin-left
overflow
Надіслати повідомлення про помилку
Якщо знайшли помилку в тексті виділіть її мишкою і натисніть клавіші Ctrl + ENTER, вкажіть правильний текст без помилок.
