Pull to refresh

Comments 63

Это разве что относится к элементам с текстовым описанием товара, но его ведь можно не весь показывать а обрезать в конце overflow:hidden (+ затенение сделать).

Такие прыгающие блоки мне кажется не красиво смотрятся. Хотя задачи разные бывают.
Предполагается, что описание везде более-менее одинаковое ±20…30 пикселей, как на скриншоте сайта (если бы там было название в две строки). Резать — не очень хорошо, т.к. в самом низу очень важная кнопка «купить», она обязательно должна отображаться.
Блок разделить на логические части: Название, картинка, описание, цена, купить (порядок по усмотрению). Каждому блоку дать свое расположение и размеры.
Название — максимум 2 строки (обычно хватает), картинка везде одинакового размера (ресайз для всех одинаков), описание режем overflow, цена одной строкой, купить тоже одной строкой.

Если описание и название нужно более информативное, то картинку и описание ставить по бокам.

ИМХО одинаковыми блоками товыры смотрятся более привлекательно.
Вы клиенту попробуйте объяснить, что называть товары можно только короткими строками. Лучше использовать универсальное решение. Тем более, что оно даже без костылей.
Так они прыгают только при ресайзе. Вы не так часто его делаете на одной странице.
Мы не так часто, а Вы не замечали, как работают различные менеджеры, секретарши и прочий гуманитарный народ? Они порой такое вытворяют, что никогда бы не подумал сам это сделать… Вот для них мы и делаем такие сайты… где предусмотрена каждая мелочь!

Лично мне так вообще всех этих дизайнов и украшательств не надо… Это надо для клиента… и клиентов клиента!
И это самое гнусное что секретарша проверяет вашу работу которую вы делали для посетителей сайта, а не конкретно для нее с ее монитором.
Вы не правильно поняли… Секретарша мою работу не проверяет, она ей пользуется… =))

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

И почему мы должны делать работу конкретно для неё и её монитора??
В некоторых «компаниях» сайтом занимаются секретарши.
обычно, те самые секретарши находят довольно забавные баги. причем там куда, или где, «нормальные» люди бы никогда не тыкнули
Во время тестирования надо «тыкать» везде, куда руки дотянутся :)
да, вот если бы у них еще фон тянулся без всяких table-cell…
тут не просто 2 колонки, а еще возможность пустой ячейки. я что то вообще не вижу способа, если честно :-(

Mozilla/5.0 (Windows; U; Windows NT 6.0; ru-RU; rv:1.9.1.4) Gecko/20091016 Firefox/3.5.4 (.NET CLR 3.5.30729)
Это Вы пример на float смотрите. Он как раз иллюстрирует как не надо.
ааа, я просто думал у вас два нормальных решения, на флоатах и инлайнах
Я думаю, что это хорошее решение. Мне сейчас как раз предстоит верстка подобного макета, и я воспользуюсь этим методом.

Сейчас сделал всё на float:left, но это меня не очень устраивает, т.к. макет 3х колоночный и такие плавающие блоки в нем подглючивают.

Это решение, которое предложил dfuse мне очень подходит, чего и всем желаю. Правда подобный вариант я видел и у Артемки Лебедева. Но там немного иначе все.

Молодец, dfuse, спасибо за пост!
Распашенка металлическая порадовала.
Хорошее, годное решение для выкладки товаров и подразделов с непредсказуемыми описаниями/сниппетами.
Затем и создавалось :)
Там еще vertical-align:top; есть, без которого, всё будет не так «красиво»
Спасибо что напомнили, забыл этот момент упомянуть. В комментариях в CSS про это есть.
И да, картинка первая — больше для привлечения внимания %)
Нет, это реальный сайт. Для него и делали собственно :)
нужно было бы подобрать с разношерстным контентом, вот! Что бы было понятно
Сайт еще в разработке… там контента еще не так много, чтоб было из чего выбирать :(
Ну дык :) одним и тем же инструментарием пользуемся :)

margin: 0 24px 20px 0­; — я смотрю Вы решили с пробелами не заморачиваться ))) те же 4 пикселя
Гармония главнее %)
Вот так натыкаешься на статью иногда и оказывается, что у меня были распашОнки, а у кого-то будут распашЕнки :)
Спасибо за решение :) Ушел переверстывать два макета.
да лан переверстывать — 2 свойства поменять и псевдоэлементы, что поток очищают после каждого ряда стереть
Хотела обратить внимание на эту ошибку, но вы успели раньше :)
На скриншоте какие-то сплошные «РаспАшенки», чего они там пахать должны, непонятна.

