Блог Блочная верстка CSS

В прошлом месяце проводился конкурс на лучший дизайн для блочной верстки сайта. Прислано 28 макетов, из которых я выбрал один наиболее интересный, подходящий под мои требования. На примере этого макета, довольно простого, но «приятного на ощупь», мы разберем основы правильной css верстки сайта.

Увеличить

Можно сразу увидеть результат верстки сайта.

Будем верстать наш дизайн по плану.

План блочной CSS верстки сайта

  1. Техническое задание по верстке
  2. Изучение макета
  3. Верстка CSS. Подготовка
  4. Верстка CSS. Структура сайта
  5. Верстка CSS. Шапка сайта
  6. Верстка CSS. Контент сайта
  7. Верстка CSS. Подвал сайта
  8. Динамика страницы
  9. Тестирование
  10. Заключение

1. Техническое задание (ТЗ) по верстке

Этому пункту уделим особое внимание. Когда заказчик присылает ТЗ по верстке сайта, необходимо очень внимательно его изучить и, если есть вопросы, разобрать их до начала верстки, чтобы потом не возникло недоразумений.
В нашем случае я сам составил ТЗ, и непонимание исключено :)

  1. Верстка блочная
  2. Минимальное разрешение, при котором не появится горизонтального скроллера – 1024px * 768px
  3. Футер всегда прижат к низу страницы
  4. Основной контент (центральная колонка) всегда сверху страницы, начинается с заголовка
  5. Верстка резиновая, все 3 колонки тянутся пропорционально
  6. При отключении графики страница сохраняет свою функциональность и внешний вид
  7. Кроссбраузерность (Internet Explorer 6.0 +, Mozilla Firefox 1.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +)
  8. Валидность HTML и CSS
  9. Семантика кода

2. Изучение макета

Внимательно анализируем макет с учетом предъявленных требований к верстке

  1. Выделяем основные блоки
    - header
    - content
    - footer
  2. Проводим направляющие
    - левая колонка
    - центральная колонка
    - правая колонка
  3. Определяем область реагирования ссылок
    - логотип
    - ссылки в шапке
    - ссылки в меню
    - ссылки на фото
    - ссылки в футере

3. Верстка CSS. Подготовка.

Создаем папку element по названию сайта. В ней создаем стартовую гипертекстовую страницу index.html и подключаем таблицы стилей all.css и ie.css (для Internet Explorer 6). В all.css обнуляем значения по умолчанию для всех элементов, которые будут использоваться на странице.

Создаем папку для картинок и называем ее i. Файлы, папки и картинки стараемся называть коротко, это сэкономит размер кода и ускорит его написание. Уровни вложенности тегов выделяем при помощи табуляции.

Код css мне удобнее писать в компактном виде, без перевода строк и без пробелов. Определения, задающие позиционирование, размеры и отображение элементов я пишу в начале, оформление элементов и текста – в конце.

4. Верстка CSS. Структура сайта

Делаем разметку страницы согласно пунктам 1.1 – 1.4 ТЗ и пункту 2.1 изучения макета. На данном этапе мы готовим каркас страницы. Пишем HTML код основных блоков. В CSS прижимаем футер к низу страницы и указываем минимальную ширину страницы. Одно из требований ТЗ – HTML код должен начинаться с блока content, это поможет поднять сайт в первые позиции поисковиков по ключевым запросам, т.к. основной контент будет вверху страницы.

Смотрим верстку структуры сайта

5. Верстка CSS. Шапка сайта

Согласно пункту 1.5 ТЗ и пунктам 2.2 – 2.3 изучения макета пишем HTML и CSS код для блока header.
Как можно заметить, ссылки в шапке тянутся по одним и тем же направляющим, что и колонки основного блока content. Составляем пропорцию и высчитываем ширину колонок в процентах. Получаем следующие значения:

  • Левая колонка – 26%
  • Центральная колонка – 51%
  • Правая колонка – 23%

Разделим шапку сайта на два блока: блок с логотипом и блок со ссылками. Последний, в свою очередь, на блок над центральной колонкой и блок над правой колонкой.
Ссылки в шапке не имеют фиксированной ширины, т.к. текст в них может меняться на различных страницах сайта. HTML код ссылок идентичный. Прописываем в стилях внешний вид активных ссылок и ссылок при наведении курсора на область реагирования.
В шапке используем плавающую модель блоков float:left, поэтому для правильного поведения внешних блоков создаем класс clear.

Смотрим верстку шапки сайта

6. Верстка CSS. Контент сайта

Позиционируем колонки таким образом, чтобы центральная из них была в самом верху HTML кода и начиналась с тега H1.
«Хлебные крошки» позиционируем вверх относительно блока center.
Меню и фото делаем маркированными списками, область реагирования ссылок — как обозначено в пункте 2.3.
Для фото (тег img) прописываем рамку и внутренний отступ.
Получается довольно компактный, простой и понятный код HTML.

Смотрим верстку контента сайта

7. Верстка CSS. Подвал сайта

Подвал сайта состоит из двух частей: списка ссылок и копирайтов. Ссылки делаем маркированным списком, пункты которого пропорционально растягиваются по ширине. В таблице стилей задаем вид ссылки при наведении и вид активной ссылки.

Смотрим верстку подвала сайта

8. Динамика страницы

При помощи jQuery придадим динамику нашей странице. Назначим активную ссылку по клику в шапке сайта, в меню и для списка ссылок в подвале сайта.

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

9. Тестирование

Проверяем сверстанную страницу на соответствие требованиям пунктов 1.6 – 1.9 ТЗ.

  1. При отключенной графике страница полностью сохраняет свою функциональность и визуально хорошо читается
  2. Страница одинаково хорошо отображается в Internet Explorer 6.0 +, Mozilla Firefox 1.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +
  3. HTML и CSS код успешно прошли проверку на валидность. Результат можно посмотреть соответственно здесь и здесь
  4. Чтобы проверить семантику кода необходимо отключить стили CSS и посмотреть, как будет выглядеть страница в браузере. При отключении стилей наглядно демонстрируется логическое представление документа, правильность использования тегов. К этому пункту необходимо относиться достаточно серьезно, ведь именно в таком представлении видят нашу страницу компьютер, поисковые машины и боты.

Верстка готова, она соответствует всем требованиям ТЗ, а это значит, что заказчик будет доволен :)
Результат нашей работы можно скачать в архиве по следующей ссылке.

10. Заключение

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

P.S. Если после прочтения статьи у Вас появились вопросы по верстке этой страницы или замечания ко мне, пишите в комментариях, будем разбираться вместе.

Комментарии

knoppik 31 января 2009 года, 17:01 #

Спасибо за такую подробную статью!

Mistereo 01 февраля 2009 года, 8:56 #
webmolot 01 февраля 2009 года, 9:29 #

Какая версия оперы? Странно, что она шрифты не определяет.

Mistereo 01 февраля 2009 года, 12:06 #

Версия 9.63

webmolot 01 февраля 2009 года, 12:49 #

У меня в Opera 9.63 все ОК

pokerfalt 01 февраля 2009 года, 12:51 #

Отличная статья, спасибо большое

Andrew 01 февраля 2009 года, 15:26 #

А не хотите передать эстафету, знакомым блогерам-верстальщикам ? :)
Зы: премного благодарен за статью.

webmolot 02 февраля 2009 года, 1:24 #

Эстафету написания статей? Да вроде как все, кому есть чем поделиться, пишут )

Andrew 02 февраля 2009 года, 1:33 #

Не, пусть тоже сверстают что-нить, от и до

Виктор 02 февраля 2009 года, 1:36 #

Вопрос по шапке сайта. Как вы сделали на ссылках круглые уголки? Просто понять не могу. Весь код разобрал, а не понял…

webmolot 02 февраля 2009 года, 1:47 #

Andrew, ок, я им передам :)
Призываю всех верстальщиков делиться опытом. Это поможет очистить просторы нашего рунета от мусора и сделает нашу жизнь краше!

Виктор. Фон ссылки сделан из 2-х фоновых картинок (картинки с уголками), одна прижата к левому краю, вторая — к правому.

Виктор 02 февраля 2009 года, 2:24 #

Да я и сам разобрался. Я в принципе так и думал, просто эти картинки не как не мог найти. Когда bn.gif просто открывал в новом окне, то выглядело изображение просто как прямоугольник, вот и не додумался сразу увеличить его).

Кстати, может jqwery на этом сайте всё-таки не использовать, и заменить его на простой JavaScript’ик? А то не рационально как то получается…

webmolot 02 февраля 2009 года, 2:47 #

да, конечно можно, его вообще не нужно использовать на сайте. При помощи jqwery я просто показал переключение ссылок наглядно на одной странице и использовал эту библиотеку в разделе 2. Изучение макета для выделения блоков.

Mistereo 02 февраля 2009 года, 2:59 #

Видимо у меня с оперой что-то не то…
Раньше такого не замечал.

Ponikarov 02 февраля 2009 года, 3:34 #

Спасибо, интересно было прочитать.

4ekuct25 03 февраля 2009 года, 15:39 #

Отличная статья, заношу в закладки))
Большое спасибо)

40a 04 февраля 2009 года, 21:03 #

Если добавить #content {padding-bottom:243px;} ,то не нужен блок empty.
Если прописать {width:auto!important;width:960px;min-width:960px;} и так же для height , то не нужен отдельньный ie.css.
Не мешало бы убрать всплывающий таскбар над картинкой в IE.
Слишком много дивов и классов.
Спасибо за урок, буду разбирать дальше!

40a 04 февраля 2009 года, 21:54 #

В Опере и ФФ ссылки синии, а в ИЕ фиолетовые.

webmolot 05 февраля 2009 года, 12:53 #

40a, видимо, вы еще плохо разобрали урок.

#content {padding-bottom:243px;} так мы сделать не может, т.к. для #content прописана высота 100%. Но избавиться от блока empty можем, вы правы. Для этого нужно прописать нижний padding для #content .wrap

приведенный вами код width:auto!important;width:960px;min-width:960px не задает минимальную ширину для IE6. IE поймет код как width:960px и установит фиксированную ширину блока

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

про «много дивов и классов». Буду очень рад, если вы предложите свой вариант верстки, где их не слишком много

по цвету ссылок. Обратите внимание на a:link a:visited a:hover

40a 07 февраля 2009 года, 21:18 #

Попытался сделать свой вариант ELEMENT, с минимумом блоков и классов. Даже оказалась лишней картинка footer.gif, a footer_r пришлось удлинить (это заметно). Я не могу тестировать при большом разрешении экрана. Если не затруднит, протестируй сам. Подскажи сервис с возможностью загрузки страницы для проверки при разных размерах экрана. Скрипты я убрал, но сохранил эффект активной страницы в нижнем меню.
Код валидный XHTML 1.1 CSS 2.1
Жду критические замечания.

webmolot 07 февраля 2009 года, 21:35 #

40a, даже на маленьком разрешении заметны баги, а когда начинаем увеличивать — их становится намного больше. Не буду их все перечислять, кто захочет, сам увидит. Валидацию html документ проходит с предупреждением. Если интересно, могу рассказать, как его вылечить.

Самый простой способ проверить страницу в различных разрешениях — изменить ее масштаб (для FF и Opera). Так же можно воспользоваться полезным сервисом, который делает скриншоты страницы на различных разрешениях, платформах, браузерах и др.

vic 08 февраля 2009 года, 18:23 #

А что если правая или левая колонки имели фон отличный от белого? Какое бы решение применил? Есть решение
padding-bottom:32000px; margin-bottom:-32000px;
Есть ли решение получше?

vic 08 февраля 2009 года, 20:36 #

При уменьшении размера окна уходит правое поле! Похоже свойство min-width по разному работает с абсолютно позиционированными блоками.

webmolot 09 февраля 2009 года, 10:42 #

vic, в новогодней акции я давал решение с фоном для колонок для Ademaro. Но то решение не универсально и его не всегда применишь. C padding и margin решение не слышал, как оно работает?

> Похоже свойство min-width по разному работает с абсолютно позиционированными блоками.
это не min-width, а padding, в IE он остается в FF прячется.

vic 09 февраля 2009 года, 19:23 #

