Трехколоночной гумові макети сайтів

  • Три колонки гумові
  • Центральна гумова, бічні колонки фіксовані
  • Ліва гумова, колонки праворуч фіксовані
  • Три колонки з гумовим контентом попереду

При верстці макетів не забувайте про те, що додавання якимось HTML-елементів рамок (властивість CSS border), зовнішніх полів (властивість CSS margin) або внутрішніх відступів (властивість CSS padding) збільшує їх розмір, і він стає більше зазначених в width ( ширина) і height (висота). Якщо цього не врахувати, то верстка макетів може «поїхати» або станеться накладення деяких елементів HTML один на одного. У подібних ситуаціях необхідно зменшити ширину і висоту елементів до необхідних розмірів.

Три колонки гумові

Приклад HTML і CSS: верстка макета з трьома гумовими колонками

опис макета

  1. Кожному стовпчику цього трехколоночной макета була задана процентна ширина за допомогою CSS width.
  2. До колонкам з меню і сайдбарі було застосовано властивість CSS float для їх спливання з боків сторінки, щоб блок з контентом піднявся на один рівень з ними.
  3. Щоб колонка з контенту не запливала під id "menu" і id "sidebar". у неї були вказані бічні зовнішні поля (CSS margin) рівні ширині цих бічних колонок.
  4. Щоб блок з футером НЕ обтікав колонки, коли якась із них буде вище інших, у id "footer" було створено переривання обтікання (CSS clear: both).

Центральна гумова, бічні колонки фіксовані

Приклад HTML і CSS: верстка макета з центральної гумовою і бічними фіксованими колонками

опис макета

У цьому трехколоночной макеті застосовані ті ж прийоми, що і в попередньому, за винятком того, що процентні значення замінені пікселями.

Ліва гумова, колонки праворуч фіксовані

Приклад HTML і CSS: верстка макета з лівої гумовою і правими фіксованими колонками

опис макета

  1. Меню і сайдбарі було задано спливання вправо (CSS float), щоб колонка контенту могла їх обтечь і піднятися на один з ними рівень.
  2. У колонки з id = "content" було зазначено зовнішнє праве поле (CSS margin-right) рівне сумарній ширині меню і сайдбара, щоб вона не запливала під них.
  3. Щоб футер ні за яких умов не обтікав колонки, йому було задано властивість CSS clear: both для переривання цього обтікання.

Три колонки з гумовим контентом попереду

Приклад HTML і CSS: верстка макета з гумовою колонкою контенту попереду

опис макета

  1. Щоб в цьому трехколоночной макеті контент можна було поставити вище в HTML-коді, його довелося укласти в додатковий блок-обгортку з id = "cont_wrap". Йому було зазначено спливання вліво (CSS float: left), щоб бічні колонки могли піднятися на один рівень з контентом, і стовідсоткова ширина (CSS width: 100%), щоб його розмір не зменшився при спливанні.
  2. Щоб колонка з контенту не поднирівает під бічні колонки, у id = "content" були встановлені бічні зовнішні поля (CSS margin) рівні ширині меню і сайдбара.
  3. Щоб бічні колонки зайняли своє місце, їм було задано ліве негативне поле за допомогою властивості CSS margin-left. де у меню воно дорівнює 100%, а у сайдбара - ширині його самого.
  4. У футера було встановлено переривання обтікання (CSS clear), щоб він завжди знаходився під колонками.
  • Як зробити сайт
    Самому безкоштовно
  • Підручник HTML
    Для початківців
  • Підручник CSS
    Для новаків
  • Довідники
    За HTML і CSS
  • приклади
    HTML і CSS
  • посилання
    Корисні сайти для веб-майстрів
  • інструментарій
    Програми для створення сайтів

Схожі статті