Статья на Хабре про кроссбраузерную верстку: https://habrahabr.ru/company/htmlacademy/blog/341538/

Точнее, не совсем про верстку. А про то, почему "настоящей" кроссбраузерности не достичь никогда. Очень хороший (на мой взгляд) обзор возможностей современных браузерных движков, с подробным описанием - почему они несовместимы, и почему создать что-то что выглядит везде однаково - нереально.

 

Я доработал шаблон для сайта о котором тут писал.

Суть доработки сводилась к тому, чтобы поработать с header'ом. Теперь для мобильной версии сайта "подсвывается" свой header, в который копируется содержание текущего + меню не остается на экране, а прячется под кнопку. Реализацию сделал с использованием jquery (версии 1.7 или выше). Выбор этой библиотеки очевиден: у меня все проекты используют её, и смысла "заморачиваться" на трюки с CSS лично я не видел. Соответственно, появился блок JavaScript кода. Да и возможностей у jQuery побольше (в плане простоты реализации, всё тоже самое можно и на чистом JS сделать).

Итак, дополнительные возможности текущего шаблона:

• Меню в мобильной версии сворачивается под кнопку
• Header в мобильной версии становится полосой с меню
• Также в мобильной версии можно прятать и сайдбары (ничего сложного)

Что добавилось из настроек: классы CSS в "настроченой" части позволяют настроить всё, что угодно.

Да, если необходимо прятать сайдбар для мобильной версии, то добавляем следующий CSS код:

@media screen and (max-width: 599px) {
 .aside-1 {display: none;}
}

Соответственно, для того, чтобы спрятать первый или второй сайдбар, используем имена классов .aside-1 и .aside-2. Аналогично можно прятать footer (класс .footer).

Ссылка для скачивания шаблона: flex-univ-mnu.zip

Скриншоты:

Полный вид:

Мобильный вид:

На досуге запилил некий универсальный шаблон для сайта... Точнее, даже не так. Я тут писал что познакомился с flex css - современным расширением css, которое позволяет буквально творить чудеса. :) Решил поискать, что на эту тему есть в сети - с точки зрения готовых шаблонов сайтов на flex. Ожидаемо, их оказалось немного. В итоге взял один из и "немного допилил". Что вылилось в итоге универсальный шаблон, из которого легко можно сделать:

• сайт шапка + подвал + 2 сайдбара + основной текст
• сайт может быть как "резиновым", так и фиксированной ширины
• легко и изящно может быть исключен любой компонент, то есть шаблон можно использовать для создания сайта типа шапка + подвал + сайдбар и основной текст, или, например, шапка + 2 сайдбара + основной текст...
• сайдбары могут иметь фиксированную ширину
• сайдбары могут иметь произвольный порядок
• и всё это с минимумом кода

Немного про настройку. Я постарался документировать код так хорошо, как это только возможно, поэтому, после настройки но перед исползованием - комментарии лучше порезать. Собственно, правки состоят из 2х частей: правки html и css.

Что касается правок html, то там всё просто: если нужно что-то удалить, то удаляется именно там. Например, надо удалить левый сайдбар - удаляем в части html Aside 1. Ну и т.д. Теги там современные, "говорящие", так что вероятность "пролететь" - невысока.

Сложнее с настройкой CSS. Весь CSS код разделён на 3 части:

• Неизменная часть для верстки - её менять не надо.
• Настроечная часть для кастомизации сортировки - это часть, которая описывает последовательность расположения блоков на экране. Меняя параметр order для блоков, можно добиться того, что сайдбары будут справа. Или слева. Иные параметры (вон, высота-ширина-шрифты-и т.д.) в этой части менять не стоит!
• Настроечная часть для кастомизации - вот тут можно и нужно менять фоны-шрифты и т.д.

Отдельно обращу внимание на параметр width: 1200px для класса wrapper-style. Если его удалить, то макет становится "резиновым". Если изменить - то это и будет искомая ширина вашего будущего сайта.

Да, для работы с шаблоном потребуется знание html + css.

Ссылка на архив с шаблоном: flex-univ.zip

Случайно наткнулся. Вот: http://xhtml.ru/instr/3col_creator/index.html

Совершенно замечательная штука: генерирует html + css шаблон для сайта от 1 до 3х колонок (разумеется, с "шапкой" и "подвалом") для разных doctype, разных пропорций... Вещь!

Я проверил пару шаблонов - в моем зоопарке браузеров (opera linux, opera windows на wine, firefox linux, firefox windows на wine, IE 7 и 8 на wine) все работало вполне себе корректно. Так что - пользуйтесь на здоровье.

Нашел классную ссылку, где приведены примеры практически всех наиболее часто встречающихся при верстке сайта CSS решений. Ссылка вот: http://www.shtogrin.com/design/, а находится по ней приемы того, как сделать с использованием CSS:

• поле ввода с иконкой
• иерархический список в select
• горизонтальное одноуровневое CSS меню
• рамки с уголком и с тенью, а также с круглыми краями
• оформление формы ввода при помощи CSS
• CSS галерея
• заголовок в виде линии

Внимание! Данная информация частично устарела, часть ссылок возможно не рабочая.

Образовалась задачка. Построить с минимальными затратами CSS меню. Вот что нарыл...

1. Оказывается,в природе есть фреймворк для создания CSS меню. Живет по адресу http://www.lwis.net/free-css-drop-down-menu/, обладает хорошей настраивоемостью... базируется на jQuery. Подробный разбор, как "оно" работает и пример применения - тут (http://vremenno.net/html-css/css-drop-down-menu/).
2. Можно воспользоваться генератором CSS меню. Простой, бесплатный. Из минусов - имеет 8 тем, если хочется "чего-то еще", то нужно ручками перелопачивать код. Ссылка: http://purecssmenu.com/
3. Можно написать "с нуля" руками. Статья (на английском), описывающая процесс и рабочий пример тут: http://www.webdesign.org/html-and-css/tutorials/css-pop-up-menu-2-horizontal-menus.12089.html
4. Еще один генератор меню. Вот: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/generator.htm
5. Старенькая заметка об обходе проблемы :hover в IE (проблема в том, что IE не хочет видеть :hover ни для чего, кроме ссылки) - тут: http://www.umade.ru/log/2004/07/css-hover-any-element/
6. Короткий пример красивого меню на Jquery: http://www.master-web.info/dropdownmenu-css-gquery/
7. Статья, в которой описывается как сделать CSS меню на "голом CSS". Хороша для понимания принципов работы такого рода меню. http://cssor.ru/css/polezno-interesnoe/cssmenu
8. Еще один бесплатный генератор меню. http://www.izzymenu.com/
9. Хорошая (подробная) статья про то, как сделать CSS меню. http://beholder-eye.info/2006/03/30/dropdown-menu-css
10. Неплохая статья о создании css/php/js меню: http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html
11. CSS Play - хороший сайт, где есть CSS шаблоны на все случаи жизни... Есть и пример меню: http://www.cssplay.co.uk/menus/dd_valid.html
12. По адресу http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started живет плагин для jQuery, с помощью которого (вроде) можно быстро сделать меню. ("Вроде" - потому что сам не пробовал).
13. Простецкое jQuery меню: http://css-tricks.com/simple-jquery-dropdowns/
14. Подробная статья о jQuery меню в wordpress: http://www.seoadsensethemes.com/wordpress-multi-level-drop-down-menu-using-jquery/