Вёрстка

блин, не дописал.

я вот верстаю смешаной версткой, и не понимаю желание все вот сделать дивами ) зачем? )

ок, давай для сравнения, код под блок тумб в CSS для сиджа

Код:

<div class="cat">Top rated</div> <div class="bloc"> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> <a target="_blank" href="/"><img src="img/1.jpg"></a> </div> <div class="book"><a href="/">Bookmarks us</a></div>

и код под тотже блок только табами (взял с выше поста)

Код:

<table id="Table_01" width="970" height="491" border="0" cellpadding="0" cellspacing="0">    <tr>       <td>          <img src="images/index_01.jpg" width="289" height="150" alt=""></td>       <td>          <img src="images/index_02.jpg" width="196" height="150" alt=""></td>       <td>          <img src="images/index_03.jpg" width="215" height="150" alt=""></td>       <td>          <img src="images/index_04.jpg" width="270" height="150" alt=""></td>    </tr>    <tr>       <td>          <img src="images/index_05.jpg" width="289" height="116" alt=""></td>       <td>          <img src="images/index_06.jpg" width="196" height="116" alt=""></td>       <td>          <img src="images/index_07.jpg" width="215" height="116" alt=""></td>       <td>          <img src="images/index_08.jpg" width="270" height="116" alt=""></td>    </tr>    <tr>       <td>          <img src="images/index_09.jpg" width="289" height="168" alt=""></td>       <td>          <img src="images/index_10.jpg" width="196" height="168" alt=""></td>       <td>          <img src="images/index_11.jpg" width="215" height="168" alt=""></td>       <td>          <img src="images/index_12.jpg" width="270" height="168" alt=""></td>    </tr>    <tr>       <td>          <img src="images/index_13.jpg" width="289" height="57" alt=""></td>       <td colspan="2">          <img src="images/index_14.gif" width="411" height="57" alt=""></td>       <td>          <img src="images/index_15.jpg" width="270" height="57" alt=""></td>    </tr> </table>

разве разница не чувствуется?

<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
</tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
</tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
<td><a href="$"><img src="$" class="th"></a></td>
</tr>
</table>

давай сравнивать ) чем хуже?

добавил:

1) при загрузке, ничо никуда не ползет
2) если делать отдельными таблами, разница в скорости загрузки имхо вообще не чувствуется
3) в стилях прописать можно вообще все о тумбах и прочем.

если можно, конкретный пример плиз, ПОЧЕМУ, лучше дивами. кроме сомнительной красоты кода?

1 аналогично не полезет
2 код меньше и легче для чтения, загрузка хоть на немного но быстрее
3 при верстки меньше заморочек с кодом и меньше вероятность ошибки(опечатки)

кстати код не полный у тебя в сравнении с моим такбы еще больше был и сложнее , нету верхней плашки и нижней с кнопкой букмарк

таки на главный вопрос не хочешь отвечать

давай по загрузке разберем вопрос. юзеру насколько это будет заметно, при одинаковых
1) серваках
2) каналах
3) тумбах

?

3Sky писал:

таки на главный вопрос не хочешь отвечать

Ок, как я считаю это удобней и быстрее в плане верстки, хоть я не знаток CSS но по выше примерам видно разницу, а если уметь верстать как выше отметевшийся Игорр, то табы это вобще времена мушкетеров

Вот к примеру зачем вот столько заморочек-
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><
если это можно указать в стиле типа так
<div class="bloc">
и постоянно этот стиль использовать?

Цитата:

давай по загрузке разберем вопрос. юзеру насколько это будет заметно, при одинаковых 1) серваках 2) каналах 3) тумбах ?

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

это похоже на спор Что лучше Иллюстратор или Корел?

3Sky писал:

это делаеца так, хуй кладеца на верстак.......... режу слайсами, сохраняю, верстаю в дриме, правлю\чищу код. хрен кто меня убедит, что получается хуже чем дивами

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

по мне так лучше делать все дивами как делает igorr:

Я в Армию Чупы запишусь=)

Отвечая 3sky>>
В цсс-дивах гораздо быстрее выходит:
1)писать код
2)разбираться/править вёрстку
3)изменять параметры элементов
4)натягивать на двигло

И это список составил я, любитель-самоучка, в течение минуты-другой..Профессионал продолжит этот список ещё дальше.

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

Дальше - больше.
Вёрстка для профессионала в таблицах/дивах существенной разницы не имеет (например у меня - в дивах даже быстрее гораздо теперь, не вру=))) А на выходе что? Дивы удобочитаемы, гибче, проще. Зачем получать грузный запутанный код при тех же затратах? Правильно, незачем.

Имхо, вопрос стоит не в моде на дивы, а в закоренелой и необоснованной привычке на таблицы и в нашем непрофессионализме. И проблемы с кроссбраузерностью и прочими нюансами у нас не оттого, что дивы гавно, а оттого, что руки пока ещё слабо точены. Ведь таблицы осилит каждый ребёнок, цсс+див - симбиоз уже гораздо-гораздо сложнее.

Как обычно, субъективное, ни на что не претендущее мнение, поправьте ребята, если я где-то неправ.

да собсно спорить я не буду ) смысла нет. один вопрос только. делаем сайты для серферов вроде. им жеж попесды какая верстка? ) иль я не прав? )

думаю, прав
они ж код не видят и даже если увидят не поймут )

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

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

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

Dizman© писал:

В цсс-дивах гораздо быстрее выходит: 2)разбираться/править вёрстку 3)изменять параметры элементов

Чистая неправда. Если ты вдруг получил div-ную верстку от третьего лица, которое не понимает что такое логика в названиях классов и использовании возможностей каскадности - заебешься разбираться\править и изменять параметры элементов. Бывает ОДНО правило изменишь в стиле и вся страница расползлась. Не говоря уже о том, какие приходится применять трики чтобы подружить вертску со всеми основными используемыми браузерами.
Конечно блок тумб или галерку дивами сверстать - разговор ниочем.
Но если у страницы сложный layout - лучше всего смешанная верстка.
Я всегда делаю структуру страницы на таблицах (тоже стараюсь чаще разбивать таблицы и выносить в CSS максимум свойств), а весь контент делаю в контейнерах DIV и P, обвешивая их нужными свойствами.

Leka писал:

Чистая неправда. Если ты вдруг получил div-ную верстку от третьего лица, которое не понимает что такое логика в названиях классов и использовании возможностей каскадности - заебешься разбираться\править и изменять параметры элементов. Бывает ОДНО правило изменишь в стиле и вся страница расползлась. Не говоря уже о том, какие приходится применять трики чтобы подружить вертску со всеми основными используемыми браузерами. Конечно блок тумб или галерку дивами сверстать - разговор ниочем. Но если у страницы сложный layout - лучше всего смешанная верстка. Я всегда делаю структуру страницы на таблицах (тоже стараюсь чаще разбивать таблицы и выносить в CSS максимум свойств), а весь контент делаю в контейнерах DIV и P, обвешивая их нужными свойствами.

+5

Leka писал:

Чистая неправда. Если ты вдруг получил div-ную верстку от третьего лица, которое не понимает что такое логика в названиях классов и использовании возможностей каскадности - заебешься разбираться\править и изменять параметры элементов. Бывает ОДНО правило изменишь в стиле и вся страница расползлась. Не говоря уже о том, какие приходится применять трики чтобы подружить вертску со всеми основными используемыми браузерами. Конечно блок тумб или галерку дивами сверстать - разговор ниочем. Но если у страницы сложный layout - лучше всего смешанная верстка. Я всегда делаю структуру страницы на таблицах (тоже стараюсь чаще разбивать таблицы и выносить в CSS максимум свойств), а весь контент делаю в контейнерах DIV и P, обвешивая их нужными свойствами.

во, пасиба=) я ж писал, что юзаю таблицы в сложных структурах, для базовой разметки, ибо да, бывает очень муторно)

пасиб за мнение.

Petek писал:

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

для увеличения скорости загрузки все пути хороши, и для платника зависимость скорости загрузки к продажам тоже есть и немаленькая (проверено опытом), поэтому оптимизировать нужно все - от сервера до графики на нем, и html тоже

Petek писал:

что, по вашему, тут коряво? ) Код: <table id="Table_01" width="970" height="491" border="0" cellpadding="0" cellspacing="0">    <tr>       <td>          <img src="images/index_01.jpg" width="289" height="150" alt=""></td>       <td>          <img src="images/index_02.jpg" width="196" height="150" alt=""></td>       <td>          <img src="images/index_03.jpg" width="215" height="150" alt=""></td>       <td>          <img src="images/index_04.jpg" width="270" height="150" alt=""></td>    </tr>    <tr>       <td>          <img src="images/index_05.jpg" width="289" height="116" alt=""></td>       <td>          <img src="images/index_06.jpg" width="196" height="116" alt=""></td>       <td>          <img src="images/index_07.jpg" width="215" height="116" alt=""></td>       <td>          <img src="images/index_08.jpg" width="270" height="116" alt=""></td>    </tr>    <tr>       <td>          <img src="images/index_09.jpg" width="289" height="168" alt=""></td>       <td>          <img src="images/index_10.jpg" width="196" height="168" alt=""></td>       <td>          <img src="images/index_11.jpg" width="215" height="168" alt=""></td>       <td>          <img src="images/index_12.jpg" width="270" height="168" alt=""></td>    </tr>    <tr>       <td>          <img src="images/index_13.jpg" width="289" height="57" alt=""></td>       <td colspan="2">          <img src="images/index_14.gif" width="411" height="57" alt=""></td>       <td>          <img src="images/index_15.jpg" width="270" height="57" alt=""></td>    </tr> </table>

жесть
Весь код может быть все лишь в двух строчках
<div id="avs">
</div>
и одной в стилях

#avs {background: url(images/all.jpg); width:970px;height:491px; }
и все графику обрезать одной картинкой, что повысет скорость загрузки сайта на хорошем канале )
итого три строчки

Leka писал:

Но если у страницы сложный layout - лучше всего смешанная верстка.

ни каких проблем нет сверстать любой сложности сайт дивами

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

а вопрос был вообще про то как резать графику в фотожопе)))

AniS писал:

ох вечный спор...дивы или таблицы

да какой вечный? таблица это данные, не структура сайта

Цитата:

да какой вечный?

дык на всех практически форумах по дизайну/верстке обсуждают как же лучше)и до сюда дошло)

Цитата:

таблица это данные, не структура сайта

согласна)

Skat писал:

ни каких проблем нет сверстать любой сложности сайт дивами

В большинстве случаев 100% дивная верстка похожа на домик из спичек. Толкни одну и получишь груду спичек вместо домика.
Пока проблема кроссбраузерности дивной верстки не прекратит решаться через задницу - я мнения не изменю.

И если уж говорить о правильной верстке - нужно начинать хотя бы с типографирования текста. 90% сайтов имеют настолько гениальную типографику что кажется редакторов и авторов учили форматировать тексты на Чукотке

Leka писал:

И если уж говорить о правильной верстке - нужно начинать хотя бы с типографирования текста. 90% сайтов имеют настолько гениальную типографику что кажется редакторов и авторов учили форматировать тексты на Чукотке

всяко
редко кто задумывается именно о типографике, просто валят текст и не парятся, а о том что в некоторых случаях для удобочитаемости нужен не просто пробел, а пробел без переноса например - это мало кого заботит )

по поводу того что гугл лучше индексирует верску дивами - имхо просто миф, посмотрите практически любой сайт с пр7-8... они делались в те времена когда о дивах еще не слышали и я не думай что владельцы кинутся срочно что-то менять. Гугл прежде всего хавает правильную верстку, а уж таблицами или дивами - дело десятое, поэтому верстать надо в чем удобнее и правильнее получается