Раз пошла такая пьянка, то и я, в свою очередь, решил представить на суд общественности свой вариант макета, который, как мне кажется, находится очень близко к идеальному.
А в итоге у меня получилось вот что: http://gruzzilkin.110mb.com/layout/
По моей задумке идеальный макет должен обладать следующими свойствами:
Считаю, что все пункты плана, кроме последнего, мне выполнить удалось.
В принципе, все что я сделал, является тем же велосипедом, но собрал я этот велосипед из разных деталей по всему Интернету:
Вот как я шел к созданию итогового макета:
Для начала был взят и сверстан свой вариант Holy Grail. Посмотреть его можно здесь. Он ничем революционным не отличался от того варианта, что был на ALA, просто подвал прижат к низу экрана и колонки одинаковой высоты.
После появления статьи «Faux Absolute Positioning» на A List Apart, я под впечатлением от этой техники решил переделать свой «идеальный» макет, и вот что у меня получилось в итоге.
Потом я наткнулся на разработанный Роджером Йоханссоном (Roger Johansson) способ создания гибких рамок и решил дополнить им свой макет.
В конце концов я получил то, что хотел. Но в то же время количество дополнительных блоков в моем варианте просто ужасает. Так же стоит отметить, что для «колонок одинаковой высоты» не получится применить не повторяющееся фоновое изображение, прижатое к низу этих самых колонок (т.к. низ находится далеко за пределами окна просмотра). Т.е. это изображение пришлось бы позиционировать внутри родительского контейнера .box или (и?) .content. И если у вас на руках будет дизайн, отличающийся от моего, с ним придется долго и упорно танцевать.
Не считая себя опытным и искушенным верстальщиком, я хотел бы попросить совета у пользователей Хабра, как можно было бы оптимизировать данный макет? Или уже есть другие способы, намного проще моего и удовлетворяют всем описанным выше требованиям?
Заранее спасибо за ответы.
А в итоге у меня получилось вот что: http://gruzzilkin.110mb.com/layout/
По моей задумке идеальный макет должен обладать следующими свойствами:
- Doctype XHTML 1.0 Strict;
- верстка без использования таблиц в качестве элементов оформления;
- кроссбраузерность;
- валидный html и css код;
- макет не разваливается при изменении размеров страницы и масштабировании шрифтов;
- смотрелось бы приемлемо с отключенной графикой;
- содержимое обрамляется красивой рамкой со скругленными углами;
- подвал всегда прижат к низу экрана;
- колонки одинаковой высоты;
- контент в HTML-коде страницы находится как можно выше;
- минимум «лишних» элементов разметки.
Считаю, что все пункты плана, кроме последнего, мне выполнить удалось.
В принципе, все что я сделал, является тем же велосипедом, но собрал я этот велосипед из разных деталей по всему Интернету:
- перевод статьи «В поисках Святого Грааля» на Design For Masters;
- статья «Flexible box with custom corners and borders» на 456 Berea st;
- статья «Faux Absolute Positioning» на A List Apart.
Вот как я шел к созданию итогового макета:
Для начала был взят и сверстан свой вариант Holy Grail. Посмотреть его можно здесь. Он ничем революционным не отличался от того варианта, что был на ALA, просто подвал прижат к низу экрана и колонки одинаковой высоты.
После появления статьи «Faux Absolute Positioning» на A List Apart, я под впечатлением от этой техники решил переделать свой «идеальный» макет, и вот что у меня получилось в итоге.
Потом я наткнулся на разработанный Роджером Йоханссоном (Roger Johansson) способ создания гибких рамок и решил дополнить им свой макет.
В конце концов я получил то, что хотел. Но в то же время количество дополнительных блоков в моем варианте просто ужасает. Так же стоит отметить, что для «колонок одинаковой высоты» не получится применить не повторяющееся фоновое изображение, прижатое к низу этих самых колонок (т.к. низ находится далеко за пределами окна просмотра). Т.е. это изображение пришлось бы позиционировать внутри родительского контейнера .box или (и?) .content. И если у вас на руках будет дизайн, отличающийся от моего, с ним придется долго и упорно танцевать.
Не считая себя опытным и искушенным верстальщиком, я хотел бы попросить совета у пользователей Хабра, как можно было бы оптимизировать данный макет? Или уже есть другие способы, намного проще моего и удовлетворяют всем описанным выше требованиям?
Заранее спасибо за ответы.
