31 января 2009

Блочная верстка 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.

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

Браузер IE отображает код HTML и CSS без переноса строк.

HTML код


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

<head>

    <title>Пример правильной блочной верстки</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="all.css" />

    <!--[if lt IE 7]>

        <link rel="stylesheet" type="text/css" href="ie.css">

    <![endif]-->

</head>

<body>

...

</body>

</html>

Уровни вложенности тэгов выделяем при помощи табуляции

CSS код

body,div,ul,li,h1,p{margin:0;padding:0}

img{border:0}

ul li{list-style:none}

h1{font-size:100%;font-weight:normal}

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

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

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

HTML код

<body>

    <!--Content-->

    <div id="content">

        <div class="clear">

        ...

        </div>

        <div class="empty"></div>

    </div>

    <!--Footer-->

    <div id="footer">

        ...

    </div>

    <!--Header-->

    <div id="header">

    ...

    </div>

</body>

Выделяем основные структурные блоки HTML комментариями

CSS код

/* General */

body,div,ul,li,h1,p{margin:0;padding:0}

img{border:0}

ul li{list-style:none}

h1{font-size:100%;font-weight:normal}

html,body{height:100%;width:100%;background:#FFAB00 url(i/header.jpg) repeat-x top;color:#2E2E2E}

/* Header */

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

/* Content */

#content{min-width:960px;min-height:100%;padding-top:102px;margin:0 20px;background:white url(i/all.gif) repeat-y left;}

.empty{height:243px}

/* Footer */

#footer{position:relative;height:243px;min-width:960px;margin:-243px 20px 0;background:url(i/footer.gif) repeat-x bottom}

Выделяем основные структурные блоки CSS комментариями

CSS код для Internet Explorer

#content {height:100%}

#header .wrap,#content,#footer {width:expression((document.documentElement.clientWidth||document.body.clientWidth)<960?'960px': "auto")}

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

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

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

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

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

HTML код

<!--Header-->

<div id="header">

    <div class="wrap clear">

      <!--Logo-->

      <div class="logo">

          <a href="#"> </a>

      </div>

      <!--Links-->

      <div class="links clear">

          <div class="center clear">

              <div class="link"><a href="#">Информация о группе компаний</a></div>

          </div>

          <div class="right clear">

              <div class="link"><a href="#">Контактная информация</a></div>

          </div>

      </div>

    </div>

</div>

CSS код

/* 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}

/* Header link */

.link{float:left;display:inline;height:27px;background:#2D2D2D url(i/bn.gif) no-repeat left}

.link a{float:left;height:21px;padding:6px 16px 0;background:url(i/bn_r.gif) no-repeat right;white-space:nowrap;font:normal 12px Tahoma;color:#FFFEFE}

.link a:hover{color:#FFDEBD}

.link.active a{color:#C3C3C3;text-decoration:none;cursor:default;}

.link.active a:hover{color:#C3C3C3;text-decoration:none;}

/* Clear */

.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clear {display: inline-block;}

.clear {display: block;}

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

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

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

<!--Content-->

<div id="content">

    <div class="clear">

        <!--Content center-->

        <div class="center">

            <div class="in">

                <h1>Blogun.ru — реклама в блогах</h1>

                <div class="path"><a href="#1">Главная</a> /</div>

                <p>...</p>

            </div>

        </div>

        <!--Content left-->

        <div class="sidebar_left">

            <ul class="menu">

                <li><a href="#01">Оптимизация сайтов</a></li>

                <li><a href="#02">Хостинг</a></li>

                <li><a href="#03">Реклама в блогах</a></li>

                <li><a href="#04">Копирайтинг</a></li>

                <li><a href="#05">Юзабилити-анализы</a></li>

                <li><a href="#06">Рекламные кампании</a></li>

            </ul>

        </div>

        <!--Content right-->

        <div class="sidebar_right">

            <ul class="photo">

                <li>

                    <a href="#2"><img src="i/img1.jpg" width="136" height="136" alt="" /></a>

                    Фотосессия <a href="#2">нашего офиса</a>

                </li>

                <li>

                    <a href="#3"><img src="i/img2.jpg" width="136" height="136" alt="" /></a>

                    <a href="#3">Как проехать</a> в нашу обитель в городе Москва?

                </li>

            </ul>

        </div>

    </div>

    <div class="empty"></div>

</div>

Ниже представлены CSS код основного блока сontent и стили для ссылок и заголовка:

CSS код

/* Content */

#content{min-width:960px;min-height:100%;padding-top:102px;margin:0 20px;background:white url(i/all.gif) repeat-y left;}

.empty{height:243px}

/* Content left */

#content .sidebar_left{float:left;display:inline;overflow:hidden;width:26%;margin-left:-100%;padding-top:55px;background:url(i/sidebar_l.gif) no-repeat right 50px}

/* Content center */

#content .center{float:left;width:100%;overflow:hidden}

#content .center .in{position:relative;margin: 0 22% 0 26%;padding:55px 20px 30px 30px}

#content .center .in p{margin:20px 0;font:normal 14px/1.8 MS Sans Serif, Tahoma}

#content .center .in .path{position:absolute;top:40px;font:normal 11px Tahoma}

#content .center .in .path a{font:normal 11px Tahoma}

/* Content right */

#content .sidebar_right{float:left;display:inline;overflow:hidden;width:22%;margin-left:-22%;padding-top:55px;background:url(i/sidebar_r.gif) no-repeat left 50px;text-align:center;}

#content .sidebar_right .photo{width:160px;margin:0 auto;text-align:left;font:normal 11px/1.6 Tahoma}

#content .sidebar_right .photo li{margin-bottom:60px}

#content .sidebar_right .photo li img{padding:7px;margin-bottom:3px;border:1px solid #C8C8C8}

#content .sidebar_right .photo li a{font:normal 11px Tahoma}

/* Menu */

.menu {width:100%}

.menu li{width:100%;height:38px;margin-bottom:5px;background:url(i/arr.gif) no-repeat left center}

.menu li a{height:38px;display:block;padding-left:37px;font: normal 17px/38px Trebuchet MS, Tahoma;color:#0078D4}

.menu li a:link{color:#0078D4}

.menu li a:visited{color:#6E00D4}

.menu li a:hover{color:#E97300}

/* Link */

a:link {color:#0078D4}

a:visited {color:#6E00D4}

a:hover {color:#E97300}

/* Title */

h1{font:normal 30px Trebuchet MS}

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

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

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

HTML код

<!--Footer-->

<div id="footer">

    <!--List-->

    <div class="list">

        <div class="in">

            <ul>

                <li><a href="#1"><span>Optimism.ru</span></a></li>

                <li><a href="#2"><span>Usabil.ru</span></a></li>

                <li><a href="#3"><span>Opter.ru</span></a></li>

                <li class="active"><a href="#4"><span>Blogun.ru</span></a></li>

                <li><a href="#5"><span>Logoved.ru</span></a></li>

                <li><a href="#6"><span>Blog-job.ru</span></a></li>

                <li><a href="#7"><span>Blogmoney.ru</span></a></li>

                <li><a href="#8"><span>Blogoslov.ru</span></a></li>

                <li><a href="#9"><span>Fatal.ru</span></a></li>

            </ul>

        </div>

    </div>

    <!--Copyright-->

    <div class="copyright">

        <div class="in">

            <div class="left">© 1998—2009 Группа компаний «Элемент»</div>

            <div class="right"><a href="#">Контактная информация</a></div>

        </div>

    </div>

</div>

CSS код

/* Footer */

#footer{position:relative;height:243px;min-width:960px;margin:-243px 20px 0;background:url(i/footer.gif) repeat-x bottom}

/* Copyright */

#footer .copyright{height:149px;width:100%;background:url(i/footer_l.jpg) no-repeat left}

#footer .copyright .in{height:149px;padding-left:37px;background:url(i/footer_r.jpg) no-repeat right}

#footer .copyright .in .left{float:left;font:normal 11px/80px Tahoma;color:#1C1C1C}

#footer .copyright .in .right{float:right;padding-right:37px;background:url(i/arr2.gif) no-repeat right center;font:normal 11px/80px Tahoma;color:#1C1C1C;}

#footer .copyright .in .right a{font:normal 11px Tahoma color:#343434}

#footer .copyright .in .right a:hover{color:#343434}

/* Footer list */

#footer .list{height:94px;width:100%;background:#F5F9FF url(i/list_l.gif) repeat-y left}

#footer .list .in{padding:0 20px;height:94px;background:url(i/list_r.gif) repeat-y right;text-align:center}

#footer .list .in ul{margin:0 0 0 1%}

#footer .list .in ul li{height:94px;width:11%;float: left}

#footer .list .in ul li a{position:relative;height:94px;display:block;margin:0 -3px;font:normal 14px/94px Trebuchet MS;color:#0043A7;outline:none}

#footer .list .in ul li a span{width:100%;height:94px;display:block;font:normal 14px/94px Trebuchet MS;color:#0043A7;text-align:center;text-decoration:none;cursor:pointer}

#footer .list .in ul li a:hover{background:#DFEEFF url(i/list_li.gif) repeat-y left;text-decoration:none}

#footer .list .in ul li a:hover span{background:url(i/list_ri.gif) repeat-y right;color: #2E2E2E}

#footer .list .in ul li.active{position:relative;z-index: 5}

#footer .list .in ul li.active a{background:#DFEEFF url(i/list_li.gif) repeat-y left;text-decoration:none;cursor:default}

#footer .list .in ul li.active a span{background: url(i/list_ri.gif) repeat-y right;color:#2E2E2E;cursor:default}

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

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

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

<script type="text/javascript" src="jquery.js"></script>

Для каждого функционального блока пропишем соответствующий код javascript:

<script>

  $(document).ready(function(){

    $(".menu li").click(function(){

      $(".menu li").removeClass("active");

      $(this).addClass("active");

    });

  })

</script>

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

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. Если после прочтения статьи у Вас появились вопросы по верстке этой страницы или замечания ко мне, пишите в комментариях, будем разбираться вместе.

  • 1 Star2 Stars3 Stars4 Stars5 Stars
  • ОднаКнопка

Комментарии

72
knoppik 31 января | 17:01

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

Mistereo 01 февраля | 8:56

В опере косяк
http://s59.radikal.ru/i164/0902/65/f842a276bb27.jpg

webmolot 01 февраля | 9:29

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

Mistereo 01 февраля | 12:06

Версия 9.63

webmolot 01 февраля | 12:49

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

pokerfalt 01 февраля | 12:51

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

Andrew 01 февраля | 15:26

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

webmolot 02 февраля | 1:24

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

Andrew 02 февраля | 1:33

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

Виктор 02 февраля | 1:36

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

webmolot 02 февраля | 1:47

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

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

Виктор 02 февраля | 2:24

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

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

webmolot 02 февраля | 2:47

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

Mistereo 02 февраля | 2:59

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

Ponikarov 02 февраля | 3:34

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

4ekuct25 03 февраля | 15:39

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

40a 04 февраля | 21:03

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

40a 04 февраля | 21:54

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

webmolot 05 февраля | 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 февраля | 21:18

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

webmolot 07 февраля | 21:35

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

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

vic 08 февраля | 18:23

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

vic 08 февраля | 20:36

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

webmolot 09 февраля | 10:42

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

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

vic 09 февраля | 19:23

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

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

vic 09 февраля | 19:49

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

webmolot 09 февраля | 20:42

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

anton 11 февраля | 17:25

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

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

anton 11 февраля | 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 февраля | 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 февраля | 19:51

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

Олег 12 февраля | 23:47

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

worTex 19 февраля | 15:43

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

Temy 03 марта | 9:34

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

webmolot 03 марта | 13:08

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

diz 12 марта | 18:06

верстка с
XHTML 1.0 Transitional

вместо

XHTML 1.0 Strict

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

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

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

webmolot 13 марта | 10:47

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

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

Александр 13 марта | 11:01

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

diz 13 марта | 13:53

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

insomnia 15 марта | 21:02

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

Интересное для веб-мастеров 20 марта | 6:26

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

webmolot 20 марта | 9:55

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

diz 20 марта | 9:59

Проехали

Юра 23 марта | 22:41

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

webmolot 24 марта | 10:32

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

Ademaro 25 марта | 14:31

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

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

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

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

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

Ademaro 26 марта | 10:38

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

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

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

webmolot 26 марта | 12:15

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

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

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

Ademaro 27 марта | 12:20

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

webmolot 27 марта | 12:33

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

Ademaro 27 марта | 14:50

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

webmolot 27 марта | 14:56

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

Aderba 07 августа | 12:29

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

Артём 09 августа | 13:32

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

Михаил 13 августа | 13:40

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

leff 04 сентября | 22:19

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

Андрей 14 сентября | 7:29

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

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

Андрей 14 сентября | 11:39

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

webmolot 14 сентября | 14:20

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

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

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

Андрей 14 сентября | 16:05

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

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

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

webmolot 15 сентября | 12:22

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

Роман 20 октября | 17:24

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

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

Виталий 22 октября | 8:53

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

Мария 06 ноября | 21:56

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

Александр 09 ноября | 8:42

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

Kub 10 ноября | 18:47

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

Евгений Григорьев 11 ноября | 11:59

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

z 17 ноября | 3:13

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

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

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

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

Спасибо.

Игорь 24 декабря | 9:11

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

Максим 08 января | 17:50

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

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



 * - поля, обязательные для заполнения