У Артемия Лебедева на сайте есть какое-то решение горизонтального выравнивания блоков разной высоты.
Пойду пробовать ваше решение в текущем проекте :)

(это про блоки, а не про распашонки %) )
Хм. Странно: в фф3.6 блоки перемещаются между строчками только когда отпускаешь кнопку мыши. Это так и задумано? Потому что, например, решение с версткой на таблицах дает результат ресайза сразу (тут, естественно, не получится джае перемещать элементы между строчками).
Кстати, не знаете, как подобные вещи сделаны, например, утЯндекса в Фотках?
Хм, в остальных браузерах всё сразу.
Извините. Обознался. Был не прав.
В общем, если ресайзить окошко средствами винды, то браузер видимо ждет отжатия кнопки.
Если ресайзить за правый нижний угол, то все хорошо.
ух! спасибо, буду использовать
а то от нехватки смекалки юзал overflow:hidden
UFO just landed and posted this here
А прикиньте, что будет, если элементов 100 штук, плюс растяг, плюс фильтр :) каждый раз перестраивать JSом? Нет, я лучше вот как здесь :)
если элементов будет 100 штук то лучше всё таки выводить постранично
да я давно использую этот метод
насчёт таблиц и js
images.yandex.ru
То, что я увидел на сайте яндекса — не совсем то, что в примере. Там полоска одна, а в примере их много, и элементы могут перемещаться по разным «строкам» при растяге.
на яндексе оно ещё и тянется, а на рамблере просто прыгает.

Влюбом случае с js можно организовать красивее. при inline-block можно выставить ширину блоков в процентах и менять её в зависимости от ширины обёртки.
Для борьбы с пробелами измеряем его ширину — получается 4px, а это 25% от 1em, который по-умолчанию равен 16px. Таким образом контейнеру ставим word-spacing:-0.25em, а блокам word-spacing:normal

А не проще задать font-size:0 для общего контейнера потока? Тогда пробелы даже если они просто станут не видны
Это, конечно, способ, но фишка в том, что word-spacing можно вернуть к нормальному просто присвоив normal, а вот размер шрифта обратно восстановить не получится, а он должен наследоваться прозрачно.
выложите полный код примера у себя! пожалуйста
Я Вас не совсем понял — пример test.nimax.ru/blocks/ чем не устраивает? Насчет полноты — все файлы доступны, все можно посмотреть. Там CSS вполне прозрачно подключен.
Для Firefox есть отличные дополнения для получения/изучения такого рода инфы:
Web Developer, ну и обязательно для дева — FireBug.
Не в тему, но про войну. А для чего врапперы делаются? Часто их замечаю но не вижу практического смысла. Расскажите, а?
Ну например, чтобы сделать паддинг в блоке, при этом не раскукожив макет. То есть если у вас блок шириной 200 пикселей и ему надо задать паддинг по 20 пикселей с краев, то блок станет занимать 240 пикселей. Для этого в блок вкладывается еще один блок, и уже ему прописываются паддинги.
круто :) я прозрел :)
В данном случае — есть внешний div, которому придается все оформление целого блока — padding и все прочее, а также overflow:hidden, чтобы ничего наружу не торчало. Есть внутренний div, которому дается отрицательный margin, чтобы компенсировать зазоры между блоками. У самих блоков зазор выставлен через margin.
По опыту использования такого способа, word-spacing должен быть -0.3em, а не 0.25, а с переходом на мак обнаружил что для сафари нужен и того -0.35 (к счастью, 0.35 не портит картину в остальных браузерах, поэтому можно обойтись без хаков и сразу задавать нужное значение).
Ок, проверяем. test.nimax.ru/blocks/em.html — будет несколько алертов, «размер шрифта — размер пробела», рекомендую заглянуть в код — там все говорит за себя. Если что-то будет не так — сообщите, но у меня ровно четверть.
если говорить с точки зрения визуального восприятия, то выглядит это отвратительно. на мой взгляд гораздо лучше будет зафиксировать высоту блоков и напрячь программистов, чтобы те сделали обрезание текста.
Если Вы смотрите на примеры — там специально такие дыры, чтобы наглядно показать суть проблемы. Предполагается, что больше чем на 50 пикселей плашки товаров отличаться не будут. А что касается обрезания — это самый топорный способ, и он совершенно никуда не годится.

Попробуйте потом объяснить клиенту, почему у него при вводе названия на 2 строки пропала ссылка «купить». Нельзя ничего обрезать — нужна гибкость.
Only those users with full accounts are able to leave comments. Log in, please.