Websovet - блочная верстка веб сайтов, HTML, CSS, jQuery и WordPress

29.11.2008 | Рубрики: Верстка
Тэги: Верстка, ошибки верстки

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

1. Вложенность тэгов. Чаще всего возникает по незнанию основ блочной верстки. Да, она — верстка — сильно похожа на конструктор, где из кубиков (блоков) собирается сайт. Но основная суть такой конструкции — не собрать в кучу массу кубиков как попало, а уложить их по принципу “меньшее в большем”. То есть, у каждого блока есть начало (открывающий тэг) и конец (закрывающий тэг). И если, например, нам нужно уложить шапку сайта в общий контейнер, то мы пишем в коде таким образом:

<div id="container">
<div id="header"> </div>
</div>

Видно, что блок шапки находится внутри контейнера. Но! Если записать так:

<div id="container"> </div>
<div id="header"> </div>

то получится, что шапка лежит вне контейнера.

То же самое касается не блочных, а линейных элементов. Чтобы, например, выделить в тексте абзаца ссылку, необходимо соблюсти следующую вложенность:

<p><a href=""></a></p>

но не так:

<p><a href=""></p></a>

Образно говоря, должно соблюдаться правило abba, но не abab. На деле же часто случается так, что вложенность просто не соблюдается, либо забывают записать какой-то из закрывающих тэгов. Особенно часто это случается при верстке шаблонов для какой-либо CMS вроде Вордпресса. Там части страницы, такие как шапка, подвал или сайдбары, разнесены по разным файлам, и потеря закрывающего </div> случается сплошь и рядом.

2. Имена файлов на кириллице. Да, некоторые браузеры понимают такие имена, но далеко не все и не во всех случаях. Наиболее частой ошибкой является задание для картинок в качестве имен русских слов, да еще и с пробелами, точко-запятыми и прочими значками. Например:

Степа Питерский.jpg
Степа_Питерский.jpg
Степа;Питерский.jpg
Stepa Pitersky.jpg
Stepa Pitersky . jpg
и т.п.

Чтобы не заморачиваться в будущем, пишите всегда имена на латинице, мелкими буквами и лучше покороче:

stpitersky.jpg

3. Не отображается фон в IE. Я уже не один раз рассказывал об этой ошибке. Возникает она по той простой причине, что браузер IE очень привередлив по части адресации в файле CSS. Если мы там задаем в качестве фона какую-либо картинку без повторов, то обязательно должны поставить пробел после адреса рисунка:

правильно — background: url(images/bg.gif) no-repeat;

неправильно — background: url(images/bg.gif)no-repeat;

Обратите внимание: после закрывающей скобки обязательно должен быть пробел!

4. Потеря фигурных скобок. В файле CSS, как известно, каждый набор правил взят в фигурные скобки. Чем больше файл, тем больше этих скобок. Не ровен час и потеряться можно. Так и теряют! Особенно, если пишут код не самостоятельно, а выдирают кусками из чужих листов стилей. То же самое можно сказать и в отношении двоеточий, “решетки”, точки и точки-с-запятой. В некоторых браузерах такая потеря порой не заметна, а в других все рушится.

5. Массовые “дивы”. В отличие от вышеприведенных ошибок, эта напасть практически не отражается на внешнем виде страницы. Однако является типичной ошибкой вебмастера-увлеченного-дивами. Дивы — это не восточные красавицы в шелковых трико и топлесс. DIV — функциональный блок. Им может быть, например, контейнер со всем сайтом сразу, блок шапки, блок подвала и т.п. Нет смысла оформлять этим тэгом все подряд: все абзацы текста, каждую картинку, каждый список наконец. Это все равно, что стрелять из пушки по комарам. Для абзацев есть свой тэг — р, а для картинок img. Если есть необходимость задать конкретному куску текста или конкретной картинке определенные свойства, отличные от других, то их можно приписать к уже существующим тэгам абзаца или картинки в виде класса:

<p class=""></p>
<img class="" src="" alt="" />

Или, например, список. Часто можно наблюдать такую картину:

<div id="members">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Когда совершенно очевидно, что идентификатор id=”members” можно смело задать самому тэгу списка — ul:

<ul id="members">
<li></li>
<li></li>
<li></li>
</ul>

Тем самым избавляемся от лишнего “дива”.

Также нет смысла кроить большую картинку макета сайта и городить такую вот конструкцию:

<div id="verh"></div>
<div id="seredina"></div>
<div id="niz"></div>

а в файле CSS прописывать, соответственно, правила для “верха”, “середины” и “низа”. Не мельчите! Пусть будет одна большая картинка при меньшем количестве “дивов”.

6. Единицы измерения. Очень часто в листе стилей CSS забывают проставить единицы, в которых задается размер. Например:

неправильно:

width: 100;
font-size: 12;

правильно:

width: 100px;
font-size: 12px;

7. Путаница классов и идентификаторов. Речь идет о том, что зачастую в файле CSS для блока пишут правила как для класса (например, .header), а в коде страницы прописывают как для селектора (#header). То есть, в CSS:

.header {…}

но в странице:

<div id="header">…</div>

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

Есть и еще довольно распространенная ошибка, когда в коде страницы прописывают несколько блоков с одинаковыми идентификаторами:

<img id="floatleft" … />
<img id="floatleft" … />
<img id="floatleft" … />

Запомните хорошенько! В коде одной страницы НЕ МОЖЕТ БЫТЬ ОДИНАКОВЫХ ИДЕНТИФИКАТОРОВ! И неважно, что некоторые браузеры явно халтурят и пропускают такие перлы. Это ошибка. Если нужно задать одинаковые правила для нескольких блоков, то применяют классы — class. А id — это указатель на уникальный, единственный в своем роде блок.

Вебсовет