Резиновая верстка по высоте DIV

Khlyupin — Sun, 10 Jan 2010 09:00:16 +0000

Многие неопытные веб-мастера сталкиваются с проблемой, когда верстают резиновый макет. Как правило, если макет тянется, то тянется он и по высоте, но тут возникает трудность.

Трудность заключается в том, чтобы «прилепить» подвал (footer) внизу макета. С табличной версткой не у кого не возникает проблем, а вот с модной дивной люди ломают голову.

Итак, что мы имеем.

Макет, состоящий из двух основных частей, область контента и подвал. Используемый в макете шрифт Tahoma размерностью 12 пикселей белого цвета. Обе области имеют отступы по 30 пикселей во всех направлениях. Высота подвала 100 пикселей и он имеет бордер белого цвета толщиной 1 пиксель.

Задача ясна, начинаем верстать.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">











	Контент

Подвал

Первая строка объявляет браузеру, какой спецификации придерживаться при формировании документа.

Четвертая в принципе не нужна, она указывает браузеру Internet Explorer 8 отображать содержимое документа как в 7 версии, практика показывает некие отклонения 8 от 7 при более масштабной верстке.

Пятая объявляет браузеру выбранную нами кодировку, в данном случае используем UTF-8. Вообще, люблю данную кодировку, кто верстал сайты на немецком или французском языках поймет.

Девятая строка подключает файл с нашими стилями.

Двенадцатая и четырнадцатая начало и конец нашей области контента.

Тринадцатая контейнер внутри области контента, ниже объясню, зачем он нужен.

Пятнадцатая область подвала.

Переходим к файлу со стилями, который мы подключили девятой строкой.

html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #FFF;
font: 12px/16px Tahoma, Arial, Verdana, sans-serif;
background-color: #000;
}
 
#content {
padding: 0 30px;
min-height: 100%;
}
 
* html #content {
height: 100%;
}
 
#content .body {
padding: 30px 0 130px;
}
 
#footer {
height: 39px;
margin-top: -100px;
padding: 30px;
border-top: 1px solid #FFF;
}

Вторая и третья сбрасывает внешние и внутренние отступы основного контейнера (документа).

Четвертая и пятая устанавливает размеры все того же документа.

Шестая устанавливает цвет основного шрифта используемого в документе.

Седьмая устанавливает семейство шрифта и его размерность.

Восьмая строка объявляет цвет фона документа.

Двенадцатая указывает браузеру, что в области контента отступы справа и слева 30 пикселей.

Тринадцатая строка все в той же области задает «нормальным» браузерам параметр минимальной высоты.

Семнадцатая помогает ~~тупым~~ другим браузерам сделать то же самое, что в пункте выше.

Двадцать первая делает отступ сверху 30 пикселей и снизу 130 пикселей. Этот блок получается внутренним, который не имеет высоты 100%, но достигнув максимума, будет делать отступ в 100 пикселей, который не перекроет подвал областью контента и отступ в 30 пикселей для области контента снизу.

Двадцать пятая указывает размер области подвала в 39 пикселей, так как 1 пиксель прибавится от использования бордера в двадцать восьмой строке и отступов по 30 пикселей в двадцать седьмой, что в общей сумме даст 100 пикселей.

Двадцать шестой строкой мы поднимаем область подвала на 100 пикселей конечной точки области контента, тем самым делаем наслоение, но не даем наслаиваться области контента отступом в 130 пикселей сделанным заранее.

Старался максимально подробно описать, кто не верит полученному результату, проверьте и закрепите знания.

Все права на материалы, размещенные в ленте, охраняются в соответствии с гражданским законодательством РФ. Материалы не могут быть использованы без письменного разрешения владельца сайта. © 2009-2010 www.blog.khlyupin.ru

Верстка (порезка) макета

Khlyupin — Fri, 20 Nov 2009 08:00:27 +0000

Сегодня поговорим о следующем шаге создания сайта после дизайна, который подразумевает преобразование графического макета в код разметки Интернет страницы, порезка или верстка.

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

Я рекомендую верстать дивами и использовать таблицы только для вывода табличных данных.

Разумеется, если мы верстаем меню, градусник, различные полосы ссылок, то используем для этого списки.

Имея конструкцию типа ФИО и контактный номер телефона для этого было бы логичнее использовать теги микроформатов.

Использование конкретных тегов в верстке необходимо для правильного анализа данных поисковым роботом и логики человека.

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

Немаловажную роль при верстке страницы занимает оптимизация графики страницы и правильное с точки зрения SEO задание заголовков в нужные теги.

Из всего этого ясно, что хорошая верстка PSD макета – это верстка, сделанная с грамотным употреблением тегов, оптимизируемой графикой, легким и понятным кодом.

Спонсор поста: Магазин инженерной сантехники Сушилка.net. На сайте вы можете приобрести полотенцесушители водяные из нержавеющей стали. С легким паром!

Блог Кировского строителя Интернет » Верстка

Резиновая верстка по высоте DIV

Верстка (порезка) макета