Тема сегодняшнего поста является весьма актуальной как для рядовых веб-мастеров, так и для веб-мастеров с СЕОшным уклоном. Более того, поскольку верстка сайтов с недавнего времени для меня является основным родом деятельности, то это и моя самая любимая тема. О том и поговорим. Поскольку вопросы оптимизации ...
Довольно часто при верстке создается необходимость расположить изображение слева от текста таким образом, чтобы текст находился справа от изображения и не сворачивал под него, т. е. должно это выглядеть вот так: Алеаединица, в первом приближении, ...
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что «пинок» получил от трех человек. 1) Читайте блоги специалистов в данной сфере. Хотя уже и не так ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
Комментарии (87)
Если использовать хаки в єтом процессе есть один минус, в следующих версиях браузеров эти хаки могут быть исправлены, тогда при каждом выходе новой версии браузера прийдется переделывать CSS сайта, а если сайт не один, а 100, вот тогда это будет сполшной гемор.
С момента публикации прошло 2 года, а главная проблема, о которой почему-то никак не упомянается, осталась актуальной и по сей день. Основа дивной верстки — CSS, всё верно. Только вот CSS до сих пор не имеет нормальной и одинаковой интерпритации в разных браузерах. Да что там говорить — некоторые браузеры CSS 2 до сих пор с горем пополам понимают, а W3C уже на CSS3 замахнулись.
Я не видел ни одного «дивного» сайта (в отличии от табличных), который абсолютно одинаково выглядел бы во всех браузерах: То есть сайт может красиво смотреться во всех браузерах, но не одинаково. Конечно, можно пичкать CSS всё новыми и новыми хаками, дополнительными параметрами и исправлениями. В итоге мы имеем настолько запутанный CSS файл, что без бутылки не разберешься…
«agita»
Согласен!
Те, кто кричали, что «порядок — это еще один нолик в числе», правы. А те, что кричали «на два порядка это в 100 раз» — мудаки, пытающиеся вые%нуться. Не стоит забывать, что существует и 2ичная система счисления, для которой «на 2 порядка» означает в 4 раза, что в общем-то и наблюдается. Не следует приковыриваться к словам, если САМИ НЕ ЗНАЕТЕ О ЧЕМ ГОВОРИТЕ!
Автору респект!
Спасибо, давно думал перейти на ДИВ…
После этой статейки, это сделаю :)
Как сделать верстку вида
a b
c d так чтобы получился сдвиг второй строчки:
18.10 FireFox для iPhone появится в ближайшие
пару недель?
Например, так:
Эта величина — 40px — вычисляется опытным путем?
Спасибо, отличная статья.
Теперь только DIV использую.
Спасибо, отличная статья.
Но у меня не появляется горизонтальная прокрутка при сжатии броузера
В чем может быть проблема
«На порядок больше» — означает больше в 10 раз.
«На два порядка» — в 100 раз.
Какбэ синоним слова «разряд»… кхм…
Эта величина — 40px — вычисляется опытным путем?
был вопрос о том как сделать СДВИГ слева, и был приведен ПРИМЕР того как это можно сделать, хотя и вопрос и ответ оставляют желать лучшего
ставьте хоть 400 пикселей, хоть 40 000 пикселей, «вычисляется» это лишь теми инструментами, которые вы используете в верстке (в моем случае — блокнот, firebug и pixelperfect) и дизайном, по которому предстоит верстать сайт.
Каков вопрос, таков и ответ =)
ну так именно это я и сказал :)
Что не говори, а таблицы удобны при быстрой верстке в визуальном редакторе. Повставлял таблиц и сразу все видно, а с дивами так не покатит :)
Господа, вы забыли упомянуть одну из важнейших (на мой взгляд) особенностей табличной верстки: чтобы отобразить таблицу с содержимым, браузеру надо сначала загрузить ВСЁ её содержимое. Поэтому типичное поведение насыщенного графикой и наворотами табличного сайта для пользователя с dial-up'ом (да-да, таких в России весьма немало на сегодняшний день!) — это показ в течении 1−2-3 минут абсолютно пустой страницы. Значительная часть их просто не дожидается и уходит. А блоки можно расположить сверху вниз по значимости и посетитель сразу увидит основной контент, попозже загрузится меню, и в последнюю очередь — всякие украшательства…
Спасибо за дополнение. Действительно, забыл про это.
Доводилось видеть такое: старается человек, делает совершенно грамотную вёрстку, а в последний момент вставляет всё в «одну-единственную» простую таблицу из двух строк («чтобы подвал к низу прижать…»). И всё. Этим напрочь убиваются все преимущества от правильной вёрстки.
Чтобы подвал к низу прижать:
Полный бред! ВСЕ повторяю для Апачи (индейцев) ВСЕ браузеры умеют рисовать таблицы по мере загрузки. Добро пожаловать в будущее господа СТАРпёры.
DIV — это не плохо, но только полнейший ЛАМО может сказать «Онли DIV фаревор».
Таблицы проектировать ПРОЩЕ чем рассчитывать ДИВы! Сдишь с линейкой и вымеряешь миллиметры.
Да и про вертикальное выравнивание забыли написать? а? в IE супергеморойно через дивы делается вертикальное выравнивание. В некоторых случаях DIV отображается непредсказуемо, в разных браузерах по разному! Таблицы на этом фоне более крассбраузерны, более талерантны!
Да, да, все это конечно верно, но так может высказываться полный ламо, ничего не смыслящий в верстке дивами, да и вообще, мне кажется в верстке.
Знания и опыт побеждают все ваши вертикальные выравнивания и непредсказуемое поведение блоков в разных браузерах, ага :)
Хотя я сам не вижу ничего зазорного в использовании таблиц, но только там, где это оправдано.
div блоками делают лишь некоторые части сайта. полностью верстать сайт блоками долго, а нормальные люди экономят время.
+ таблица красивее и лучше смотрится на сайте…
Некоторые возможности таблиц, например увязывать размеры одних элементов с размерами др. элементов, достаточно востребованны для верстки. Имеет ли смысл эмулировать данные уникальные свойства с помощью блочной верстки?
На мой взгляд, нет.
Страдает визуальная прозрачность кода, которая указывалась, как преимущество блочной верстки. Естественно и времени на создание страницы требуется больше.
Приведу пример.
Я знаю, что Вы, Dimox, работали над проблемой эмуляции одинаковой высоты колонок. Было представлено довольно интересное и нетривиальное решение. Я не сразу понял, что вы использовали большие отступы и границы, в качестве подложки для сайдбаров. Не сомневаюсь, что решение станет еще более интересным, если колонок будет больше.
Сверстать таблицей намного проще, быстрее и доступнее для понимания.
Из всего вышеизложенного не следует, что я являюсь противником блочной верстки, просто, по-моему не стоит так рьяно открещиваться от верстки с помощью таблиц.
У дивов есть свойство разъезжаться и разваливаться.
Например у меня на сайте всё в дивах. Но правая колонка зачастую ломается и съезжает вниз под комментарии (обычно это из-за не закрытой цитаты на верно или большой картинки)
Может кто-то знает как избежать этого?
Кстати если убрать или добавить у меня в html закрывающий или открывающий див, то сайт весь развалиться в прямой смысле.
Спасибо за генератор! Не знал что такие есть, оказалось это то что мне нужно!
С точки зрения веб-бизнеса коммерческих сайтов с CMS — вёрстка div ами убыток чистой воды, нужно иметь верстальщика ну очень выского уровня чтобы не было столько косяков сколько их при вёрстки div ами. В нашей компании запрещено верстатть исключительно div ами. Нужно верстать и div ами и таблицами — всё должно быть оптимально. Все косяки какие были связаны с вёрсткой сайтов за 5 лет, связаны именно с вёрсткой div. Причем если ошибка в табличной верстки — то визуально она небольшая, а если ошибка в div то — весь сайт съезжает. Для коммерческих сайтов, где работать могут несколько человек — верстка div ами — это убыток.
Совершенно согласен Максом. Самый оптимальный вариант с точки зрения бизнеса — общая табличная верстка с применением div’ов для задач сео (вынос контента вверх кода) и «извратов» дизайна, когда дизайнер рисует «красотищу» и его не ипет, как это потом верстать. Когда в работе параллельно штук 5 сайтов + штук 40−50 на поддержке — извращаться в дивами ради непонятной «красоты кода»…
<html>
<head>
<title>$TITLE$</title>
</head>
<body>
<div id="contanier">
<div id="wrap">
<div id="topPick">
<div id="dataBar">
<div id="rssBlock">$RSS_LINK$</div>
</div>
<div id="sidebar">
<div class="menuTable">$SITE_MENU$</div>
</div>
<div id="content">
<div id="logo">$SITE_LOGO$</div>
<div id="textBlock">$BODY$ </div>
</div>
<div id="footer">$POWERED_BY$</div>
</div>
</div>
</div>
</body>
</html>
Да, кода мало. Но представьте, что верстал это один дизайнер, а сегодня он занят и я даю сделать что-то другому. Да он не меньше часа потратит на то, чтобы разобраться что куда и как. А если сайт не такой простой по дизайну, как предложенный вариант?
Мне самому нравятся дивы за то, что гораздо проще позволяют сделать некоторые дизайнерские задумки, скриптовые меню и другие красоты современного инета. Но весь сайт на дивах? И потом ждать с ужасом в какой момент тебе позвонит заказчик и скажет, что у его папы дома на ие4 или 5 сайт весь расколбасило. И заказчику не скажешь, как делают многие «крутые» сайтостроители: «Сайт для просмотра в (список последних браузеров), всем поклонникам ie4,5,6 (иногда умудряются в список добавлять даже нетскейп) идти лесом». Или нанимать отдельного человека, чтобы он сидел и тупо тестировал сайты на всех доступных браузерах…
Но как можно рекламировать то, для чего требуется держать в голове кучу особенностей и знать хаки для всех браузеров. ИМХО, всегда нудно стремиться к золотой середине. И стремление верстать только дивами так же попахивает в данной ситуации безумством, как и вертска таблицами без css (я таких идиотов еще не видел, чтобы не использовали стили).
Я больше программист чем верстальщик, но зачастую приходится и версткой шаблонов заниматься. Когда времени в обрез пользуюсь комбинированной версткой, при этом затрачивается минимум времени на приведение шаблона в рабочее состояние. Но если попадается слишком умный клиент которому вынь да положь макет в дивной верстки приходится из мудряться, выискивать хаки, а если совсем трудно применять яваскрипты.
Вот-вот. У меня в последнее время именно такие «умные» клиенты и попадаются. Причем считают верстку дивами «прогрессивной технологией» :). Особенно мне «нравится», когда просят такую верстку, да чтоб работала на самых старых браузерах. Плюс учесть возможность того, что у юзверя могут быть отключены яваскрипты.
ну и где статья?
вы прям как К.О. рассказали самое очевидное и накидали непрямых ссылок (нетематических)
странно что вашу страницу выдало в гугле одной из первых =(