7 наиболее распространенных ошибок верстки сайтов
При верстке сайта практически у каждого вебмастера возникают ошибки. Причем случаются они как у опытных, так и у начинающих.
Все ошибки верстальщика можно разделить на ошибки по невнимательности (чаще всего) и ошибки по незнанию.
Из собственного опыта и из писем читателей я собрал семь наиболее частых ошибок верстки сайтов.
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 вроде WordPress. Там части страницы, такие как шапка, подвал или сайдбар, разнесены по разным файлам, и потеря закрывающего </div> случается сплошь и рядом.
2. Имена файлов на кириллице
Да, некоторые браузеры понимают такие имена, но далеко не все и не во всех случаях. Наиболее частой ошибкой является задание для картинок в качестве имен русских слов, да еще и с пробелами, точко-запятыми и прочими значками. Например:
Степа Питерский.jpg // ошибка, пробел между словами
Степа;Питерский.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
В отличие от других ошибок, эта напасть практически не отражается на внешнем виде страницы. Однако является типичной ошибкой вебмастера, увлеченного дивами.
Дивы — это не восточные красавицы в шелковых трико и топлесс. DIV — это функциональный блок. Им может быть, например, контейнер со всем сайтом сразу, блок шапки, блок подвала и т.п.
Нет смысла оформлять этим тэгом все подряд: все абзацы текста, каждую картинку, каждый список наконец. Это все равно, что стрелять из пушки по комарам.
Для абзацев есть свой тэг — р, а для картинок img. Если есть необходимость задать конкретному куску текста или конкретной картинке определенные свойства, отличные от других, то их можно приписать к уже существующим тэгам абзаца или картинки в виде класса:
<p class=""></p>
<img class="" src="" alt="" />
Или, например, возьмем обычный маркированный список. Часто можно наблюдать такую картину:
<div id="members">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
То есть, очередной излишний div, когда совершенно очевидно, что идентификатор id="members" можно смело задать самому тэгу списка — ul:
<ul id="members">
<li></li>
<li></li>
<li></li>
</ul>
Тем самым избавляемся от лишнего «дива».
6. Единицы измерения
Очень часто в листе стилей CSS забывают проставить единицы, в которых задается размер. Например:
неправильно:
width: 100;
font-size: 12;
правильно:
width: 100px;
font-size: 12px;
7. Путаница классов и идентификаторов
Речь идет о том, что зачастую в файле CSS для блока пишут правила как для класса, например .header, а в коде страницы его прописывают как для #header.
.header {…}
но в странице:
<div id="header">…</div>
Понятно, что при этом стили не будут работать, так как они определены для того, чего нет. Эта ошибка чаще всего возникает от невнимательности.
Есть и еще довольно распространенная ошибка, когда в коде страницы прописывают несколько блоков с одинаковыми идентификаторами:
<img id="thumb" … />
<img id="thumb" … />
<img id="thumb" … />
Запомните хорошенько! В коде одной страницы НЕ МОЖЕТ БЫТЬ ОДИНАКОВЫХ ИДЕНТИФИКАТОРОВ!
И неважно, что некоторые браузеры явно халтурят и пропускают такие перлы. Это ошибка.
Если нужно задать одинаковые правила для нескольких блоков, то применяют классы — class. А id — это указатель на уникальный, единственный в своем роде блок.
Удачи вам! И не бойтесь ошибок, они случаются у всех, даже у гуру.
