7 наиболее распространенных ошибок верстки

Дата: 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 — это указатель на уникальный, единственный в своем роде блок.

Вебсовет

Подпишитесь на RSS

Комментарии (12) на запись “7 наиболее распространенных ошибок верстки”

Андрей 29.11.2008 17:46

Классная статья, но больше на новичков расчитана. Я после прочтения твоей книги в этом разобрался.

А вот про баг в IE не знал…..
Игорь Квентор 29.11.2008 19:22

Спасибо! Да, подсказки эти весьма простые. Но часто и опытный вебмастер допускает ошибки по невнимательности. :)
Светлана 29.11.2008 19:42

Спасибо, Игорь! Как всегда, объяснение очень подробное и толковое. Как трудно искать ошибки в своем коде! Конечно, лучше профилактика, чем лечение.
Мне только кажется, ошибок не 7 а больше.
У меня, во всяком случае, кроме названных бывают и другие :)
Игорь Квентор 29.11.2008 20:59

Да, Светлана, ошибок на самом деле больше, но эти наиболее частые. Во всяком случае, именно по ним больше вопросов приходит
angelZ 01.12.2008 09:19

Да,статья для новичков, это точно, но про 3-й пункт я если чесно не знал, и более того никогда не обращал внимания, что такой баг у ИЕ есть.
xpressmusic 08.12.2008 23:36

Полезная статья, спасибо! Некоторые ошибки сам совершал, каюсь!
Евгений Леонидович 09.12.2008 15:24

Ну и что такого что для новичков,что же мы не люди что ли)Зато очень полезнапя,я например вообще никакие пункты не знал,так что большое спасибо что просвятили!
Кликер 12.12.2008 10:45

Я версткой занимаюсь не так давно и постоянно делаю ошибки которые вы описали ! Спасибо за описание их и за помощь в решении их ! В будущем ваша статья мне наверное поможет более эффективно верстать !
Polet 16.12.2008 20:44

Конечно я новичок в HTML однако все понятно и просто. Благодарю за статью.
Судочник 18.12.2008 00:58

Уфф…спасибо большое, попробую учиться на чужих ошибках, хоть сам ещё профан в этом :)
icomm 19.12.2008 15:12

Следует выделить в отдельную категорию ошибки из-за врожденной тупости! :(