Идея его состоит в том, чтобы неравенство высот колонок спрятать, неимоверно удлинив их вниз, чтобы их концы были за пределами реального содержимого страницы. Добиваются этого тем, что сначала ставят колонкам очень большой отступ (padding) вниз, который закрашивается цветом фона. А чтобы все остальное содержимое тоже не сдвигалось туда далеко, колонкам назначается отрицательная граница (margin) такого же размера:

#content,
#sidebar {
padding-bottom:32767px;
margin-bottom:-32767px;
В итоге все, что идет за колонками смещается и находится прямо под содержимым самой длинной из них, а колонки удлиняются вниз. Некрасиво одно — из-за длинных колонок сама страница становится такой же длинной. Чтобы с этим бороться, надо их контейнеру проставить свойство overflow:hidden, которое заставляет контейнер просто отрезать и не показывать то, что выходит за его пределы.
Статья с http://softwaremaniacs.org/blog

vic 09 февраля 2009 года, 19:49 #

Я тоже ради интереса верстал предложенный макет! Позже дам ссылочку, тама у меня тоже пару интересных приемов ;-)

webmolot 09 февраля 2009 года, 20:42 #

ок, конечно кидай ссылку, думаю, всем будет интересно

anton 11 февраля 2009 года, 17:25 #

Объясните ,пожалуйста, почему в этой строчке надо обязательно писать display:block:
#header .wrap .logo a{ position:relative; display:block;

Иначе, изображение logo куда-то пропадает!

anton 11 февраля 2009 года, 18:13 #

В статье написано:

* Левая колонка – 26%
* Центральная колонка – 51%
* Правая колонка – 23%

А в программе процентное соотношение ширины не совпадает:
/* Header */

#header{position:absolute;top:0;left:0;width:100%;height:102px;background:#484644 url(i/header.jpg) repeat-x}

#header .wrap{height:102px;min-width:960px;margin: 0 20px;}

#header .wrap .logo{float:left;width:25%;}

#header .wrap .logo a{ position:relative;display:block;width:190px;height:80px;margin:12px 0 0 26px;background:#52504E url(i/logo.jpg) no-repeat;text-decoration:none}

#header .wrap .links{margin-left:25%}

#header .wrap .links .center{float:left;width:71%}

#header .wrap .links .center .link{margin:41px 0 0 14px}

#header .wrap .links .right{margin-left:71%}

#header .wrap .links .right .link{margin:41px 0 0 7px}

Объясните ,пожалуйста!!!

webmolot 12 февраля 2009 года, 11:02 #

anton, ссылка — это строчный элемент, display:block пишем, чтобы назначить для нее значения блочного width, height, margin.

Проценты для колонок в шапке и в контекстной части не совпадают, т.к. в них различная вложенность и проценты считаются от разных блоков. Кстати, хорошо, что задали этот вопрос, т.к. при перерасчете нашел погрешность у себя.

Смысл в том, что в блоке #content процентное соотношение колонок считаeтся от всей его ширины. В блоке #header левая колонка считается от #header .wrap, а две другие — от #header .wrap .links.

Составляем пропорцию:
х/у=52/22
х=52у/22
х+у=100
52у/22 +у=100
52у+22у=2200
у=29,73
х=70,27

В итоге получается ширина блоков в шапке:
26% — 70% — 30%

anton 12 февраля 2009 года, 19:51 #

webmolot, спасибо за ответы. все стало ясно!!!

Олег 12 февраля 2009 года, 23:47 #

неудачное решение по форме показа кода. Сложно читать.

worTex 19 февраля 2009 года, 15:43 #

ДА ….ты просто истинный профессиональный верстальщик. Вёрстка отличная и дизайн очень хороший. Проходит валидность. Код удачно записан. Спасибо за то что ты написал очень хорошую и полезную статью

Temy 03 марта 2009 года, 9:34 #

Здравствуйте, что вы скажите о верстке такой
http://blogto4ka.ru/html-css/seo-verstka-sozdaem-seo-optimizirovannyj-layout.html
стоит ли ее использовать в своих проектах?

webmolot 03 марта 2009 года, 13:08 #

Temy, если Вы не заметили, я в статье руководствовался такими же принципами. Конечно стоит, главное делать это грамотно!

