Верстка div. Две ошибки верстки.

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

Макет {JPEG} Вот внешний вид макета (нажмите, что бы увеличить). Нет ничего особенного и особо сложного. Большая картинка - флеш анимация, будет вставляться динамически при помощи swfObject. Под ней - вывод всех языковых версий сайта. В макете их всего 3 языка.

Справа от флешки мы выводим разделы сайта, их всего 4.

Естественно, что макет верстается для того, что бы потом повесить его на CMS, о чем заранее сообщается верстальщику.

Ошибка №1. Не думаем о будущем.

Связана она с выводом языков под флешкой.
HTML код

<div class="lang">
        <ul>
        <li><a href="" title="">english</a></li>
        <li><a href="" title="">italiano</a></li>
        <li><a href="" title="">francais</a></li>
        </ul>
</div>

CSS код

.lang{ float:left; width:200px; margin:0 0 0 20px; display:inline; font-size:14px;}
.lang ul li{ float:left; margin-right:15px; display:inline}
.lang ul li a{        color: #ffffff; font-weight: normal;}
.lang ul li a:hover{ text-decoration:underline}       

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

Все очень просто - ширина <div class="lang"> жестко задана, она и должна быть жестко задана, иначе после добавления 10го языка макет будет выглядеть совсем уже плохо. Но ширина дива должна быть не более ширины нашего флеш ролика, т.е. width:400px;

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

Ошибка №2. Вообще не думаем.

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

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

<div class="menu">
        <div class="menuTopBlock">
                <div class="siteWeb">
                <a href="" title="">site web</a>
                <a href="" title=""><img src="images/img1-1.jpg" /></a>
                </div>
                <div class="supportDuSite">
                <a href="" title="">support du site</a>
                <a href="" title=""><img src="images/img2.jpg" /></a>
                </div>
        </div>
        <div class="menuBottomBlock">
                <div class="valeur">
                <a href="" title="">valeur</a>
                <a href="" title=""><img src="images/img3.jpg" /></a>
                </div>
                <div class="contact">
                <a href="" title="">contact</a>
                <a href="" title=""><img src="images/img4.jpg" /></a>
                </div>
        </div>
</div>

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

Выводы

Их всего три

  1. Если элементы идентичны на макете, они должны быть идентичны в верстке. Исключения бывают, но не столь часто, как пробуют их сверстать.
  2. Списки всегда надо верстать на максимально возможную по макету длину или ширину
  3. Всего предусмотреть невозможно, и если не думать на шаг, два, три вперед, то в конце концов получится лажа.

А верстальщика мы уволили. Это был его 7 макет и стало понятно, что думать человек не умеет или не хочет.