Я тут прошелся по онлайн-прилавкам, кое что посоветовали коллеги, что-то прочел сам лично. Вот решил выложить небольшой список литературы для верстальщика, которая, как я считаю, помогут новичку в освоении языка разметки HTML и каскадных таблиц CSS.

HTML учебник «Освой самостоятельно HTML и XHTML. 10 минут на урок»

Автор: Вильямс, 2003 г.

Я лично не читал этой книги, но один мой приятель, совсем еще начинающий веб-разработчик, очень хвалил эту книгу, сказал, что всё расписано очень понятно, с иллюстрациями и примерами. Информация разбита по урокам, каждый из которых освещает отдельно взятую тему языка HTML.На первом этапе эта книга будет очень полезна новичку.

Еще одно неоспоримое преимущество этой книги – цена, 50-70 рублей – совсем немного

Советую купить прямо сейчас в Bolero.ru, в OZON.ru или в Books.Ru

«HTML и CSS на примерах»

Автор: Мержевич В.В. , 2005 г.

Очень рекомендую эту книгу, т.к. человек, написаший ее – истинный профессионал в HTML/CSS. Когда-то я очень много почерпнул знаний на его сайте http://htmlbook.ru, и, честно признаться, до сих пор иногда посещаю этот сайт когда забуду какую-нибудь мелочь. Книга очень популярна и однозначно поможет как новичку так и опытному разработчику.

Цена порядка 150-200 рублей, что так же делает сию книгу привлекательной.

Советую купить прямо сейчас в Bolero.ru, в OZON.ru или в Books.Ru

Полный справочник по HTML, CSS и JavaScript. Справочник профессионала.

Автор: Исси Коэн Лазаро, 2007 г.

А вот эту книгу мне посоветовал мой коллега, далеко не новичек в верстке. Советовал как настольную книгу, которая часто выручает в сложных ситуациях.

Издание представляет собой современный полный справочник с перекрестными ссылками по HTML, CSS и JavaScript. В первых главах рассматриваются основы HTML, CSS и JavaScript.
Далее приводятся сведения обо всех элементах и атрибутах HTML, событиях, стилях CSS, поведениях, фильтрах, свойствах, методах и объектах JavaScript. Элементы языков программирования в каждой из глав перечислены в алфавитном порядке. Для каждого элемента приводится краткое описание, полный синтаксис, пример использования, список совместимых версий браузеров Netscape и Internet Explorer, список элементов, с которыми элемент используется. Веб-дизайнер, веб-мастер, веб-программист – вся нужная вам информация собрана под этой обложкой!

Цена кусается, что-то около 800-1400 рублей, но лично я решил купить эту книженцию в ближайшее время, что и вам советую

Купить прямо сейчас в Bolero.ru, в OZON.ru или в Books.Ru

PHP 5. Как самостоятельно создать сайт любой сложности Издание 2

Автор: Зольников Д.С., 2006 г.

Для тех, кому мало одной верстки рекомендую эту книгу.

В книге приведены основные сведения по языку Web-программирования РНР, который позволяет решать задачи любой сложности и формировать динамические разделы сайта: форумы, гостевые книги, каталоги продукции и многое другое. Помимо синтаксиса и возможностей языка рассматривается установка и настройка Web-сервера Apache, на котором, как правило, выполняются РНР-программы.
Издание отличается от традиционных учебников тем, что оно носит не справочный, а обучающий характер. Оно рассчитано на начинающего пользователя, имеющего базовые знания о программировании.

Цена от 150 рублей. Можете купить в Bolero.ru, в OZON.ru или в Books.Ru

Постараюсь максимально выложить всё что знаю по этой теме, а что сразу не вспомню (или пока не знаю) буду со временем дописывать…

CSS-хаки для обеспечения кроссбраузерности.

«любимый» Internet Explorer 6.0 и ниже

/*\*/
* html {}
/**/
/* Хак только для IE6 */

Если перед свойством в css поставить подчеркивание “_”, или дефис “-”, то эти свойства будут восприниматься только IE версии 6 и ниже:

.style {_background:#F00;}
\\width:100px; - видят только ie 5.0 и ie 5.5 (неактуально)

Звездочка. Работает для IE7 и ниже:

p { background:red; /* Применимо ко всем браузерам */ *background: green; /* Применимо к IE6 и ниже */ }

#hack{
color:green; /* IE 5.01 */
color/**/:blue; /* IE 5.5 */
c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
}

* html .ie6 {color:red;} /* Хак только для IE6 */

IE6 и ниже проигнорирует эти правила:

div>span {...}
div+span {...}

IE min-width & max-width: максимальная и минимальная ширина блока:

#element {
min-width:780px;
max-width:1260px;
width expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
}