diz 12 марта 2009 года, 18:06 #

верстка с
XHTML 1.0 Transitional

вместо

XHTML 1.0 Strict

с чем связано?

Перспективный блоггер 13 марта 2009 года, 3:12 #

#content .sidebar_left {display: INLINE;} — это здесь явно лишнее. А так очень даже виртуозно.

webmolot 13 марта 2009 года, 10:47 #

Перспективный блоггер, уберите то, что Вы посчитали лишним, и посмотрите что будет в IE6

diz, мне удобнее работать с Transitional, принципиальной разницы не вижу. Если у Вас есть аргументы против Transitional, с удовольствием выслушаю.

Александр 13 марта 2009 года, 11:01 #

Автору спасибо. Только у меня почему то с ошибками получается, хотя последовательно копипастил.
Пошел разбираться.

diz 13 марта 2009 года, 13:53 #

W3C однозначно рекомендует использовать Strict.

insomnia 15 марта 2009 года, 21:02 #

Отличная статья, пошаговая и с примерами, и большой респект автору, отличная верстка, правда для начинающего тяжело воспринимается, код не обьясняется….

Интересное для веб-мастеров 20 марта 2009 года, 6:26 #

[...] Блочная верстка CSS В прошлом месяце проводился конкурс на лучший дизайн для блочной верстки сайта. Прислано 28 макетов, из которых я выбрал один наиболее интересный, подходящий под мои требования. На примере этого макета, довольно простого, но «приятного на ощупь», мы разберем основы правильной css верстки сайта… [...]

webmolot 20 марта 2009 года, 9:55 #

diz, тогда можете считать меня злосным нарушителем, который не руководствуется рекомендациями W3C. Но как же быть тогда с Google, Microsoft, Yandex и др., которые так же не используют Strict?!

diz 20 марта 2009 года, 9:59 #

Проехали

Юра 23 марта 2009 года, 22:41 #

Подскажите пожалуйста! Я все сделал как здесь написано. Но почему-то при разрешении экрана 1024х768 Footer поднимается вверх на середину экрана в Firefox. При разрешении 1280х1024 в Firefoxвсе ок, но в IE от контента до шапки отступ большой…

webmolot 24 марта 2009 года, 10:32 #

Юра, видимо, что то не так сделали. Скачайте архив с примером и хорошенько его изучите, тогда ваши проблемы с версткой будут решены.

Ademaro 25 марта 2009 года, 14:31 #

Урок отличный, спасибо.
В следующий раз хотелось бы увидель использование микроформатов, затронуть тему Web accessibility а так же написание стилей для налодонников и пр.

По поводу данного урока:
При верстке данного макета я хотел в html коде поставить шапку выше футера (всё таки логичнее показывать сначала шапку, потом — низ), но IE7 почему то начал выводить футер не правильно (т.е. между ним и конткнтом появилось пустое пространство по высоте шапки). С чем это связано и поддается ли лечению?

Перспективный блоггер 25 марта 2009 года, 20:30 #

Логичнее с точки зрения кого??? С точки зрения SEO оптимизации НАМНОГО правильнее делать так, как в примере.

В вебе лечению поддается все — смотрите, какие стили на него влияют и потихоньку переопределяйте.

Ademaro 26 марта 2009 года, 10:38 #

>С точки зрения SEO оптимизации НАМНОГО правильнее делать так, как в примере

С чего вдруг? У меня, например, в шапке есть ключевые слова, относящиеся к данной странице, а в футере всего пара телефонов. Так ПОЧЕМУ правильнее ставить футер выше хидера???

>В вебе лечению поддается все
Насчет этого я согласен, ищу. Думал, что у кого-нть уже есть решение.

webmolot 26 марта 2009 года, 12:15 #

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

Причина того, что в IE до 8-й версии футер выводится неправильно в том, что не срабатывает margin после блока с position:absolute. Почему так? Думаю, очередной баг IE, который в 8-й версии умудрились исправить.

Самое простое и безопасное решение, поместить между футером и шапкой пустой блок и прописать для него стили height:0 и overflow: hidden, чтобы никому не мешал.

Ademaro 27 марта 2009 года, 12:20 #

Webmolot, спасибо. Для IE7 сработало (даже путем добавления пустого дива), правда в IE6 теперь футер не прижимается к низу…

webmolot 27 марта 2009 года, 12:33 #

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

Ademaro 27 марта 2009 года, 14:50 #

Да, точно! …забыл добавить ie6.css =)
Ещё раз спасибо.

webmolot 27 марта 2009 года, 14:56 #

np, но лучше все же прописать те свойства которые я указал, т.к. пустой див будет смещать футер вниз

Aderba 07 августа 2009 года, 12:29 #

webmolot спасибо за статью ….. очень полезная, давно хотела перейти на блочную верстку ….. Я вот только никак не могу понять как вы расчитали процентное соотношение? В комментариях вы подробнее об этом написали, но все равно остается непонятным как составили пропорцию:
х/у=52/22 — откуда эти числа 52 и 22?
х=52у/22
х+у=100 — откуда это и что это значит?
52у/22 +у=100

Артём 09 августа 2009 года, 13:32 #

Спасибо за статью!
Вот только скачать архив не получается :(
Перезалейте пожалуйста.

Михаил 13 августа 2009 года, 13:40 #

Все сделал один в один до пятого пункта (т.е. структуру сайта). При уменьшении окна, например, до 500px — появляется полоса проктутки, но если сдвинуть ее вправо, то видно, что все, кроме шапки, принимает минимальную ширину в 960px, как по задумке и должно быть, а шапка остается шириной в 500px, т.е. принимает ширину окна, и справа остается пустое пространство. Не подскажите, почему так происходит?

leff 04 сентября 2009 года, 22:19 #

Спасибо! Статья супер. Есть интересные моменты на которые следовало бы обратить внимание при верстке сайтов.

Андрей 14 сентября 2009 года, 7:29 #

Здравствуйте, webmolot! Почему-то не работает ссылка на скачивание
где написано:
«Результат нашей работы можно скачать в архиве по следующей ссылке.»

http://webmolot.com/recipe/css/element.rar

Андрей 14 сентября 2009 года, 11:39 #

Уважаемый webmolot? а почему везде написано #header .wrap?

webmolot 14 сентября 2009 года, 14:20 #

Aderba,
* Центральная колонка в шапке – 52%
* Правая колонка в шапке – 22%
* Центральная колонка основной части (контент) – x
* Правая колонка основной части (контент) — y
Думаю, сейчас всё станет понятно :)

Михаил, укажите min-width

Артём и Андрей, после того, как закрыли хостера 3fn, на котором висел мой блог, мне не вернули бэкап сайта, и некоторые файлы мне не удалось самостоятельно восстановить. Американские быдлодемократы требуют 2к своих зеленых за бэкап, чего я на данный момент не могу себе позволить. Поэтому приношу извинения за неудобства, надеюсь, временные.

Андрей 14 сентября 2009 года, 16:05 #

Уважаемый webmolot вы не ответили? а почему везде написано #header .wrap?

Соболезную Вам насчет хостинга.

Хочу выразить Вам благодарность за Ваши статью. Спасибо большое!

webmolot 15 сентября 2009 года, 12:22 #

.wrap в данном случае помогает нам назначить ширину для шапки равную основной части (#content). Это нужно для того, чтобы пропорционально растягивать колонки шапки и основной части

Роман 20 октября 2009 года, 17:24 #

Да, статья на самом деле отличная! Мне пришлась очень по вкусу. Не смотря на то, что у самого уже хороший опыт работы верстальщиком, частенько стал пользоваться некоторыми приемчиками из данного примера, НО! Нашел, как мне показалось, одну ошибочку. Высота. По условию ТЗ было сказало, что подвал должен быть прижат к нижней части окна, даже если мало контента, а в результате получается, что как бы мало контента не было, всегда остается вертикальный скролл. Видел данную ошибочку в FF3. В своей верстке я эту ошибочку само собой исправил, чего и Вам, Вебмолот, советую :)

Спасибо за ресурс, с нетерпением ждем новых примеров и новых приемчиков!

Виталий 22 октября 2009 года, 8:53 #

