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

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

Удачи вам! И не бойтесь ошибок, они случаются у всех, даже у гуру.

Похожие записи:

Оставить комментарий: