При верстке необходимо соблюдать условия:

1. верстка должна в точности соответствовать рисунку (пиксельная точность)
2. верстка резиновая. Левая колонка фиксированной ширины, правая - тянется
3. минимальная ширина страницы 600px
4. футер прижат к низу страницы
5. колонки растягиваются на всю высоту экрана
6. кроссбраузерность Internet Explorer 5.5 +, Mozilla Firefox 2.0 +, Opera 8.5 +, Google Chrome, Safari 3.0 +
7. валидный HTML и CSS
8. чистый HTML и CSS, без javascript, expression и др.

Успехов! Награда ждет своего победителя!

Правила конкурса

Первое задание конкурса

Второе задание конкурса

Обычное состояние

При наведении

За основу берем правильное решение предыдущего задания (архив).

При верстке необходимо соблюдать условия:

1. верстка должна в точности соответствовать рисунку (пиксельная точность)
2. кроссбраузерность Internet Explorer 6.0 +, Mozilla Firefox 2.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +
3. валидный HTML
4. не использовать дополнительные картинки (только img.gif из предыдущего задания)
5. не использовать javascript
6. не использовать .htc файл

Успехов! Награда ждет своего победителя!

Правила конкурса

Первое задание конкурса

1. <ul>
2. <li><img src="img.gif" alt="" width="" height="" /></li>
3. <li><img src="img.gif" alt="" width="" height="" /></li>
4. <li><img src="img.gif" alt="" width="" height="" /></li>
5. <li><img src="img.gif" alt="" width="" height="" /></li>
6. <li><img src="img.gif" alt="" width="" height="" /></li>
7. <li><img src="img.gif" alt="" width="" height="" /></li>
8. </ul>

При верстке необходимо соблюдать условия:

1. верстка должна в точности соответствовать рисунку (пиксельная точность)
2. не использовать классы и идентификаторы
3. количество товара в каталоге не ограничено
4. новый товар заносится в список путем добавления <li></li>
5. горизонтальные ряды товаров разделены линией
6. список, фиксированный по ширине
7. картинки товара одного размера (темный прямоугольник)
8. у всех картинок одинаковая рамка
9. кроссбраузерность, валидность
10. в html-код можно добавить один свой элемент

Успехов! Награда ждет своего победителя!

Правила конкурса смотрите здесь

Однажды Миша Квакин обозвал меня «Верстальщиком - виртуозом» за что ему премного благодарен.

Виртуоз (от лат. virtus — доблесть, талант) – человек, достигший в работе высшей степени мастерства.

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

Мы можем лишь приближаться к званию «Верстальщика-виртуоза», но для этого надо много работать, решать нестандартные задачи и очень любить свое дело. В связи с этим у меня появилась идея нового конкурса, который поможет всем нам оттачивать мастерство верстки «молотком, а где надо - и пёрышком»

Решаем интересные задачки, отвечаем на сложные вопросы и получаем знак качества в виде штампа «Верстальщик-виртуоз» с Вашим именем. Оттиск можно сделать у себя на сайте или в блоге со ссылкой на задачу конкурса.

В розыгрыше побеждает тот, кто первым пришлет правильное решение примера или ответ на вопрос. Ответы присылайте мне на e-mail с пометкой ответ «Верстальщик – виртуоз»

Если у Вас есть интересная задачка или вопрос для конкурса, присылайте его мне на e-mail с пометкой вопрос «Верстальщик – виртуоз» и, возможно, он будет озвучен в одном из конкурсов со ссылкой на автора.

P.S. Как Вам идея конкурса и награда?
P.P.S Совсем скоро появится первое задание!

Правила игры:

1. Принимаются вопросы исключительно по верстке (html/css) сайтов
2. Если я отвечаю на Ваш вопрос правильно, Вы - проиграли
3. Если я не нахожу ответ, а он у Вас есть, я признаю свой проигрыш
4. Если ответа нет ни у меня, ни у Вас, любой желающий может ответить на вопрос и выиграть ставку (50% мои, 50% того, кто задавал вопрос)
5. Цена вопроса соответствует дате, когда он был задан
6. Ответ должен быть дан не позднее, чем через 2 дня после написания вопроса
7. Один человек может задать не более 1-го вопроса в день
8. Необходимо очень четко формулировать задачу, с возможностью конкретного ответа на нее
9. Обязательно оставлять правильный e-mail, по которому можно с Вами связаться
10. В день отвечаю не более, чем на три вопроса. Если вопросов задали больше, они переносятся на следующий день с новыми ставками

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

ps. Оплату в случае проигрыша со своей стороны гарантирую, оплата с Вашей стороны остается на Вашей совести.
pps. Вопросы типа “Как сверстать такой сайт” не принимаются.

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

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

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

Открываю тендер на самый красивый, сложный, интересный дизайн для блочной верстки сайта.

Присылайте заявки на почту с пометкой БЕСПЛАТНО. Тот дизайн, который мне понравится больше всего, в котором я смогу применить наибольшее количество интересных, оригинальных технологий html/css верстки, я выберу в качестве примера к своей статье и сверстаю совершенно бесплатно.

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

Спешите! Макеты принимаются до 31 декабря.

Требования к макету:

1. красивый. Желательно web 2.0
2. сложный. Желательно резиновый
3. шинина - 1000px, если резина - еще 1600px
4. формат файла - .psd

p.s. верстаю одну страницу, а не весь сайт в 30 шаблонов :)

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

С 1 по 31 декабря - я отвечу на все Ваши вопросы, помогу решить косяки и баги совершенно бесплатно.

Наворот 2 - универсальная ширина пунктов меню

Наворот 3 - универсальный активный пункт меню

Первый наворот

- Создаем маркированный список <ul></ul> и обнуляем отступы.

- Пункты меню <li></li> располагаем в ряд при помощи свойства float:left

- Прописываем для пунктов меню фоновую картинку разделителя через background-image и прижимаем ее к левому краю

- Смещаем пункты влево на ширину равную ширине картинки-разделителя через margin-left

- Прячем разделитель у первого пункта меню через свойство overflow:hidden для списка

Этим приемом можно пользоваться не только для верстки горизонтального меню, но и вертикального. Так же он поможет, если необходимо разделить между собой блоки на странице (новости, статьи, комментарии и др. )

Второй наворот

- Ширину для пунктов меню не задаем, задаем только внутренний отступ при помощи свойства padding. Поскольку для li мы задали float;left, то в правильных браузерах пункты разместятся в ряд друг за другом, как мы того и хотим.

- Для IE6 прописываем хак (width: 1%), чтобы пункты не растягивались по всей ширине списка.

Третий наворот

- Выделяем активный пункт меню фоновой картинкой, которая будет расширяться-сужаться в зависимости от ширины пункта меню. Для этого делаем 2 картинки: левую широкую и правую узкую.

- Вставляем span в пункт меню, чтобы получилась следующая конструкция <li><span><a>…</a></span></li>

- Для li прописываем фоном широкую картинку, а для span - узкую.

- Чтобы активный пункт перекрывал разделители соседних пунктов меню, делаем для него относительное позиционирование position:relative

Простое меню с “наворотами” готово!

Чтобы страница проходила валидацию, выносим хак в отдельный файл css

1. Делайте правильную оценку стоимости и сроков.

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

2. Делайте качественную верстку.

Будь это одна простая html страничка, либо большая социальная сеть из 50-ти шаблонов, всегда выкладывайтесь по полной. Не надо гнаться за прибылью, надо гнаться за повышением своего профессионального уровня. Профессиональные работы в портфолио будут работать на Вас и привлекать новых заказчиков. Между портфолио и заказами существует прямая зависимость: чем лучше работы в портфолио, тем серьезнее к Вам относится заказчик, проекты на верстку становятся интереснее и оплата ваших услуг соответственно растет.

3. Делайте работу с Вами удобной для заказчика.

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

Соблюдайте эти 3 правила, и Вы забудете, что когда-то просиживали днями без заказов. Конечно, вначале сложно определить точные сроки верстки и цену на нее, делать любые задачи по верстке безупречно правильно и выполнять все капризы заказчика. А кто сказал, что будет просто?! Как говорится, тяжело в учении - легко в бою ;)