Уважаемый, webmolot, я понимаю, реклама превыше всего, но как я могу скачать пример этой вёрстки..?

Мария 06 ноября 2009 года, 21:56 #

Большое спасибо за статью, она мне очень помогла. Из любопытства проверила all.css валидатором, он сделал ряд одинаковых замечаний:
#content .center .in p — Имена, содержащие пробелы, должны заключаться в кавычки. Если кавычки пропущены, любые пробелы до или после имени игнорируются, а последовательности пробелов внутри имени преобразуются в единичный пробел.
Объясните, пожалуйста, что это значит и как сделать правильно

Александр 09 ноября 2009 года, 8:42 #

Большое спасибо за статью!
Нельзя ли выложить архив шаблона на какой-нибудь файлообменник?

Kub 10 ноября 2009 года, 18:47 #

Мария, замечачание валидатора в этом правиле относились к названию шрифта MS Sans Serif. Как и написал валидатор при наличии пробелов необходимо заключать в кавычки.

Евгений Григорьев 11 ноября 2009 года, 11:59 #

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

z 17 ноября 2009 года, 3:13 #

Очень хочется узнать у специалиста такой вопрос:

Кроссбраузерная верстка включает в себя тестирование на совместимость с чертовой уймой браузеров даже если следовать списку приведенному в начале статьи можно накопать штук 20 различных версий той же оперы 9+

Подскажите, на каких конкретно браузерах следует проводить замеры? В каких версиях движки поменялись настолько что под них надо оптимизировать CSS? Например ежу понятно что это IE6,7,8, если бы узнать поподробнее например Opera 9.46, 9.72 и т.д., пропуская промежуточные версии.

Вообще интересно узнать пример тестирования на кроссбраузерность от спеца.

Спасибо.

Игорь 24 декабря 2009 года, 9:11 #

Часть внутренних ссылок не работает, а данная статья была бы очень полезна начинающим. Надеюсь, автор исправит недочёты.

Максим 08 января 2010 года, 17:50 #

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

Вадим 08 февраля 2010 года, 13:44 #

Исправте пожалуйста ссылку на архив

M0dul0 24 февраля 2010 года, 16:26 #

Статейка прямо скажем ни чему не учит и не научит, автор видимо для себя план действий написал. Похоже на то.

Браузеры для проверки используйте Chrome(safari один двиг)/opera/IE8/ и самое главное IE6

Антон Форексов 06 мая 2010 года, 16:01 #

Давно хотел узнать: файлы css, подключаемые через условные комментарии, обрабатываются валидатором или нет? или он считает, что их нет в принципе?

грин 16 мая 2010 года, 6:58 #

Подскажите пожалуйста, каким образом вся область списка делается ссылкой?
Т.е. не только слово, а все окружающее его поле.

MrAr2r 25 мая 2010 года, 21:18 #

webmolot, спасибо большое за Ваши статьи… Очень мало действительно полезной информации по верстки в рунете… Ваши статьи все чем-то помогли, в каждой нашел что-то новое… понял, что делал не так до этого:)

У меня такой вопрос, может немного не по теме…

Занимаясь только версткой сайтов, можно иметь стабильный и хороший доход? Т.е. можно ли выбрать ее основной своей профессией и совершенствоваться только в этом направлении? Есть перспектива карьерного роста? Вообще, эта профессия востребована?

Я до этого работал php-программистом, и чем дальше, тем больше понимаю, что это не мое… Верстать мне нравится гораздо больше… Могу часами сидеть, и не надоедает… Вот сейчас и задумался, серъезно заняться версткой и забить на php.

MrAr2r 26 мая 2010 года, 9:28 #

webmolot, поудаляйте пожалуйста лишние сообщения… Что-то немного притормаживает сайт… Отправился комментарий с 5ой попытки, и все 5 комментариев отправились сразу) Галочка на поле «Сообщать мне о новых комментария по E-mail не ставится» (chrome)…

Станислав 02 июня 2010 года, 17:56 #

Никто не сталкивался с проблемой, когда при попытке «зафлотать» вправо блок в Header создается пустое пространство в IE7. Во всех остальных браузерах данной проблемы нет.

Макс 27 июня 2010 года, 9:17 #