Box Model. Хак используется для того, чтобы справиться с глюком эксплорера, в котором border и padding включаются в ширину элемента:

padding:4em;
border:1em solid red;
width:30em;
width/**/:/**/ 25em;

Min-height хак от Дастина Диаза:

selector {
min-height:500px;
height:auto !important;
height:500px; }

Internet Explorer 7.0 и ниже

Не все хаки для IE7 работают если в начале документа не указать !DOCTYPE.

*+html .style {  background: #F00;}

html>body .style {*background: #F00;}

*:first-child+html {} * html {} /* IE 7 и ниже */

*:first-child+html {} /* IE 7 только */

html>body {} /* IE 7 и нормальные браузеры */

html>/**/body {} /* Только нормальные браузеры (не IE 7) */

>body {} /* выбирает элемент body только в IE7 */

html* {} /* выделяет все элементы внутри элемента html. Только для IE7 и ниже. */

//width:100px; - так написаное свойство проигнорируют все браузеры кроме ie 7.0 и меньше

.ie7b {#color:#00FF00;} /* Хак только для IE7,6 */

a:link:visited, a:visited:link В соответствии со стандартами, псевдотеги :link и :visited взаимно исключаемы, то есть :link означает непосещенную ссылку. Тем не менее, IE 7 и ниже проигнорируют эти псевдо-классы, если какой-нибудь другой появится ниже в том же селекторе.

a:link:visited, a:visited:link {} a:link:visited, a:visited:link {} /* выбирает элемент a в IE7 и ниже */

Условные комментарии

Условие может быть таким: IE – для любой версии IE
lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v
lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же
gte IE v – (greater than or equal) – для IE, версия которых больше или равна v
gt IE v – (greater than) – для IE, версия которых больше v.

Для всех версий IE:

<!--[if IE]><link rel="stylesheet" href="css/cssf-ie.css" type="text/css" media="screen" /><![endif]-->

Для 7-й версии:

<!--[if IE 7]><link rel="stylesheet" href="css/cssf-ie7.css" type="text/css" media="screen" /><![endif]-->

Для 5.01, 5.5 и 6.0:

<!--[if lte IE 6]><link rel="stylesheet" href="css/cssf-ie6.css" type="text/css" media="screen" /><![endif]-->

CSS-хаки для браузера Opera

@media all and (-webkit-min-device-pixel-ratio:10000),

not all and (-webkit-min-device-pixel-ratio:0) {

.style {background: #F00;} /* только для Opera */

}

html:first-child {}  /* только для Opera */

html:first-child .style {

background: #F00; /* только для Opera < 9.5 */

}

Можно создать файл opera.css и подключить его в head секции документа:

<head>

    <link rel="stylesheet" href="css/opera.css" type="opera/css" media="screen" />

</head>

CSS хаки для FireFox:

html:first-child .class { color: #368EF1; } /* для FireFox */

@-moz-document url-prefix(){body { color: #368EF1; }}

CSS-хак для Safari

body:first-of-type #element { color: red; }

CSS-хак для Konqueror

html:not(:nth-child(1)) #element { color: red; }

Для нескольких браузеров:

.class, x:-moz-any-link { color: #368EF1; } /* для FireFox, но так же работает в Internet Explorer 7 */

@media all and (min-width: 0) {.safariOperaChrome {color:#FF00FF;}} /* Хак только для Safari, Opera, Google Chrome*/

@media all and (min-width: 0) {div span { background: #FF0}} /*только для Opera* (так же видит Safari 3 и Google Chrome) /

html:not([lang*=""]):not(:only-child) .ffSafariChrome {color:#990000;} /* Хак только для IE7, FireFox */html:root div {…} /* для Firefox (также видит safari3) */

html:root .ffSafariChrome {color:#660066;} /* Хак только для Safari, FireFox, Google Chrome */

body:first-of-type .operaChromeSafari {color:orange;} /* Хак только для Safari, Opera, Google Chrome */

html>/**/body {} /* Все современные браузеры, кроме IE 7 */

/*\*//*/selector{property:value;}/**/ /* MacIE */

Здесь есть всё это в табличном виде.

Логический алгоритм следующий:

1. Высоту странички body выставляем в 100% (минимум);
2. Основной слой (page), в котором будет шапка (header) и контент (content) так же растягиваем на 100% по высоте;
3. Подвал (footer) прижимаем книзу position:relative; bottom:0;
4. Т.к. подвал находится ниже 100% слоя page, то нужно его поднять на столько, сколько он сам имеет роста: margin-top:-50px;
5. Теперь страничка и без скрола, и подвал внизу, но при нынешнем состоянии контент будет залезать под подвал, применим-ка мы к нему padding-bottom:60px;

Теперь должно быть в норме. Покажу на картинке:

Надеюсь, что логика понятна. Если кто не поймет – выложу кодом.