Портал для веб-мастера
Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » CSS

CSS-верстка. Почему все расползается и как с этим бороться.
В этой статье обсуждаются проблемы CSS-верстки, или как ее называют DIV-ной(верстки слоями). Предполагается что с самим понятием вы уже знакомы, и владеете как html так и css. Идея отличная, css-файл кэшируется, сама верстка занимает мало места, да и дизайн хорошо отделяется от содержимого, нет этих громоздких таблиц, и вообще все красиво и радужно, но есть одно НО...
Но: начинающие(и не только) сталкиваются с одной сложностью: вроде все сверстано правильно, все размеры и границы указаны, а дизайн либо вообще ломается, либо работает но в разных браузерах отображается по-разному, или в некоторых работает а в некоторых ломается и расползается куда ни попадя...
Знакомо? Давайте рассмотрим основные причины такого некорректного поведения ваших страничек в браузерах и заодно я помогу вам с решением этих сложностей:

  1. Неправильно указан или не указан DOCTYPE. А ведь браузер на него периодически обращает внимание, и по-разному отображает различные теги в соответствии с ним.
    Решение: W3C вам в помощь.
    См. также "Почему так важен DOCTYPE"
  2. Вы пользуетесь WYSIWYG-редактором наподобие FrontPage или другого.... Что ж... в 80% случаях, при сложной верстке, кроссбраузерности вам с таким подходом не видать, особенно если вы начинающий(не в html и css, а в FrontPage или другом вашем любимом визивиге).

    Решение: либо бросить этот редактор и работать с Source-editor`ом(простым текстовым редактором, ну может быть с подсветкой синтаксиса, и кнопками вставки определенных тегов...), как настоящие джедаи, либо долго и упорно изучать сам редактор(html и css знать обязательно в любом случае, хотя бы общие правила). Дело ваше.

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

    Решение: Проверьте как следует ваш html и css-код на соответствие стандартам и спецификации объявленной в DOCTYPE. Придется покопаться с литературой.

  4. Вы использовали в своем css селекторы, которые поддерживаются не всеми браузерами. Хоть и пришел в нашу жизнь css2, но браузеры так и остались отсталыми. Один вдруг начал поддерживать одни новые фичи, другой - другие... И все - разные, и по-разному. Даже если ваш код правильный и абсолютно валидный, далеко не факт что страничка будет отображаться так как задумано.

    Решение: Google вам в помощь.

  5. Несоответствие размеров. Пример: вы объявили блок шириной 150px, а внутрь него пытаетесь поместить блок шириной 200px, или картинку размером 180х180, даже без указания размеров. В результате наш блок раздвигается в ширину по ширине самого широкого из вложенных в него элементов, сдвигая соседние блоки в сторону. Если для соседнего блока на странице или в корневом относительно него блоке не хватает места, он падает вниз, туда где места больше. И получается что страница разъехалась. Если же не все размеры указаны явно, то вся конструкция просто раздвинется, но смотреться это будет все равно некрасиво, и вычислить такую ошибку не очень то просто.

    Решение: БУДЬТЕ БДИТЕЛЬНЫ! Программных способов борьбы с этим, насколько я знаю, не существует. Браузер считает что так все и задумано.

  6. Значения по умолчанию. А знаете ли что браузер для каждого элемента устанавливает свои отступы, границы, межстрочные интервалы и прочие аттрибуты, которые вы, создавая страницу, возможно считаете равными нулю? Что ж, знайте. Но это еще не самое страшное. Каждый браузер устанавливает свои значения по умолчанию для этих аттрибутов, и по-разному их обрабатывает.

    Решение: Первым делом нужно сбросить значения основных аттрибутов для основных блочных тегов и установить свои. Причем сначала именно обнулить:

    /*style.css*/

    html, body, div, p, table, pre, td, tr, th, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, img, blockquote, iframe {

    margin: 0;

    padding: 0;

    border: 0;

    }

    Уже после чего для каждого элемента устанавливать свои значения. Трудоемко но дает ощутимый эффект!

  7. Нюансы - прочие мелочи, которые не входят в отдельные пункты списка и проявляются периодически. Например знаете ли вы что если в конце строки(в коде) перед переносом строк поставить пробел, даже(и даже особенно!) между тегами, то пробел будет отображаться на странице?

    Пример из жизни: составить DIV-ный шаблон, в котором шапка из картинок. Все размеры указаны корректно, объявлен блок по ширине равный сумме ширин картинок, границы и отступы для картинок в этом блоке убраны в нулевое значение... Расползается! Пересчитали, проверили в блоке. Вот хоть убей, крайняя вниз лезет! А оказалось все просто:


     <img src="img1.gif"> 

       <img src="img2.gif">

    Кстати, этот глюк никак не проявляется в браузере Opera, что лишний раз указывает на то что проверка одним браузером - не дает полной уверенности в верстке.

    Или вот еще: тег <img> ведет себя очень даже некорректно при указании аттрибута align: если center - он виснет в центре, тут вроде все правильно. А если указать "left" или "right" - начинает чудить, а именно - нарушать вложенность тегов. Даже если он вложен в параграф, и аттрибут align указан для того чтобы текст красиво обтекал картинку, есть нюанс: если картинка по высоте больше этого текста, то следующий параграф, как строчный тег будет обтекать эту же картинку. И плевал IE на вложенность тегов и понятие блочности и строчности. Помогает следующее: добавляем в тег аттрибут style="display:inline".

    Решение: все приходит с опытом... если конечно есть осознание. Учитесь, практикуйтесь, читайте статьи и книги.


Главное - это не идти на компромисс с ошибками, а добросовестно с ними бороться и добиваться поставленной задачи. Желаю всем верстальщикам, вебмастерам, веб-программистам и прочим web-разработчикам безошибочной верстки и успехов во всех проектах.

Автор: Владимир Большаков · Добавлена: 2007-04-27 · Добавил: Bolzamo
Источник статьи · Просмотров: 6497 · Рейтинг: 4.1

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Ведете ли вы блог?
Всего ответов: 59895
Наша кнопка
WoWeb.ru - портал для веб-мастера