Комментарии 63
Это разве что относится к элементам с текстовым описанием товара, но его ведь можно не весь показывать а обрезать в конце overflow:hidden (+ затенение сделать).
Такие прыгающие блоки мне кажется не красиво смотрятся. Хотя задачи разные бывают.
Такие прыгающие блоки мне кажется не красиво смотрятся. Хотя задачи разные бывают.
Предполагается, что описание везде более-менее одинаковое ±20…30 пикселей, как на скриншоте сайта (если бы там было название в две строки). Резать — не очень хорошо, т.к. в самом низу очень важная кнопка «купить», она обязательно должна отображаться.
Блок разделить на логические части: Название, картинка, описание, цена, купить (порядок по усмотрению). Каждому блоку дать свое расположение и размеры.
Название — максимум 2 строки (обычно хватает), картинка везде одинакового размера (ресайз для всех одинаков), описание режем overflow, цена одной строкой, купить тоже одной строкой.
Если описание и название нужно более информативное, то картинку и описание ставить по бокам.
ИМХО одинаковыми блоками товыры смотрятся более привлекательно.
Название — максимум 2 строки (обычно хватает), картинка везде одинакового размера (ресайз для всех одинаков), описание режем overflow, цена одной строкой, купить тоже одной строкой.
Если описание и название нужно более информативное, то картинку и описание ставить по бокам.
ИМХО одинаковыми блоками товыры смотрятся более привлекательно.
Так они прыгают только при ресайзе. Вы не так часто его делаете на одной странице.
Мы не так часто, а Вы не замечали, как работают различные менеджеры, секретарши и прочий гуманитарный народ? Они порой такое вытворяют, что никогда бы не подумал сам это сделать… Вот для них мы и делаем такие сайты… где предусмотрена каждая мелочь!
Лично мне так вообще всех этих дизайнов и украшательств не надо… Это надо для клиента… и клиентов клиента!
Лично мне так вообще всех этих дизайнов и украшательств не надо… Это надо для клиента… и клиентов клиента!
И это самое гнусное что секретарша проверяет вашу работу которую вы делали для посетителей сайта, а не конкретно для нее с ее монитором.
Вы не правильно поняли… Секретарша мою работу не проверяет, она ей пользуется… =))
Да и не вижу ничего гнусного в том, чтобы попросить секретаршу потестировать юзабилити сайта… но это уже скорее вопросы к дизайнеру, а не к программисту или верстаку!
И почему мы должны делать работу конкретно для неё и её монитора??
Да и не вижу ничего гнусного в том, чтобы попросить секретаршу потестировать юзабилити сайта… но это уже скорее вопросы к дизайнеру, а не к программисту или верстаку!
И почему мы должны делать работу конкретно для неё и её монитора??
обычно, те самые секретарши находят довольно забавные баги. причем там куда, или где, «нормальные» люди бы никогда не тыкнули
да, вот если бы у них еще фон тянулся без всяких table-cell…
Да, в данный момент как раз над этим и размышляю. Кроссбраузерно сделать будет похоже непросто — я помню, насколько тяжелое решение для двух-то колонок chikuyonok.ru/2009/06/float-columns/ и habrahabr.ru/blogs/webdev/62205/
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:left, но это меня не очень устраивает, т.к. макет 3х колоночный и такие плавающие блоки в нем подглючивают.
Это решение, которое предложил dfuse мне очень подходит, чего и всем желаю. Правда подобный вариант я видел и у Артемки Лебедева. Но там немного иначе все.
Молодец, dfuse, спасибо за пост!
Сейчас сделал всё на float:left, но это меня не очень устраивает, т.к. макет 3х колоночный и такие плавающие блоки в нем подглючивают.
Это решение, которое предложил dfuse мне очень подходит, чего и всем желаю. Правда подобный вариант я видел и у Артемки Лебедева. Но там немного иначе все.
Молодец, dfuse, спасибо за пост!
Распашенка металлическая порадовала.
Хорошее, годное решение для выкладки товаров и подразделов с непредсказуемыми описаниями/сниппетами.
Там еще vertical-align:top; есть, без которого, всё будет не так «красиво»
Вот так натыкаешься на статью иногда и оказывается, что у меня были распашОнки, а у кого-то будут распашЕнки :)
Спасибо за решение :) Ушел переверстывать два макета.
Спасибо за решение :) Ушел переверстывать два макета.
чОрт :)))
да лан переверстывать — 2 свойства поменять и псевдоэлементы, что поток очищают после каждого ряда стереть
Хотела обратить внимание на эту ошибку, но вы успели раньше :)
На скриншоте какие-то сплошные «РаспАшенки», чего они там пахать должны, непонятна.
У Артемия Лебедева на сайте есть какое-то решение горизонтального выравнивания блоков разной высоты.
На скриншоте какие-то сплошные «РаспАшенки», чего они там пахать должны, непонятна.
У Артемия Лебедева на сайте есть какое-то решение горизонтального выравнивания блоков разной высоты.
Хм. Странно: в фф3.6 блоки перемещаются между строчками только когда отпускаешь кнопку мыши. Это так и задумано? Потому что, например, решение с версткой на таблицах дает результат ресайза сразу (тут, естественно, не получится джае перемещать элементы между строчками).
Кстати, не знаете, как подобные вещи сделаны, например, утЯндекса в Фотках?
Кстати, не знаете, как подобные вещи сделаны, например, утЯндекса в Фотках?
ух! спасибо, буду использовать
а то от нехватки смекалки юзал overflow:hidden
а то от нехватки смекалки юзал overflow:hidden
НЛО прилетело и опубликовало эту надпись здесь
А прикиньте, что будет, если элементов 100 штук, плюс растяг, плюс фильтр :) каждый раз перестраивать JSом? Нет, я лучше вот как здесь :)
если элементов будет 100 штук то лучше всё таки выводить постранично
да я давно использую этот метод
да я давно использую этот метод
насчёт таблиц и js
images.yandex.ru
images.yandex.ru
Для борьбы с пробелами измеряем его ширину — получается 4px, а это 25% от 1em, который по-умолчанию равен 16px. Таким образом контейнеру ставим word-spacing:-0.25em, а блокам word-spacing:normal
А не проще задать font-size:0 для общего контейнера потока? Тогда пробелы даже если они просто станут не видны
А не проще задать font-size:0 для общего контейнера потока? Тогда пробелы даже если они просто станут не видны
выложите полный код примера у себя! пожалуйста
Я Вас не совсем понял — пример test.nimax.ru/blocks/ чем не устраивает? Насчет полноты — все файлы доступны, все можно посмотреть. Там CSS вполне прозрачно подключен.
Для Firefox есть отличные дополнения для получения/изучения такого рода инфы:
Web Developer, ну и обязательно для дева — FireBug.
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 строки пропала ссылка «купить». Нельзя ничего обрезать — нужна гибкость.
Попробуйте потом объяснить клиенту, почему у него при вводе названия на 2 строки пропала ссылка «купить». Нельзя ничего обрезать — нужна гибкость.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Верстка повторяющихся блоков