Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.15.147.65
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
CSS-верстка. Почему все расползается и как с этим бороться.
Сообщение оставлено 03.07.2010 в 21:57:54 | Сообщение #1
В этой статье обсуждаются проблемы CSS-верстки, или как ее называют DIV-ной(верстки слоями). Предполагается что с самим понятием вы уже знакомы, и владеете как html так и css. Идея отличная, css-файл кэшируется, сама верстка занимает мало места, да и дизайн хорошо отделяется от содержимого, нет этих громоздких таблиц, и вообще все красиво и радужно, но есть одно НО...
Но: начинающие(и не только) сталкиваются с одной сложностью: вроде все сверстано правильно, все размеры и границы указаны, а дизайн либо вообще ломается, либо работает но в разных браузерах отображается по-разному, или в некоторых работает а в некоторых ломается и расползается куда ни попадя...
Знакомо? Давайте рассмотрим основные причины такого некорректного поведения ваших страничек в браузерах и заодно я помогу вам с решением этих сложностей:

Неправильно указан или не указан DOCTYPE. А ведь браузер на него периодически обращает внимание, и по-разному отображает различные теги в соответствии с ним.
Решение: W3C вам в помощь.
См. также "Почему так важен DOCTYPE"

Вы пользуетесь WYSIWYG-редактором наподобие FrontPage или другого.... Что ж... в 80% случаях, при сложной верстке, кроссбраузерности вам с таким подходом не видать, особенно если вы начинающий(не в html и css, а в FrontPage или другом вашем любимом визивиге).

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

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

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

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

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

Несоответствие размеров. Пример: вы объявили блок шириной 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-ный шаблон, в котором шапка из картинок. Все размеры указаны корректно, объявлен блок по ширине равный сумме ширин картинок, границы и отступы для картинок в этом блоке убраны в нулевое значение... Расползается! Пересчитали, проверили в блоке. Вот хоть убей, крайняя вниз лезет! А оказалось все просто:

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

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

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

 
Мой сайт - http://csbot.ru/ Это решебники,всё для css,всё для соц.сети Вконтакте, всё для uCoz, цифровые наркотики и многое другое тут ===>http://csbot.ru/
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика