Таблица vs блоки

[Softlink]

Но покажите пожалуйста нормальный пример на списках или флотах, я хоть посмотрю как это делается. Думаю у вас это минут 15 займет, не больше.

http://jsfiddle.net/UbnDf/

любой из вариантов который был предложен ( табличка, просто картинки, блоки ), в зависимости от задачи, но только не списки.

Говорите о гибкости? Так тогда юзайте блоки а не списки.

Список - как параграф, он для списка, а не для построения странички.

Список здесь тоже возможен. Если это, например, галерея, то это будет список картинок относящийся, допустим, к определенной теме.

стоп стоп, а бордеры где? Они нормально вставятся? их картинкам или пунктам добавлять?

А в целом, клево, мне понравилось, спасибо)

Edited June 21, 2011 by Softlink

[klierik]

img {
display:block;
padding: 2px;

background: #00aa00;
border: 1px solid red;
}

ну к примеру как-то так.

[SelenIT]

Последнее время всё чаще в качестве "теста на семантичность" обращаюсь к дефолтным браузерным стилям. Всё-таки, как сейчас понимаю, не дураки их придумали. Если с отключенными стилями отображение чего-то в столбик с буллетами уместно (обычные меню, с натяжкой — небольшие облака тегов и т.п.), значит, и в коде списки для этого оправданы, если же нет (новости в ленте, картинки в большинстве галерей и т.п.) — то и нечего насиловать природу...

А с бордерами никаких проблем — http://jsfiddle.net/RAYvE/

[Softlink]

img {
display:block;
padding: 2px;

background: #00aa00;
border: 1px solid red;
}

ну к примеру как-то так.

это в плюс к примеру sigma77?

Если да, то тут уже надо ровнять маргинами, ибо бордеры не сливаются.

border-collapse же здесь не работает, правильно?

Edited June 21, 2011 by Softlink

[SelenIT]

border-collapse же здесь не работает, правильно?

Правильно, но никто не заставляет задавать каждой картинке все 4 бордера сразу...

[Softlink]

А с бордерами никаких проблем — http://jsfiddle.net/RAYvE/

ну разница же очевидна Как на рисунке показано, и как у вас.

border-collapse же здесь не работает, правильно?

Правильно, но никто не заставляет задавать каждой картинке все 4 бордера сразу...

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

1)есть отступы между картинками и границей пункта

2) если надо будет добавлять их еще , вы заново будете высчитывать, какому пункту задать бордер, а какому нет?

[SelenIT]

Ну конечно очевидна, это ж чисто пример неограниченности фантазии . Не нравится с бордерами — вот без них...

1)есть отступы между картинками и границей пункта

Упс. Был косячок в Хроме. Исправил (для вариантов как с бордерами, так и без).

Edited June 21, 2011 by SelenIT

[Softlink]

Ну конечно очевидна, это ж чисто пример неограниченности фантазии .

спасибо, конечно, за ваш пример, но он как раз кидает большой минус в карму списков и блоков.

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

Не нравится с бордерами — вот без них...

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

Edited June 21, 2011 by Softlink

[SelenIT]

Списки и блоки-то тут причем? Карма тут испорчена исключительно у межсловных (междутеговых в данном случае) пробелов. У float-ов нет и этой проблемы (есть другая, с выпадением из потока, но это отдельный разговор). А с правильным доктайпом какие-то отступы придется гасить так или иначе: в случае таблиц — горизонтальные, под базовой линией (через display:block или vertical-align для картинок), в случае инлайн-блоков — вертикальные между элементами (при автоматической генерации кода, а галерею редко есть смысл ваять вручную, проще всего физически злополучные убрать пробелы)...

Без рамок шел бы совсем другой разговор. Или не шел бы совсем. Надо же обращать внимание на детали

Честно говоря, я увидел в примере не рамки, а разграничительные линии (?однопиксельные отступы) между картинками, и мой первый пример (тут) как раз это воспроизводил (не считая досадного бага в Хроме). Поэтому я и удивился, когда после зашел разговор о бордерах, и додумал, что нужны еще какие-то бордеры помимо этих разделительных линий... Но за недоразумение извиняюсь

Edited June 21, 2011 by SelenIT

[klierik]

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

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

[Softlink]

отлично. Теперь что мы имеем: word-spacing и letter-spacing вы будете пересчитывать, если вдруг поменяются картинки и станут на несколько пикселей больше? Тоже самое и с шириной родителя

[SelenIT]

word-spacing и letter-spacing вы будете пересчитывать, если вдруг поменяются картинки и станут на несколько пикселей больше?

Нет, word-spacing и letter-spacing привязаны исключительно к font-size предка (ну и к font-family, строго говоря, но для практически всех популярных шрифтов пробел можно считать равным четверти кегля, кроме Верданы — в ней он равен трети). Менять придется только ширину родителя. Но речь-то шла о конкретной ситуации... Да и что сложнее: один раз пересчитать ширину и поправить 1 число, или менять сетку 24?5 в сетку 20?6 в "стене" из 120 картинок?

[mishka]

Списки и блоки-то тут причем? Карма тут испорчена исключительно у межсловных (междутеговых в данном случае) пробелов. У float-ов нет и этой проблемы (есть другая, с выпадением из потока, но это отдельный разговор). А с правильным доктайпом какие-то отступы придется гасить так или иначе: в случае таблиц — горизонтальные, под базовой линией (через display:block или vertical-align для картинок), в случае инлайн-блоков — вертикальные между элементами (при автоматической генерации кода, а галерею редко есть смысл ваять вручную, проще всего физически злополучные убрать пробелы)...