Доброе день.
Автор подскажите пожалуйста:
1) В шапке(header) должно быть только лого и оно должно быть по центру

Bassboost 28 июля 2010 года, 13:47 #

Всем привет!
Лучше всего использувать для IE 6-7 версии отдельный CSS
для этого нужно прописать в тегах

и в CSS сделать отделный файл для стилей IE до 6 версиий и этот стиль будет подключатся только тогда когда User будет заходить с помощью IE 6

Ajpro 04 августа 2010 года, 12:24 #

нашел маленький недочет, в списке ссылок в подвале сайта, ширина блоков указывается в процентах, ну а если пользователя захочет туда вставить ссылку длинной в 15 или более знаков (редкость но не исключение)?

webmolot 18 октября 2010 года, 8:55 #

Верстку в архиве можно скачать по ссылке

webmolot 19 октября 2010 года, 16:26 #

Роман, сейчас все ок, спасибо за замечание.

MrAr2r, мне кажется, что любой хороший специалист не зависимо от того, чем он занимается, будет востребован. И верстка не исключение.

webmolot 19 октября 2010 года, 16:41 #

Мария, валидатор напоминает, что названия шрифтов, если они с пробелами, нужно брать в кавычки. Чтобы не ругался, надо сделать так — «Trebuchet MS»

teddy-bear 25 октября 2010 года, 13:31 #

Добрый день! Статья отличная!
Вы дублируете background:#FFAB00 url(i/header.jpg) в body и #header . Это обязательно или достаточно только в #header?

Объясните пожалуйста необходимость
.clear:after {content:».»;display:block;height:0;clear:both;visibility:hidden;}
Если я правильно понял, это сделано для создания отступа?

webmolot 25 октября 2010 года, 14:01 #

@teddy-bear
Спасибо!

Дублирование background в body объясняется тем, что header растягивается не на всю ширину.

Псевдо-элемент after очищает поток при помощи свойства clear: both и тем самым не дает плавающим в контейрене блокам (c float) выступать за его пределы. Если не совсем понятно мое объяснение, поищите в Интернете информацию по clearfix

Григорий 19 апреля 2011 года, 13:16 #

Отличная статья!

kumbas 21 апреля 2011 года, 16:01 #

Добрый день!
Отличная статья — мне здорово помогает
только не понятно, у вас размер шрифтов для некоторых блоков задан в подобном формате:
#content .center .in p{…font:normal 14px/1.8 …}
или
.menu li a{…font: normal 17px/38px …}

Для чего это сделано, и с чем связано?
спасибо за ответ

webmolot 21 апреля 2011 года, 16:11 #

kumbas, первая цифра — это размер шрифта (font-size), а вторая — высота строки (line-height)

Гарик 27 апреля 2011 года, 0:28 #

ммм, красота, все работает )) часто заглядываю именно в этот пост :)

Александр Жданеев 28 апреля 2011 года, 22:50 #

Пригодилось для изучения верстки сайтов. Очень благодарен за подробное и понятное изложение.

Shustry 30 мая 2011 года, 8:11 #

Всё правильно, то, что блок empty использован. При использовании отрицательных отступов или отрицательного свойства top для контента в любой Опере иногда появляется дублирование отступа подвала. Явление не изучено. Пару вечеров помаялся с этим и забил. Тоже использую пустой блок в кач-ве подложки под футер.

Панченко Антон 14 июля 2011 года, 10:18 #

Просто но со вкусом!
Спасибо!

Сан 19 декабря 2011 года, 10:42 #

Как дивы левый и правый оказываются наравне с центральным?

webmolot 19 декабря 2011 года, 12:31 #

В данном случае высота боковых колонок и центральной не одинаковые, это визуальный обман. Однако есть несколько способов, чтобы высоту выравнять. Один из них я применил в верстке сайта http://www.webmolot.com для выравнивания колонок.

Сан 19 декабря 2011 года, 13:30 #

А зачем нужен в данном случае overflow:hidden?

webmolot 19 декабря 2011 года, 14:27 #

Если честно, я так давно верстал этот макет, что уже и не помню, зачем тут нужен был overflow:hidden. Вроде и без него нормально работает :)

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com