Простые примеры шаблонов HTML+CSS

На этой странице показано, как с помощью CSS можно получить несколько разных раскладок веб-страницы, используя только один простейший HTML-код. Эти примеры далеки от шедевров сайта Zen Garden. Однако, они позволят понять базовые принципы, каким образом можно сделать разные шаблоны при условиях:

  • 5 блоков (5 DIV) для контента
  • несложная таблица стилей
  • отсутствие хаков

(x)HTML-разметка

<div id="header">header</div>
<div id="menu">menu</div>
<div id="content">content</div>
<div id="sub-section">sub-section</div>
<div id="footer">footer</div>

Для наглядности блокам установлены разные цвета фона, и в базовом варианте выглядеть страница с этим кодом будет так:

content

sub-section

Разумеется, все варианты проходят валидацию XHTML Strict. А вот с валидностью CSS несколько сложнее, но если она принципиальна, то без условных комментариев для Internet Explorer уже не обойтись.

Во всех вариантах есть ссылка "пример" в блоке menu, которая открывается в новом окне. Нажав на нее, вы увидите выбранный шаблон в действии.

Вариант 1

header
content

CSS

* {margin:0; padding:0}
html {background:#fff}
body {background:url(background_1.gif) repeat-y 100% 0; min-width:640px}
#header {background:#fcc; height:50px; width:40%}
#menu {background:#ffc; height:130px; width:59.2%}
#content {background:#9cf; clear:left}
#sub-section {background:#cfc}
#footer {background:#ccf}
#header, #menu, #content, #sub-section, #footer {overflow:hidden; display:inline-block}
#content, #sub-section, #footer {width:100%}
#header, #menu {float:left}

sub-section
footer


Вариант 2

header
content

CSS

* {margin:0; padding:0}
html {background:#fff}
body {background:url(background_2.gif) repeat-y 80% 0; min-width:640px}
#header {background:#fcc; height:50px; width:49%}
#menu {background:#ffc; height:50px; width:50.9%}
#content {background:#9cf; width:79.9%}
#sub-section {background:#cfc; width:20%; float:right}
#footer {background:#ccf; width:100%; clear:both}
#header, #menu, #content, #sub-section, #footer {overflow:hidden; display:inline-block}
#header, #menu, #content {float:left}

sub-section
footer


Вариант 3

header
content

CSS

* {margin:0; padding:0}
html {background:#fff}
body {background:url(background_3.gif) repeat-y 20% 0; min-width:640px}
#header {background:#fcc; height:50px; width:49%}
#menu {background:#ffc; height:50px; width:50.9%}
#content {background:#9cf; float:right; width:80%}
#sub-section {background:#cfc; width:20%}
#footer {background:#ccf; width:100%; clear:both}
#header, #menu, #content, #sub-section, #footer {overflow:hidden; display:inline-block}
#header, #menu, #sub-section {float:left}

sub-section
footer


Вариант 4

header
content

CSS

* {margin:0; padding:0}
html {background:url(background_4.gif) repeat-y 20% 0 #fff}
body {background:url(background_44.gif) repeat-y 80% 0; min-width:640px}
#header {background:#fcc}
#menu {background:#ffc; width:20%}
#content {background:#9cf; width:60%}
#sub-section {background:#cfc; width:19.9%}
#footer {background:#ccf; clear:left}
#header, #menu, #content, #sub-section, #footer {overflow:hidden; display:inline-block}
#header, #footer {width:100%}
#menu, #content, #sub-section {float:left}

sub-section
footer


Вариант 5

header
content

CSS

* {margin:0; padding:0}
html {background:url(background_5.gif) repeat-y 20% 0 #fff}
body {background:url(background_55.gif) repeat-y 80% 0; min-width:640px}
#header {background:#fcc; width:100%}
#menu {background:#ffc; width:20%}
#content {background:#9cf; width:59.9%}
#sub-section {background:#cfc; width:20%}
#footer {background:#ccf; width:20%; clear:right}
#header, #menu, #content, #sub-section, #footer {overflow:hidden; display:inline-block}
#menu, #content {float:left}
#sub-section, #footer {float:right}

sub-section
footer


Вариант 6

header
content

CSS

* {margin:0; padding:0}
html {background:#fff}
body {background:#9cf url(background_6.gif) repeat-y 80% 0; min-width:640px}
#header {background:#fcc}
#menu {background:#ffc; margin-top:-3px}
#content {background:#9cf; width:80%}
#sub-section {background:#cfc; width:19.9%}
#footer {background:#ccf; clear:left}
#header, #menu, #content, #sub-section, #footer {overflow:hidden; display:inline-block}
#header, #menu, #footer {width:100%}
#content, #sub-section {float:left}

sub-section
footer


Больше подробностей на английском языке и примеров можно найти в статье "One clean HTML markup, many layouts...".



Много комментариев (17) к “Простые примеры шаблонов HTML+CSS”

  1. Eugene Efremov :

    Не нашел гостевой или иной возможности комментировать весь сайт в целом, так что выскажусь здесь.

    Шаблоны, кончено, приведены хорошие и все такое. Но.

    Какого черта оно вместо выдачи нормальных 403/404/etc. делает редирект на http://xhtml.ru/error.php?!
    Иначе, чем издевательством над пользоваетлем, который вынужнен заново вводить весь адерс (когда можно было бы исправить одну букву), я это назвать не могу. :-/


  2. Eugene Efremov :

    О, исправили однако. Молодцы, ребята…


  3. AleksejR :

    Интересная статья. Но мне, как начинающему, не совсем понятно, что значит ‘отсутствие хаков’.
    Возьмем конкретно 6 вариант Каркаса для сайта. Какими браузерами он будет правильно обработан?
    Ну хотябы из этого маленького списка : IE5/5.5/6, NN6/7, Op6/7/8, Mozilla, Firefox1.7+, Kongueror2.2+ , Safari.


  4. fIREz :

    AleksejR, предполагается, что ты сам будешь его хакать :)


  5. Oberon :

    А какже быть в 4 варианте, когда sub-section и menu не в процентах, а в пикселях? Попробовал, sub-section переносится вниз.:(


  6. talya :

    А какже быть с IE? хотелось бы узнать как добиться того,что бы минимальная ширина при подобной схеме оставалась фиксированной и в IE. Может кто-то поделиться?


  7. Баранов Андрей :

    для talya:

    ИЕ не понимает min-width. Если не волнует валидность css, используйте expression, например.


  8. Баранов Андрей :

    для Oberon:

    обычно с шириной колонок в пикселях гораздо проще. где можно посмотреть Ваш пример?


  9. Баранов Андрей :

    для AleksejR:

    у каждого варианта есть ссылка “пример”. проверьте в различных браузерах.


  10. Matt :

    to talya:

    есть еще способ кроме expression: можно в этот див вставить другой с фиксированной шириной.


  11. Евгений :

    А как насчет варианта 6, но с обтеканием content’а саб-секцией?
    Есть ли приемлимое решение?


  12. Павел Владимирович :

    Как обойтись с OPERA?


  13. Vbnzq :

    Бился-бился, ну никак не получается макет как на mail.ru – 3 колонки в разных браузерах, из них боковые фиксированой ширины, а центральная – плавающая… тока таблицей :(
    мошт кто подскажет, где взять?


  14. milo :

    пятый вариант не хочет нормально пониматься FF. в IE все в порядке, работает отлично. параметр “overflow” не хочет пониматься (работал в Top Style CSS).


  15. bvn :

    Vbnzq, лично у меня сложилось такое впечатление, что без хака такой вариант нереализуем вообще в принципе… Хотя я совсем недавно начал изучать принципы безтабличной верски, но уже напрочь разочарован ими… Все, что мне удалось добится своими хаками работает во-первых только в quirck mode, во-вторых не работает в опере, причем напрочь не работает, ни display: table-cell, ни height: expression(wrapper.offsetHeight)… Что делать, прямо уже не знаю… Точнее знаю, возвращаться назад к старом доброму принципу табличной верски – таблицы рулят!


  16. maq :

    Аналогичная проблема с 4 вариантом, sub-section вниз сползает.
    Хотел создать базу для простенького диза, а вот…
    Но таблицы не рулят, это однозначно.


  17. s1ver :

    тут вот тоже не плохая подборка шаблонов
    http://vremenno.net/html-css/free-css-templates/



22 queries 0.305 seconds.