Без рамок шел бы совсем другой разговор. Или не шел бы совсем. Надо же обращать внимание на детали

Честно говоря, я увидел в примере не рамки, а разграничительные линии (?однопиксельные отступы) между картинками, и мой первый пример (тут) как раз это воспроизводил (не считая досадного бага в Хроме). Поэтому я и удивился, когда после зашел разговор о бордерах, и додумал, что нужны еще какие-то бордеры помимо этих разделительных линий... Но за недоразумение извиняюсь

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

Продублирую ТС: "Обращайте внимание на детали"

[Softlink]

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

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

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

Edited June 21, 2011 by Softlink

[mishka]

http://jsfiddle.net/RAYvE/47/

Конечно ширину родителю пришлось прихардкодить.

[SelenIT]

Отступы однопиксельные есть между картинками, но не между картинками и рамкой.

Эх, ну на моем мониторе я четко вижу эти белые полоски и снаружи... неужели оптический обман?

С уточнением, чтоб их не было, получилось почти то же самое, что выше, только на флоутах: http://jsfiddle.net/2hQ9D/6/ (зато обнулять font-size, убивая читаемость alt-текстов для случайно недогрузившихся картинок, не пришлось...)

Кстати, mishka, в чем необходимость display:inline-block для img и отдельного inline для IE6? Разве img-шки не ведут себя как нужно (для этого случая) во всех браузерах (включая IE6-7) по умолчанию? Вроде убрал их — поведение не изменилось...

[Softlink]

ну вот. Вы меня почти убедили.

Давайте теперь проведем корреляцию типа верстки от задачи.

Если мы знаем, что у нас будет 15 картинок в 3 ряда только для их отображения или они будут ссылками. Ничего никогда не изменится, ни размер, ни количество.

Имеет ли смысл в этом случае использовать таблицу?

p.s. Собственно, к чему это я написал. Пока решали между той и той версткой, вы по поводу блоков уже между собой несколько раз поспорили.

Edited June 21, 2011 by Softlink

[mishka]

Кстати, mishka, в чем необходимость display:inline-block для img и отдельного inline для IE6? Разве img-шки не ведут себя как нужно (для этого случая) во всех браузерах (включая IE6-7) по умолчанию? Вроде убрал их — поведение не изменилось...

Да я лишнего поставил, при том что на ие6 вообще не смотрел

Да и рамку эту не отделил от тени, но зато сразу заметил тень и ее учел

[mishka]

ну вот. Вы меня почти убедили.

Давайте теперь проведем корреляцию типа верстки от задачи.

Если мы знаем, что у нас будет 15 картинок в 3 ряда только для их отображения или они будут ссылками. Ничего никогда не изменится, ни размер, ни количество.

Имеет ли смысл в этом случае использовать таблицу?

p.s. Собственно, к чему это я написал. Пока решали между той и той версткой, вы по поводу блоков уже между собой несколько раз поспорили.

Лучше всетаки блоками, так как гибче будет.

В том и прелесть блоков что предоставляет варианты.

[Softlink]

ну вот. Вы меня почти убедили.

Давайте теперь проведем корреляцию типа верстки от задачи.

Если мы знаем, что у нас будет 15 картинок в 3 ряда только для их отображения или они будут ссылками. Ничего никогда не изменится, ни размер, ни количество.

Имеет ли смысл в этом случае использовать таблицу?

p.s. Собственно, к чему это я написал. Пока решали между той и той версткой, вы по поводу блоков уже между собой несколько раз поспорили.

Лучше всетаки блоками, так как гибче будет.

В том и прелесть блоков что предоставляет варианты.

хорошо, это слово было последним)) Хотя я написал, что вариантов никаких не предусмотрено

[SelenIT]

Мои имхи к последнему слову:

1) Если главное — взаимное расположение картинок (выше-ниже, левее-правее), неважно, догрузились они или нет, того размера или нет, а также при большой доле браузеров-динозавров в аудитории и/или вероятности использования верстки в HTML-рассылке — оправдана таблица;

2) Если главное — сами картинки (чтобы юзер смог увидеть их все, даже если зайдет с древнего мобильника с децильным экраном) — заведомо лучше блоки;

3) Если главное — попиксельное совпадение с макетом и точно-точно известно, что тут всегда будут именно эти 15 картинок именно этого размера именно с этой тенью и именно в этом порядке... то не будет ли лучшим вариантом (заведомо железобетонным и кроссбраузерным) так и вырезать их одной картинкой?

[psywalker]

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

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

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

[Softlink]

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

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

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

конечно. Интересная дискуссия получилась. Несколько вариантов реализации было выдвинуто. Кое-какие я слямзил

Попутно даже узнали о багах в хроме.

[psywalker]

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

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

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

конечно. Интересная дискуссия получилась. Несколько вариантов реализации было выдвинуто. Кое-какие я слямзил

Попутно даже узнали о багах в хроме.

Мало того, я бы такие темы ВООБЩЕ запретил бы закрывать, если честно.

[s0rr0w]

Да, ты трезвый, но не смотря на это я всё равно выбираю списки, в связи с тем, что ими потом легче управлять и назначать например паддинги, маргины в ячейках и т.д.

display: inline-block отменили уже?

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

Это называется повзрослел. Держи пять!