- Три колонки гумові
- Центральна гумова, бічні колонки фіксовані
- Ліва гумова, колонки праворуч фіксовані
- Три колонки з гумовим контентом попереду
При верстці макетів не забувайте про те, що додавання якимось HTML-елементів рамок (властивість CSS border), зовнішніх полів (властивість CSS margin) або внутрішніх відступів (властивість CSS padding) збільшує їх розмір, і він стає більше зазначених в width ( ширина) і height (висота). Якщо цього не врахувати, то верстка макетів може «поїхати» або станеться накладення деяких елементів HTML один на одного. У подібних ситуаціях необхідно зменшити ширину і висоту елементів до необхідних розмірів.
Три колонки гумові
Приклад HTML і CSS: верстка макета з трьома гумовими колонками
опис макета
- Кожному стовпчику цього трехколоночной макета була задана процентна ширина за допомогою CSS width.
- До колонкам з меню і сайдбарі було застосовано властивість CSS float для їх спливання з боків сторінки, щоб блок з контентом піднявся на один рівень з ними.
- Щоб колонка з контенту не запливала під id "menu" і id "sidebar". у неї були вказані бічні зовнішні поля (CSS margin) рівні ширині цих бічних колонок.
- Щоб блок з футером НЕ обтікав колонки, коли якась із них буде вище інших, у id "footer" було створено переривання обтікання (CSS clear: both).
Центральна гумова, бічні колонки фіксовані
Приклад HTML і CSS: верстка макета з центральної гумовою і бічними фіксованими колонками
опис макета
У цьому трехколоночной макеті застосовані ті ж прийоми, що і в попередньому, за винятком того, що процентні значення замінені пікселями.
Ліва гумова, колонки праворуч фіксовані
Приклад HTML і CSS: верстка макета з лівої гумовою і правими фіксованими колонками
опис макета
- Меню і сайдбарі було задано спливання вправо (CSS float), щоб колонка контенту могла їх обтечь і піднятися на один з ними рівень.
- У колонки з id = "content" було зазначено зовнішнє праве поле (CSS margin-right) рівне сумарній ширині меню і сайдбара, щоб вона не запливала під них.
- Щоб футер ні за яких умов не обтікав колонки, йому було задано властивість CSS clear: both для переривання цього обтікання.
Три колонки з гумовим контентом попереду
Приклад HTML і CSS: верстка макета з гумовою колонкою контенту попереду
опис макета
- Щоб в цьому трехколоночной макеті контент можна було поставити вище в HTML-коді, його довелося укласти в додатковий блок-обгортку з id = "cont_wrap". Йому було зазначено спливання вліво (CSS float: left), щоб бічні колонки могли піднятися на один рівень з контентом, і стовідсоткова ширина (CSS width: 100%), щоб його розмір не зменшився при спливанні.
- Щоб колонка з контенту не поднирівает під бічні колонки, у id = "content" були встановлені бічні зовнішні поля (CSS margin) рівні ширині меню і сайдбара.
- Щоб бічні колонки зайняли своє місце, їм було задано ліве негативне поле за допомогою властивості CSS margin-left. де у меню воно дорівнює 100%, а у сайдбара - ширині його самого.
- У футера було встановлено переривання обтікання (CSS clear), щоб він завжди знаходився під колонками.
- Як зробити сайт
Самому безкоштовно - Підручник HTML
Для початківців - Підручник CSS
Для новаків - Довідники
За HTML і CSS - приклади
HTML і CSS - посилання
Корисні сайти для веб-майстрів - інструментарій
Програми для створення сайтів