CSS-верстка. Почему все расползается и как с этим бороться
В этой статье обсуждаются проблемы CSS-верстки, или как ее называют
DIV-ной(верстки слоями). Предполагается что с самим понятием вы уже знакомы, и
владеете как html так и css. Идея отличная, css-файл кэшируется, сама верстка
занимает мало места, да и дизайн хорошо отделяется от содержимого, нет этих
громоздких таблиц, и вообще все красиво и радужно, но есть одно НО...
Но: начинающие(и не только) сталкиваются с одной сложностью: вроде все
сверстано правильно, все размеры и границы указаны, а дизайн либо вообще
ломается, либо работает но в разных браузерах отображается по-разному, или в
некоторых работает а в некоторых ломается и расползается куда ни попадя...
Знакомо? Давайте рассмотрим основные причины такого некорректного поведения
ваших страничек в браузерах и заодно я помогу вам с решением этих сложностей:
Неправильно указан или не указан
. А ведь браузер
на него периодически обращает внимание, и по-разному отображает различные
теги в соответствии с ним. Решение: вам в
помощь.
См. также ""
Вы пользуетесь WYSIWYG-редактором
наподобие FrontPage или другого.... Что ж... в 80% случаях, при сложной
верстке, кроссбраузерности вам с таким подходом не видать, особенно если вы
начинающий(не в html и css, а в FrontPage или другом вашем любимом
визивиге). Решение: либо бросить этот редактор и работать с Source-editor`ом(простым
текстовым редактором, ну может быть с подсветкой синтаксиса, и кнопками
вставки определенных тегов...), как настоящие джедаи, либо долго и упорно
изучать сам редактор(html и css знать обязательно в любом случае, хотя бы
общие правила). Дело ваше.
Ваша верстка неправильная. Если в коде куча ошибок, что ж
удивляться неправильному отображению страницы? Набор тегов, их вложенность,
наличие или отсутствие, значение аттрибутов - даже мелочи играют роль. Решение: Проверьте как следует ваш html и css-код на соответствие
стандартам и спецификации объявленной в DOCTYPE. Придется покопаться с
литературой.
Вы использовали в своем css селекторы, которые поддерживаются не
всеми браузерами. Хоть и пришел в нашу жизнь css2, но браузеры так и
остались отсталыми. Один вдруг начал поддерживать одни новые фичи, другой -
другие... И все - разные, и по-разному. Даже если ваш код правильный и
абсолютно валидный, далеко не факт что страничка будет отображаться так как
задумано. Решение:
.
Несоответствие размеров. Пример: вы объявили блок шириной 150px,
а внутрь него пытаетесь поместить блок шириной 200px, или картинку размером
180х180, даже без указания размеров. В результате наш блок раздвигается в
ширину по ширине самого широкого из вложенных в него элементов, сдвигая
соседние блоки в сторону. Если для соседнего блока на странице или в
корневом относительно него блоке не хватает места, он падает вниз, туда где
места больше. И получается что страница разъехалась. Если же не все размеры
указаны явно, то вся конструкция просто раздвинется, но смотреться это будет
все равно некрасиво, и вычислить такую ошибку не очень то просто. Решение: БУДЬТЕ БДИТЕЛЬНЫ! Программных способов борьбы с этим,
насколько я знаю, не существует. Браузер считает что так все и задумано.
Значения по умолчанию. А знаете ли что браузер для каждого
элемента устанавливает свои отступы, границы, межстрочные интервалы и прочие
аттрибуты, которые вы, создавая страницу, возможно считаете равными нулю?
Что ж, знайте. Но это еще не самое страшное. Каждый браузер устанавливает
свои значения по умолчанию для этих аттрибутов, и по-разному их
обрабатывает. Решение: Первым делом нужно сбросить значения основных аттрибутов для
основных блочных тегов и установить свои. Причем сначала именно обнулить: /*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;
}
Уже после чего для каждого элемента устанавливать свои значения. Трудоемко
но дает ощутимый эффект!
Нюансы - прочие мелочи, которые не входят в отдельные пункты
списка и проявляются периодически. Например знаете ли вы что если в конце
строки(в коде) перед переносом строк поставить пробел, даже(и даже
особенно!) между тегами, то пробел будет отображаться на странице?
Пример из жизни: составить DIV-ный шаблон, в котором
шапка из картинок. Все размеры указаны
корректно, объявлен блок по ширине равный сумме ширин картинок, границы и
отступы для картинок в этом блоке убраны в нулевое значение... Расползается!
Пересчитали, проверили в блоке. Вот хоть убей, крайняя вниз лезет! А
оказалось все просто:
<img src="img1.gif">
<img src="img2.gif">
Кстати, этот глюк никак не проявляется в браузере , что лишний раз указывает на то что проверка одним браузером - не
дает полной уверенности в верстке.
Или вот еще: тег <img> ведет себя очень даже некорректно при указании
аттрибута align: если center - он виснет в центре, тут вроде все
правильно. А если указать "left" или "right" - начинает чудить, а именно -
нарушать вложенность тегов. Даже если он вложен в параграф, и аттрибут align
указан для того чтобы текст красиво обтекал картинку, есть нюанс: если
картинка по высоте больше этого текста, то следующий параграф, как
строчный тег будет обтекать эту же картинку. И плевал IE на вложенность
тегов и понятие блочности и строчности. Помогает следующее: добавляем в тег
аттрибут style="display:inline".
Решение: все приходит с опытом... если конечно есть осознание.
Учитесь, практикуйтесь, читайте статьи и книги.
Главное - это не идти на компромисс с ошибками, а добросовестно с ними
бороться и добиваться поставленной задачи. Желаю всем верстальщикам, вебмастерам,
веб-программистам и прочим web-разработчикам безошибочной верстки и успехов во
всех проектах. На в разделе
""
вы возможно найдете и другую информацию, полезную вам.
Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее
Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее
Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее
Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее
Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее
