HTML+CSS+JavaScript

Прошлым летом я заказал верстальщику осуществить верстку страниц для моего сайта, что он и сделал в срок и вполне успешно. Однако у меня до этого сайта дошли руки только сейчас и оказалось, что задание, которое я выдал верстальщику, не волне соответствует моим хотелкам. Попросил его переделать - а он пишет, что занят до конца года…

Дизайн сайта очень сложен, а верстка на Div такая, что я там совершенно ничего не понимаю! Вот решил пока что дизайн упростить, убрав из него всю художественную часть, и попробовать сверстать самостоятельно, чтобы запустить функционал сайта. Типа, разбить пейзаж на кусочки и собрать их вместе таблицей с невидимыми границами. Но в сети пишут, что так нельзя! Что табличная верстка – это каменный век, и что новые версии браузеров этого не любят. А нужна какая-то верстка слоями…

Что, это действительно так?

нет, дивы(слои) более гибкие и намного понятнее что где. Если огромный дизайн на таблице, то там можно запутаться сильно и чтото пропустить.. + таблица покажет свой контент только тогда когда она загрузится ВСЯ.

так что слои вопервых - быстрее показ контента и понятнее и гибче.

таблицу верстать проще и исправлять проще. достаточно добавить границы и все содержимое раскладывается по полочкам. если слоев много и они еще "вложены" друг в друга, надо у каждого делать границу уникального цвета, чтоб понять, где этот слой и что у него внутри. лично я, когда мне дают на исправление сайт, который "играет в эксплорере и не играет в Мозилле", тут же переделываю слои на таблицы. потому что у меня нет времени искать, в чем там ошибка, а на таблицы браузеры одинаково реагируют и всегда будут одинаково реагировать, в отличие от слоев.

браузеры одинаково реагируют и всегда будут одинаково реагировать

В сети есть мнение о том, что поисковики плохо индексируют страницы, сверстанные на основе таблиц. Каково Ваше мнение на сей счет?

ерунда. если таблица в коде, то и ее содержимое индексируется. это если таблица выводится скриптом и в коде изначально не видна, то проблема может возникнуть.

Не в самих таблицах дело, а в количестве кода через которые поисковику продираться придётся. Считается, что блочная вёрстка лаконичнее при прочих равных.

Но, можно и на таблицах неплохо сверстать сайт . Всё зависит от его структуры.

Пожтому, рекомендую не заморачиваться на дивы и верстать как умеете.

Чем проще механизм, тем безотказней он работает. Я тоже за таблицы.

сайт позырить можно?

Пока что на Денвере.

Табличную верстку гораздо проще закроссбраузерить. DIVная верстка очень часто глючит в разных браузерах, что вынуждает прибегать к хакам, причем для каждого браузера - свои хаки. Чего стоит только тот факт, что при указании padding'a приходится уменьшать ширину или высоту div'a на соответствующую величину.

"Недостатки" табличной верстки сильно преувеличены. То, что размер кода при табличной верстке больше, сводится на нет современными скоростями. Поисковику на верстку до лампочки - ему нужен контент страницы, а не ее компоновка. А то, что таблицы долго отображаются, не аргумент - сравните скорость загрузки этого форума со скоростью загрузки хабра

>Чего стоит только тот факт, что при указании padding'a приходится уменьшать ширину или высоту div'a на соответствующую величину.
А что Вас удивляет?

стабильности нет. один браузер считает ширину и высоту дива вместе с границей, другой - без.

Это какой это браузер так считает? По стандарту: размер + внутренний отступ + бордер + внешний отступ.

<style type="text/css"> .d1 {     background-color: #CCCCFF;     height: 200px;     width: 300px;     border: 20px solid #FF0000;     padding: 20px; } .d2 {     background-color: #CCCCFF;     height: 200px;     width: 300px; } </style> <div class="d1"></div> <div class="d2"></div>

Сравните в разных интернет обозревателях.

иногда подобные приемы решают проблемы, т.к могут быть значения по умолчанию разные
* {
margin: 0;
outline: 0;
padding: 0;
}

Вообще не "иногда", а нормальные верстальщики с этого начинают.

некоторые просто верстают не кроссбраузерно

Сравните код:

<div style="background:red;height:200px"></div>

и

<div style="background:red;height:200px;padding:50px"></div>

padding - это отступ границы от содержимого. Содержимое отсутствует. Почему же в этом случае растет высота? Содержимое-то отсутствует. Не знаю, соответствует ли это стандарту, но здравому смыслу - противоречит.

Это противоречит здравому смыслу если пытаться существующие стандарты натягивать на собственные понятия. Если же попытаться осмыслить их (стандарты то бишь), то выясняется что в блочной модели контент первичен, а все остальное - оформление. Поэтому все размеры задаются для контента, а все остальное к нему прибавляется. Так что Ваше height:200px; как раз и есть (сюрприз, сюрприз) высота контента, который, в данном случае, состоит из пустой строки.
Ну как? По прежнему противоречит?:)

Почему тогда таблицы работают иначе?

Потому что таблица это средство структурирования контента, а не средство верстки оформления. То что ее используют для создания дизайна - хак чистой воды.

а раньше почти все так верстали и это считалось модным :)

Нет... не "модным" это считалось, а вообще "единственно возможным".

Поначалу ведь CSS не было. Потому - только "таблицы".

Затем, когда браузеры стали CSS поддерживать, тоже в основном "таблицы", ибо далеко не все браузеры и не сразу стали поддерживать свойство float (а без него при вёрстке - никак).

ну я просто когда учился в технаре на ПОИТ, был этот предмет, года 4 назад. преподша еще тогда говорила что это модно, хотя css уже давным давно были :)

>что при указании padding'a приходится уменьшать ширину или высоту div'a на соответствующую величину.

Я тоже раньше с этим путался, недоумевал, на браузеры списывал. Думал почему у меня ширина дива с бордерами и пэддингами не такая, какую я указал в атрибуте width? А вот прочитал этой осенью от корки до корки умную книжку по CSS. Оказалось все правильно, все по стандарту, все по Основам визуального форматирования. Итоговая ширина блочного элемента равна:

ширина левой рамки + ширина левого отступа (padding) + ширина контента (width) + ширина правого отступа + ширина правого отсупа.

До этого верстал таблицами, сейчас пробую блочную верстку. Особого восторга пока не испытываю.

PS Если не хотите, чтобы рамка (border) влияла на ширину элемента - пользуйтесь контуром (outline), очень хорошая штука для выделения различных элементов, когда верстаешь.

А вот прочитал этой осенью от корки до корки умную книжку по CSS.

А что за книжка?

Каскадные таблицы стилей. Подробное руководство. Эрик А. Мейер.