Здрастуйте, шановні читачі блогу . Тут ми почали розглядати поетапне створення двухколоночного макета на основі блоків. Мені здається, що починати вивчати верстку сайту, яка грунтується на використанні каскадних стилів (CSS), краще всього саме на конкретному прикладі, а не з нудного розгляду теорії.
Ні, звичайно ж, база знань по стильовому оформленню теж потрібна, але ці знання будуть краще засвоюватися й розумітися після того, як ви на найпростішому прикладі побачите, як можна прив’язати до HTML коду CSS властивості і як за допомогою них можна керувати зовнішнім виглядом елементів сайту.
Верстание двухколоночного макета для сайту
Давайте повернемося до нашого макету. У першій статті ми навіть не почали розглядати суть, т. к. багато часу пішло на обговорення базових питань верстки. Це було необхідно зробити особливо для тих читачів, які тільки починають занурюватися в вебмастеринг.
З власного досвіду знаю, що найважче знайти відповіді на прості та очевидні для більшості питання, але поки ще не зрозумілі для вас. На форумах вас ігнорують, а в статтях опускаються ці моменти, як само собою зрозуміле.
Тому, якщо для вас ще не все встало на свої місця в питаннях верстки, то пробіжіть по діагоналі першу статтю з цієї серії. У другій ми вже безпосередньо приступили до верстанию, хоча на початку я знову ж таки зробив відступ на тему, що таке коренева папка і як її відшукати на своєму хостингу (див. по наведеній трохи транспорт посиланням).
Отже, ми прописали в нашому ще порожньому файлі Index.html базові елементи (body, мета теги тощо), а так само код всіх потрібних нам блоків, які будуть формувати макет сайту.
Потім ми прописали в наш ще порожній файл каскадних таблиць стилів Style.css перші CSS властивості, в тому числі ми поставили фіксовану ширину нашому макету і вирівняли його по центру щодо країв екрану.
Ми врахували можливість використання старих версій браузерів, наприклад, в Internet Explorer 5. Потім ми розфарбували для наочності в різні кольори все v блоки, з яких складається наш двухколоночный макет, а так само обмежили ширину лівої колонки (в ній зазвичай розташовується меню).
Ну, і в кінці попередньої статті ми поставили у файлі CSS обтікання блоку лівої колонки іншими контейнерами, розташованими нижче в HTML коді файлу Index.html (в нашому випадку це «Вміст сторінок (контент)» і «Підвал (футер)»).
Після всіх цих дій ми отримали:
При цьому файл Index.html містив:
Заголовок
Шапка
Ліва колонка
Вміст сторінки
Підвал
А в файл Style.css було прописано:
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
}
#footer{
background-color:#FFC0FF;
}
Давайте порівняємо отриманий результат з тим, що повинно було вийти:
Деякі доопрацювання
Начебто макети схожі, але є одна неув’язочка. Блок Footer (підвал) не має обтікати ліву колонку праворуч, він повинен розташовуватися в самому низу макета і займати всю його ширину. Це одна проблема.
Але крім цього існує і інша проблема. Якщо ми додамо текст у Div вміст статті):
Заголовок
Шапка
Ліва колонка
Вміст сторінки Вміст сторінки Вміст сторінки Вміст сторінки
Підвал
То може виникнути така ситуація з макетом:
Тобто вміст контейнера Content займає все вільне місце під закінчилися Left. Це відбувається з-за того, що включено обтікання Div Left усіма іншими блоками, розташованими нижче в HTML коді, але після того, як Left закінчується, всі наступні контейнери починають вже притискатися до лівого краю.
Нас така ситуація з Content не влаштовує, тому для уникнення цього ми задамо для цього контейнера фіксований відступ зліва (від краю макета) рівний ширині блоку Left (лівої колонки).
Таким чином ми зможемо досягти бажаного взаємного розташування блоків Left Content не залежно від співвідношення висот цих контейнерів. Для цього нам треба буде дописати для Content (у нашому файлі Style.css) ще одне властивість CSS, задає відступ (margin-left — тут про відступи і рамки в CSS читайте докладніше):
#content{
background-color:#8080FF;
margin-left:202px;
}
Т. к. ширину лівої колонки (Left) ми раніше поставили в 200px, то і відступ зліва Content ми задамо такою ж, навіть можна зробити його на кілька пікселів більше, щоб між блоками з’явилося невелику відстань.
Весь код файлу Style.css тепер буде виглядати так:
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
}
А наш макет на Div верстці прийме вигляд:
Тепер давайте змоделюємо ситуацію з суттєвим збільшенням висоти блоку Left (лівої колонки):
З малюнка видно, що при збільшенні висоти лівої колонки, підвал (Footer) починає її обтікати, т. к. в Style.css для блоку Left задано обтікання з допомогою властивості float:left.
В наслідок цього всі Div контейнери, розташовані в HTML коді нижче Left, починають його обтікати і наш Footer не є винятком. А це нас зовсім не влаштовує, бо він повинний завжди розташовуватися нижче усіх інших блоків нашого двухколоночного макета. Треба це виправити.
Для цього ми скасуємо обтікання блоком Footer контейнера Left. Як це зробити? Потрібно дописати спеціальне властивість для Footer у Style.css: clear:both (тут читайте про обтікання в CSS).
Це властивість дозволить розташувати Footer нижче всіх плаваючих блоків, тобто тих, яким встановлено властивість Float (обтікання праворуч або ліворуч). Тим самим ми опустимо підвал в самий низ нашого макета.
Style.css тепер буде виглядати так:
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#content{
background-color:#8080FF;
margin-left:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
А сам двухколоночный макет на блокової верстки отримає футер (підвал), який відповідає всім вимогам:
Якщо потрібно буде розташувати Left (колонку з меню) не з лівого боку макета, а з правого, то зробити це можна, внісши лише кілька змін у Style.css. Для Left там потрібно замінити властивість float:left; на float:right;, а для блоку Content — прибрати відступ зліва на ширину контейнера Left і додати точно такий же відступ праворуч.
Тобто для Content потрібно CSS властивість margin-left:202px; замінити на margin-right:202px;. В результаті Style.css прийме вигляд:
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:right;
}
#content{
background-color:#8080FF;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
А наш макет з колонкою меню, праворуч буде виглядати так:
Створюємо трехколоночный макет на основі 2-х колоночного
Повернемо все на увазі, коли блок Left розташований з лівого боку. Для створення трехколоночного макета на основі вже створеного двухколоночного, нам потрібно лише додати один додатковий Div контейнер в файл Index.html після коду, що описує Left.
Назвемо його нехитро — Right. З урахуванням цього нового Div, код прийме вигляд:
Основи блокової верстки (Div верстки)
Шапка
Ліва колонка Меню Меню
Права колонка Меню Меню
Вміст сторінки Вміст сторінки Вміст сторінки Вміст сторінки
Підвал
Вміст контейнера Right я додав невелику кількість тексту, щоб цей блок мав порівнянний з Left Content розмір по висоті. Тепер потрібно написати окреме правило в файл каскадних таблиць стилів Style.css для чіткого позиціонування Right, щодо інших контейнерів нашого трехколоночного макету сайту:
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
Властивість width:200px (тут читайте про завдання ширини і висоти в CSS) ми задає ширину блоку Right рівної 200 пікселів, а властивість background-color:#FFFF00 (читайте про завдання фону в CSS, а тут про коди кольори в Html ) подцвечиваем фон контейнера Right для більшої наочності.
Ну, а властивість float:right дозволяє притиснути Right до правій стороні і при цьому всі наступні за ним в коді Div будуть обтікати його зліва (обтікати його буде тільки Content, т. к. Footer у нас налаштований так, що він лежить нижче всіх плаваючий блоків).
Але цього ще не достатньо. На початку статті ми вирішували проблему залізання вмісту Div Content під закінчився блок Left. Для того, щоб уникнути подібної проблеми і з Right, ми задамо в CSS для Content не тільки відступ зліва на ширину Left, але й відступ праворуч на ширину Right:
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
Остаточний варіант нашого Style.css для трехколоночного макета буде такою:
body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
А сам макет сайту, зверстаний на Div, виглядатиме так:
Перетворимо фіксований макет в гумовий
Двухколоночный і трехколоночный макети, які ми навчилися створювати в цій серії статей, відносяться до так званих фіксованим, т. к. їх ширина не залежить від дозволу екрану користувача, переглядає сайт. Але існує і інший тип, який називається гумовим. У цьому випадку макет сайту на блокової верстки буде займати всю ширину екрану користувача.
Якщо дозвіл екрану у нього буде по ширині 800 пікселів, то і макет гумового сайту буде дорівнює по ширині 800 пікселів, а якщо дозвіл буде 1920 пікселів, то і шаблон розтягнеться на всю ширину такого екрану.
В деяких випадках використання гумового варіанту може бути виправдане і тому варто зупинитися на тому, як зі звичайного макета фіксованої ширини зробити гумовий. Хоча, в принципі, тут все дуже просто.
Потрібно лише для Div контейнера, в якому укладено весь макет (в нашому випадку це MAKET), поставити в файл каскадних таблиць стилів не фіксований розмір властивості width:800px;, а відносний розмір по ширині, з допомогою властивості width:100%;:
#maket {
width:100%;
margin:0 auto;
}
Гумовий варіант буде виглядати приблизно так:
Рішення проблем для старих браузерів
На перший погляд все начебто добре, але якщо спробувати зменшувати вікно браузера, то в певний момент відбудеться наїзд одних блоків на інші, що призведе до повного розвалу дизайну (говорять ще — поїхала верстка).
Але цю неприємність теж досить легко можна нейтралізувати. Достатньо лише задати для контейнера, в якому знаходиться гумовий макет (в нашому випадку це Maket), з допомогою спеціального CSS властивості мінімально можливу ширину, до якої можна зменшувати його розмір.
Після досягнення цієї мінімальної ширини макет як би перестане бути гумовим і не буде змінюватися по ширині при подальшому зменшенні вікна браузера.
Це властивість виглядає так:
min-width:600px;
Цифра 600 пікселів в даному випадку задає мінімальну ширину гумового шаблону, після якої його розмір перестане змінюватися. При зменшенні вікна браузера нижче цієї мінімальної ширини, частина його просто перестане бути видною:
Тепер ваше завдання зводитися до того, щоб при ширині 600 пікселів ваш сайт не перекосило, ну а при великих дозволах цього точно не станеться. Але знову ж таки є одне «але», і знову це «але» пов’язане з усіма нами улюбленим браузером Internet Explorer 6.
Ще досить багато користувачів використовують цього троглодита, який, незважаючи на вжиті нами заходи, все одно не буде помічати обмеження мінімальної ширини гумового макета і вперто ламати дизайн.
Для того, щоб побороти цей косяк гумового шаблону в Internet Explorer 6, існує цілий ряд так званих хаків, які дозволяють обійти це обмеження.
Я наведу тут один з самих стабільних хаків, який не викликає підвисання браузерів і інших неприємностей. Він полягає в тому, що CSS властивість width:100% для блоку Maket ми замінимо спеціальним кодом:
width:expression(
(document.compatMode && document.compatMode == ‘CSS1Compat’)
?
(
document.documentElement.clientWidth < 600
?
«600px»
:
«auto»
)
:
(
document.body.clientWidth < 600
?
«600px»
:
«auto»
)
);
У чотирьох місцях цього коду прописана цифра 600, яка і задає мінімальну ширину гумового макета. Ви можете замінити цю цифру на ту, яку вважаєте оптимальною. Остаточний вигляд Style.css буде такою:
body, html {
margin:0px;
padding:0px;
}
#maket {
min-width:600px;
width:expression(
(document.compatMode && document.compatMode == ‘CSS1Compat’)
?
(
document.documentElement.clientWidth < 600
?
«600px»
:
«auto»
)
:
(
document.body.clientWidth < 600
?
«600px»
:
«auto»
)
);
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}
Читайте закінчення епопеї в наступній статті. Можете також подивитися відео «Верстка гумового сайту div-ах»:
«alt=»»>
«alt=»»>
«alt=»»>
Удачі вам! До зустрічей на сторінках блогу
