Таким образом благодаря SEO верстке мы добились, чтобы в нашем коде наши блоки шли в соответствие с нумерацией на рисунке и, заметьте, не внесли ни одного визуального изменения в html-страницу: SEO верстка Проверено: IE6/7, FF3, Safari3, Chrome. Теперь о подводных камнях данного метода: В принципе для wrappera можно было оставить способ позиционирования при помощи margin: 0 auto и позиционировать абсолютно только header, но в таком случае, если ширина main-column+sidebar будет нечетной, то мы обязательно столкнемся с однопиксельным сдвигом в различных браузерах, исправлять который нужно будет через хаки, а это не очень хорошо. header теперь у нас на странице загружается в последнюю очередь, а значит, пользователь не сможет быстро спрыгнуть по меню, если оно расположено в header’e, не дожидаясь окончательной загрузки страницы. Я бы сказал, что для блога это весомый +! Пусть себе читает мои статьи, пока меню догрузится) Правда также и от браузера зависит, так как рендеринг в некоторых идет последовательно, а в других – только после окончательного расчета и загрузки страницы. Самый важный здесь недостаток заключается в том, что footer у нас теперь всегда ограничен шириной sidebar+main-column, что очень неудобно, если, например, предполагается, что хедер и футер должны тянуться на всю ширину страницы, а sidebar и main-column – быть фиксированной ширины по центру. В таком случае от данного типа верстки можно отказаться, либо же попробовать спозиционировать абсолютно только хедер, а все остальное выравнивать по центру через margin: 0 auto; Маленьким неудобством является также и то, что footer грузится все-таки раньше header’a, как бы нам не хотелось обратного. При таком раскладе layout’a наш footer всегда должен идти сразу за контентом и сайдбаром, чтобы те его толкали, когда их высота увеличивается. У абсолютного способа позиционирования вообще есть один очень непримечательный недостаток, о котором опять же в следующих статьях. А пока что я предлагаю вам найти его самим! Предположения высказывайте в комментариях. http://blogto4ka. ru Если вам понравилась моя статья, пожалуйста, сделайте ее ретвит!
Понравилась статья? Получай обновления и будь всегда в курсе событий!