В последнее время накопившийся опыт (которого во многих областях более чем достаточно) преобразуется в различного вида framework-и (англ каркас, структура) - наборы готовых библиотек-файлов-шаблонов, которые можно взять за основу для дальнейшей доработки. Такая тенденция не обошла и CSS (Каскадные таблицы стилей) верстку.

Каждый, кому приходилось сталкиваться с версткой, скорее всего после двух-трех сверстанных макетов замечал, что многие элементы повторяются от сайта к сайту. И если вдруг возникло (вполне нормальное) желание вынести всё это в “шаблон” или “болванку” для верстки - знайте, Вы не одиноки!

Если у Вас нет своего шаблона (или нескольких), то для ускорения и облегчения процесса верстки можно воспользоваться уже готовыми CSS-фреймворками. Однако, следует обратить внимание на их особенности (у многих - жестко фиксированная ширина, где-то могут возникнуть проблемы при абсолютном-относительном позиционировании…) В общем, RTFM… (как вариант - все-таки можно сделать своё)

Итак, CSS-фреймворки:

http://developer.yahoo.com/yui/grids/ -  YUI 2: Grids CSS

http://960.gs/ - 960 GridSystem

http://www.yaml.de/ - YAML (”Yet Another Multicolumn Layout” - (X)HTML/CSS Framework)

http://elasticss.com/ - Elasic CSS

http://habrahabr.ru/blogs/css/46418/ - BlueTrip

code.google.com/p/malo/  - компактный фреймворк “Мало”
http://www.vcarrer.com/2009/01/prototyping-with-malo-css-library.html - пример использования

UPD краткое описание CSS-фреймвоков можно найти по ссылке
http://www.getincss.ru/2008/04/28/css-frameworks-izbrannoe/

http://www.noupe.com/css/5-popular-css-frameworks-tutorials-tools-for-getting-started.html

UPD2
http://uggallery.audiopeace.ru/css-manual - сборник статей по CSS-верстке

UPD3 скругленные углы на CSS

http://habrahabr.ru/blogs/webdev/30019/
http://habrahabr.ru/blogs/css/63983/
http://habrahabr.ru/blogs/css/64016/
http://techmeat.habrahabr.ru/blog/64033/

Согласитесь, довольно часто, если сайт занимает не всю  высоту окна, то “висящий” подвал-футер смотрится не очень. Гораздо лучше смотрится “прибитый” к нижней части окна подвал, который в случае увеличения количества текста просто съезжает ниже.

Как прижать футер к низу?

Основным способом прижатия футера к нижней части страницы является задание высоты одного из HTML- элементов равной 100%. Дальше - идут вариации.

1. Можно задать высоту html,body равной 100%, футер делаем абсолютно позиционируемым и отступ от низа делаем нулевым (position:absolute;bottom:0; height:30px;). Чтобы футер не перекрывался или не наезжал на основной контент - делаем внутренний отступ у блока контента равный высоте подвала (padding:30px;)

2. Основной блок (content) растягивается на всю высоту, а footer за счет отрицательного верхнего отступа (margin-top:0) “всплывает” над content-ом.

3. вариант с отрицательными margin и футером с clear:both (http://dimox.name/press_footer_bottom_with_css/#comment-209)

В любом случае окончательную верстку желательно проверить на кроссбраузерность - почти наверняка без “хаков” или дополнительных css-правил не обойдется. В частности, будьте осторожны с IE

http://www.w3school.ru/blog/css/sticky-footer.html
http://xhtml.ru/2005/10/18/footer-stick/ (второй вариант)
http://dimox.name/press_footer_bottom_with_css/
http://webmolot.com/prizhimaem-futer-k-nizu/

UPD Будьте внимательны - разные версии одного и того же браузера opera по-разному отображают приклеенный к низу футер (в частности, проблемы, если не ошибаюсь с Opera 9.63)

При переносе верстки с использованием тегов <font size=”2″>… </font> в свойство CSS font-size, выяснилось, что различные браузеры,  воспринимают CSS-свойства xx-small, x-small, small, large…

Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным.  По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера
и операционной системы.

Действительно, в различных браузерах результаты применения одинакового стиля сильно отличаются: проверить себя можно тут http://rotorweb.ru/typography/css-font-size-conversion-chart.html

Часто для создания сайта (особенно некоммерческого) возникает вопрос - где взять дизайн? В общем, если вариант с заказом качественного дизайна по ряду причин не рассматривается, предпочтение отдается шаблонам сайтов.

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

Валидные (X)HTML+CSS бесплатные шаблоны, без труда можно найти во Интернет. А подогнать шаблон под свои нужды при желании и небольшом знании HTML-CSS и, при необходимости, PHP — дело нехитрое. =)

