Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Тут ми почали розглядати поетапне створення двоколонковому макета на основі блоків. Мені здається, що починати вивчати верстку сайту. яка ґрунтується на використанні каскадних стилів (CSS), найкраще саме на конкретному прикладі, а не з нудного розгляду теорії.
Ні, звичайно ж, база знань по стильовому оформленню теж потрібна, але ці знання будуть краще засвоюватися і розумітися після того, як ви на простому прикладі побачите, як можна прив'язати до HTML коду CSS властивості і як за допомогою них можна керувати зовнішнім виглядом елементів сайту .
Давайте повернемося до нашого макету. У самій першій статті ми навіть не почали розглядати суть, тому що багато часу пішло на обговорення базових питань верстки. Це було необхідно зробити особливо для тих читачів, які тільки починають занурюватися в вебмастерінг.
Тому, якщо для вас ще не все встало на свої місця в питаннях верстки, то пробіжіть по діагоналі першу статтю з цієї серії. У другій ми вже безпосередньо приступили до верстання, хоча на початку я знову ж зробив відступ на тему, що таке коренева папка і як її відшукати на своєму хостингу (див. З поступовим зниженням трохи ВШЕ посиланням).
Отже, ми прописали в нашому ще порожньому файлі Index.html базові елементи (body, мета теги і т.п.), а так же код всіх потрібних нам блоків, які будуть формувати макет сайту.
Потім ми прописали в наш ще порожній файл таблиць каскадних стилів Style.css перші CSS властивості, в тому числі ми задали фіксовану ширину нашому макету і вирівняли його по центру щодо країв екрану.
Ми так само врахували можливість використання старих версій браузерів, наприклад, в Internet Explorer 5. Потім ми розфарбували для наочності в різні кольори все v блоки, з яких складається наш двоколонковому макет, а так само обмежили ширину лівої колонки (в ній зазвичай розташовується меню) .
Ну, і в кінці попередньої статті ми поставили в файлі CSS обтікання блоку лівої колонки іншими контейнерами, розташованими нижче в HTML коді файлу Index.html (в нашому випадку це «Вміст сторінок (контент)» і «Підвал (футер)»).
Після всіх цих дій ми отримали:
При цьому файл Index.html містив:
А в файл Style.css було прописано:
Давайте порівняємо отриманий результат з тим, що повинно було статися:
деякі доопрацювання
Начебто макети схожі, але є одна неув'язочка. Блок Footer (підвал) не повинен обтікати ліву колонку праворуч, він повинен розташовуватися в самому низу макета і займати всю його ширину. Це одна проблема.
Але крім цього існує і інша проблема. Якщо ми додамо тексту в Div Content (вміст статті):
То може виникнути така ситуація з макетом:
Тобто вміст контейнера Content займає весь вільний простір під закінчилися Left. Це відбувається через те, що включено обтікання Div Left усіма іншими блоками, розташованими нижче його в HTML коді, але після того, як Left закінчується, всі наступні контейнери починають вже притискатися до лівого краю.
Нас така ситуація з Content не влаштовує, тому в уникненні цього ми поставимо для цього контейнера фіксований відступ зліва (від краю макету) рівний ширині блоку Left (лівої колонки).
Оскільки ширину лівої колонки (Left) ми раніше поставили в 200px, то і відступ зліва для Content ми поставимо таким же, навіть можна зробити його на кілька пікселів більше, щоб між блоками з'явилося невелику відстань.
Весь код файлу Style.css тепер буде виглядати так:
А наш макет на Div верстці набуде вигляду:
Тепер давайте змоделюємо ситуацію з суттєвим збільшенням висоти блоку Left (лівої колонки):
З малюнка видно, що при збільшенні висоти лівої колонки, підвал (Footer) починає її обтікати, тому що в Style.css для блоку Left задано обтікання за допомогою властивості float: left.
Тому все Div контейнери, розташовані в HTML коді нижче Left, починають його обтікати і наш Footer не є винятком. А це нас зовсім не влаштовує, бо він повинен завжди розташовуватися нижче всіх інших блоків нашого двоколонковому макета. Треба це виправити.
Це властивість дозволить розташувати Footer нижче всіх плаваючих блоків, тобто тих, яким задана властивість Float (обтікання праворуч або ліворуч). Тим самим ми опустимо підвал в самий низ нашого макета.
Style.css тепер буде виглядати так:
А сам двоколонковому макет на блокової верстці отримає футер (підвал), який відповідає всім вимогам:
Якщо потрібно буде розташувати Left (колонку з меню) ні з лівого боку макета, а з правої, то зробити це можна, внісши лише кілька змін в Style.css. Для Left там потрібно замінити властивість float: left; на float: right ;. а для блоку Content - прибрати відступ зліва на ширину контейнера Left і додати такий самий відступ справа.
Тобто для Content потрібно CSS властивість margin-left: 202px; замінити на margin-right: 202px ;. В результаті Style.css набуде вигляду:
А наш макет з колонкою меню, розташованої праворуч, буде виглядати так:
Створюємо трехколоночной макет на основі 2-х колоночного
Повернемо все до виду, коли блок Left розташований з лівого боку. Для створення трехколоночной макета на основі вже створеного двоколонковому, нам потрібно лише додати один додатковий Div-контейнер в файл Index.html після коду, що описує Left.
Назвемо його нехитро - Right. C урахуванням цього нового Div, код набуде вигляду:
В вміст контейнера Right я додав невелику кількість тексту, щоб цей блок мав порівнянний з Left і Content розмір по висоті. Тепер потрібно написати окрему правило в файлі каскадних таблиць стилів Style.css для чіткого позиціонування Right, щодо інших контейнерів нашого трехколоночной макета сайту:
Ну, а властивість float: right дозволяє притиснути Right до правого боку і при цьому всі наступні за ним в коді Div будуть обтікати його зліва (обтікати його буде тільки Content, тому що Footer у нас налаштований так, що він лежить нижче всіх плаваючий блоків).
Але цього ще не досить. На початку статті ми вирішували проблему залізання вмісту Div Content під закінчився блок Left. Для того, щоб відразу ж уникнути подібної проблеми і з Right, ми поставимо в CSS для Content не тільки відступ зліва на ширину Left, але і відступ справа на ширину Right:
Остаточний варіант нашого Style.css для трехколоночной макета буде такою:
А сам макет сайту, зверстаний на Div, буде виглядати так:
Перетворимо фіксований макет в гумовий
Двоколонковому і трехколоночной макети, які ми навчилися створювати в цій серії статей, відносяться до так званим фіксованим, тому що їх ширина не залежить від дозволу екрану користувача, що переглядає сайт. Але існує й інший тип, який називається гумовим. В цьому випадку макет сайту на блокової верстці буде займати всю ширину екрану користувача.
Якщо дозвіл екрана у нього буде по ширині 800 пікселів, то і макет гумового сайту буде дорівнює по ширині 800 пікселів, а якщо дозвіл буде 1920 пікселів, то і шаблон розтягнеться на всю ширину такого екрану.
У деяких випадках використання гумового варіанту може бути виправдане і тому варто зупинитися на тому, як зі звичайного макета фіксованої ширини зробити гумовий. Хоча, в принципі, тут все дуже просто.
Потрібно лише для Div контейнера, в якому укладено весь макет (в нашому випадку це MAKET), задати в файлі каскадних таблиць стилів не фіксували розмір за допомогою властивості width: 800px ;. а відносний розмір по ширині, за допомогою властивості width: 100%; :
Гумовий варіант буде виглядати приблизно так:
Рішення проблем для старих браузерів
На перший погляд все начебто добре, але якщо спробувати зменшувати вікно браузера, то в певний момент станеться наїзд одних блоків на інші, що призведе до повного розвалу дизайну (кажуть ще - поїхала верстка).
Але цю неприємність теж досить легко можна нейтралізувати. Достатньо лише поставити для контейнера, в якому знаходиться гумовий макет (в нашому випадку це Maket), за допомогою спеціального CSS властивості мінімально можливу ширину, до якої можна зменшувати його розмір.
Після досягнення цієї мінімальної ширини макет як би перестане бути гумовим і не буде змінюватися по ширині при подальшому зменшенні вікна браузера.
Це властивість виглядає так:
Цифра 600 пікселів в даному випадку задає мінімальну ширину гумового шаблону, після якої його розмір перестане змінюватися. При зменшенні вікна браузера нижче цієї мінімальної ширини, частина його просто перестане бути видною:
Тепер ваш завдання зводитися до того, щоб при ширині в 600 пікселів ваш сайт не перекосило, ну а при великих дозволах цього вже точно не відбудеться. Але знову ж таки є одне «але», і знову це «але» пов'язане з усіма нами улюбленим браузером Internet Explorer 6.
Ще досить багато користувачів використовують цього троглодита, який, незважаючи на вжиті нами заходи, все одно не буде помічати обмеження мінімальної ширини гумового макета і вперто ламати дизайн.
Для того, щоб побороти цей косяк гумового шаблону в Internet Explorer 6, існує цілий ряд так званих хаков, які дозволяють обійти це обмеження.
Я приведу тут один з найстабільніших хаков, який не викликає підвисання браузерів і інших неприємностей. Він полягає в тому, що CSS властивість width: 100% для блоку Maket ми замінимо спеціальним кодом:
У чотирьох місцях цього коду прописана цифра 600, яка і задає мінімальну ширину гумового макета. Ви можете замінити цю цифру на ту, яку вважаєте оптимальною. Остаточний вигляд Style.css буде такою:
Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru