Простые примеры шаблонов HTML+CSS
На этой странице показано, как с помощью CSS можно получить несколько разных раскладок веб-страницы, используя только один простейший HTML-код. Эти примеры далеки от шедевров сайта Zen Garden. Однако, они позволят понять базовые принципы, каким образом можно сделать разные шаблоны при условиях:
- 5 блоков (5 DIV) для контента
- несложная таблица стилей
- отсутствие хаков
(x)HTML-разметка
Для наглядности блокам установлены разные цвета фона, и в базовом варианте выглядеть страница с этим кодом будет так:
header
content
sub-section
Разумеется, все варианты проходят валидацию XHTML Strict. А вот с валидностью CSS несколько сложнее, но если она принципиальна, то без условных комментариев для Internet Explorer уже не обойтись.
Во всех вариантах есть ссылка "пример" в блоке menu, которая открывается в новом окне. Нажав на нее, вы увидите выбранный шаблон в действии.
Вариант 1
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}
Вариант 2
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}
Вариант 3
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}
Вариант 4
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}
Вариант 5
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}
Вариант 6
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}
Больше подробностей на английском языке и примеров можно найти в статье "One clean HTML markup, many layouts...".
Не нашел гостевой или иной возможности комментировать весь сайт в целом, так что выскажусь здесь.
Шаблоны, кончено, приведены хорошие и все такое. Но.
Какого черта оно вместо выдачи нормальных 403/404/etc. делает редирект на /error.php?!
?наче, чем издевательством над пользоваетлем, который вынужнен заново вводить весь адерс (когда можно было бы исправить одну букву), я это назвать не могу. :-/
2005-11-19 at 9:40 pm
О, исправили однако. Молодцы, ребята…
2005-11-23 at 12:39 pm
?нтересная статья. Но мне, как начинающему, не совсем понятно, что значит ‘отсутствие хаков’.
Возьмем конкретно 6 вариант Каркаса для сайта. Какими браузерами он будет правильно обработан?
Ну хотябы из этого маленького списка : IE5/5.5/6, NN6/7, Op6/7/8, Mozilla, Firefox1.7+, Kongueror2.2+ , Safari.
2006-01-20 at 5:03 pm
AleksejR, предполагается, что ты сам будешь его хакать :)
2006-01-25 at 8:33 am
А какже быть в 4 варианте, когда sub-section и menu не в процентах, а в пикселях? Попробовал, sub-section переносится вниз.:(
2006-01-26 at 3:10 pm
А какже быть с IE? хотелось бы узнать как добиться того,что бы минимальная ширина при подобной схеме оставалась фиксированной и в IE. Может кто-то поделиться?
2006-02-03 at 1:01 am
для talya:
?Е не понимает min-width. Если не волнует валидность css, используйте expression, например.
2006-02-03 at 1:30 am
для Oberon:
обычно с шириной колонок в пикселях гораздо проще. где можно посмотреть Ваш пример?
2006-02-03 at 1:33 am
для AleksejR:
у каждого варианта есть ссылка “пример”. проверьте в различных браузерах.
2006-02-03 at 1:34 am
to talya:
есть еще способ кроме expression: можно в этот див вставить другой с фиксированной шириной.
2006-02-16 at 6:54 pm
А как насчет варианта 6, но с обтеканием content’а саб-секцией?
Есть ли приемлимое решение?
2006-05-19 at 1:29 pm
Как обойтись с OPERA?
2006-10-28 at 10:13 am
Бился-бился, ну никак не получается макет как на mail.ru – 3 колонки в разных браузерах, из них боковые фиксированой ширины, а центральная – плавающая… тока таблицей :(
мошт кто подскажет, где взять?
2006-12-28 at 2:50 pm
пятый вариант не хочет нормально пониматься FF. в IE все в порядке, работает отлично. параметр “overflow” не хочет пониматься (работал в Top Style CSS).
2007-01-24 at 10:20 pm
Vbnzq, лично у меня сложилось такое впечатление, что без хака такой вариант нереализуем вообще в принципе… Хотя я совсем недавно начал изучать принципы безтабличной верски, но уже напрочь разочарован ими… Все, что мне удалось добится своими хаками работает во-первых только в quirck mode, во-вторых не работает в опере, причем напрочь не работает, ни display: table-cell, ни height: expression(wrapper.offsetHeight)… Что делать, прямо уже не знаю… Точнее знаю, возвращаться назад к старом доброму принципу табличной верски – таблицы рулят!
2007-09-16 at 12:46 am
Аналогичная проблема с 4 вариантом, sub-section вниз сползает.
Хотел создать базу для простенького диза, а вот…
Но таблицы не рулят, это однозначно.
2008-07-04 at 1:41 pm
тут вот тоже не плохая подборка шаблонов
http://vremenno.net/html-css/free-css-templates/
2008-09-07 at 6:38 pm