Итак, где можно бесплатно скачать HTML-шаблоны для сайтов: Читать целиком »

Да да.. Как оказалось, размеры шрифта разные браузеры подсчитывают по-разному.

При установке font-size:87%; IE 6, IE 7 , Firefox отображали надписи шрифтом в 12px, opera - 11px. При 88% - достигалось единообразие (12px) . Почему-то я не успокоился… Пошел дальше - при 86% ситуация такая же как при 87. Но при 85 процентах… IE6 и его младший (т.е. более поздний) брат показывали всё так же 12-px шрифтом, а Firefox стал солидарным с Oper’ой - перешел на 11px. При 84 - снова пришли к однообразию.

Если меню выполнено в виде плавающего блока (например, div#left {float:left;width:200px;}), а в правом блоке сделан отступ шириной такой же или чуть больше ширины плавающего блока (div#right{margin-left:200px;}), то при попытке вставить в правый блок таблицу <table width=”100%”>…</table> она отображается ниже плавающего блока (как будто прописано свойство clear). Если прописать width=”99%”, то таблица отображается на своем месте.

Если вставить дополнительный слой шириной 99% как контейнер для таблицы (а в таблице прописать 100%), то таблица опять же отобразится на своем месте.

Во-первых, проверяем, указан ли DOCTYPE. К тому же сползание таблицы еще зависит от типа документа. Похоже, для Strict-документов, браузер прибавляет к общей ширине таблицы (100%) дополнительные бордюрные пиксели по бокам. Проверить, в них ли причина, довольно легко -пишем вместо {border:solid 1px #000;} более “толстый” вариант {border: 10px solid #000000;}, а затем убираем границы, и, для наглядности можно выделить цветом {background: #aaa;}

http://xpoint.ru/forums/thread/29197.xhtml
http://xpoint.ru/forums/thread/29164.xhtml

Не сразу понял, что происходит когда столкнулся с багом - в Internet explorer 6 отступ визуально казался больше, чем в Mozilla, Opera IE7. При увеличении отступа эта разница становилось более заметной. Хотя, никаких предпосылок к этому, казалось бы, быть не должно - В css всё ровно… Баг наблюдался при указании отступа для “плавающего” элемента (margin-left:10px; float:left) причем, только если отступ и выравнивание в одну сторону.

Как оказалось, это довольно известная проблема с удвоением отступа margin характерна для IE версии 6 и ниже и именно при выравнивании элемента в сторону отступа.. И название у неё имеется  - Doubled Float-Margin Bug.

Конечно, можно отказаться от использования margin для плавающего элемента, но есть другой более действенный способ - прописать display:inline для этого же элемента. Кроме того, можно воспользоваться условными комментариями для Internet Explorer версии 6 и ниже (lt 6) или хаками.

Дополнительную информацию можно посмотреть тут: http://www.positioniseverything.net/explorer/doubled-margin.html

Internet Explorer до 6 версии включительно “по умолчанию” не отображает прозрачность у PNG-изображений.

Очень подробно все проблемы, связанные с отображением PNG картинок в IE расписаны у Игоря:

• Суть и решение проблемы прозрачности PNG в IE6
• Краткая информация о Фильтр AlphaImageLoader
• проблема “Не работают ссылки на png-фоне”
• PNG в IE темнее - искажение цветов PNG изображений в Internet explorer

http://www.tigir.com/alpha_png.htm

UPD - неплохая статья про PNG и IE

http://www.xiper.net/html-and-css-tricks/glyuki-brauzerov/ie6/png-transparency-ie6.html

IE 3px float bug - глюк IE 6.

<style>
#left {width: 200px;float: left; border: solid 1px #f00;}
#right {padding:0;border: solid 1px #0f0;margin: 0 20px 0 250px;}
#right p{background: #000;height: 100px;margin:0;}
</style><div id=”left”> </div>
<div id=”right”><p> </p></div>

В IE 6 появляется отступ 3 px у элемента p, который находится на уровне  элемента #left, если блок “обтекается” другим блоком (у которого не задана высота) и у последнего есть дочерний блок(у которого задана высота), то этот дочерний блок будет иметь отступ в 3px от родительского блока слева. Замудрено, но похоже на правду…

Как лечить!?
1) Прописать высоту у элемента right (#right:height:1%)
2) С помощью условных комментариев задать отрицательный отступ в ie6

<!–[if lte IE 6]>
<style type=”text/css”>
#right p {margin-left:-3px;}
</style>
<![endif]–>