Блог Верстальщик-виртуоз. Задание 2

Сверстать список товаров с описанием к ним. Если описание не вмещается в одну строку, оно должно обрезаться многоточием. При наведении на картинку и/или на текст, описание должно показываться полностью. Товар и текст с его описанием являются ссылкой.

Обычное состояние (кликабельно):

При наведении (кликабельно):

За основу берем правильное решение предыдущего задания (архив).
При верстке необходимо соблюдать условия:

  1. верстка должна в точности соответствовать рисунку (пиксельная точность)
  2. кроссбраузерность Internet Explorer 6.0 +, Mozilla Firefox 2.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +
  3. валидный HTML
  4. не использовать дополнительные картинки (только img.gif из предыдущего задания)
  5. не использовать javascript
  6. не использовать .htc файл

Успехов! Награда ждет своего победителя!

Комментарии

fateev 22 февраля 2009 года, 12:54 #

Буквы перед многоточием должны обрезаться обязательно по ровному краю? Т.е. резанных букв по вертикали не должно быть?

webmolot 22 февраля 2009 года, 12:58 #

да, по ровному краю, резаных букв ни по вертикали, ни по горизонтали не должно быть.

40a 22 февраля 2009 года, 14:25 #

Шрифт тоже угадывать?

webmolot 22 февраля 2009 года, 14:46 #

если не узнали шрифт, сделаю подсказку
font:normal 11px/1.2 Tahoma

webmolot 22 февраля 2009 года, 17:31 #

классы использовать можно

Dimox 22 февраля 2009 года, 18:39 #

Обрезание слова в виде многотичия тоже должно быть как на картинке?

Kozlovski 22 февраля 2009 года, 18:42 #

Может я что путаю, но не сущетвует в CSS свойста, подставляющего многоточие и работающее во всех браузерах… Всегда реализовывалось с помощью php.

Mistereo 22 февраля 2009 года, 18:56 #

Да, не знаю как это в firefox’е реализовать

webmolot 22 февраля 2009 года, 18:58 #

Dimox, да, как на картинке. Это, кстати, скриншот правильного решения.

Kozlovski, вы что-то путаете )
Хорошо, что напомнили, php не подходит.

Mistereo, над firefox-ом надо подумать

interpaul 22 февраля 2009 года, 20:20 #

У меня в Google Chrome обрезание через раз срабатывает: при загрузке многоточие подставляет, наведешь-уберешь курсор — нет многоточия, наведешь-уберешь снова — опять появляется. В правильном решении всё работает четко?

Самаритянин 22 февраля 2009 года, 21:28 #

А это задание нужно делать с учетом всех требований предыдущего?

webmolot 23 февраля 2009 года, 0:04 #

interpaul, в правильном решении все четко. Вы на правильном пути, но надо доработать пункты 2 и 3 условия задачи.

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

Dimox 23 февраля 2009 года, 0:08 #

Что-то я не представляю, как можно обрезать слово с помощью чистого CSS. Разве такое возможно? Никогда не сталкивался с подобным на практике. А со всем остальным, думаю, справился бы.

webmolot 23 февраля 2009 года, 0:17 #

Решение есть! Внимательно читайте условие задания.

Самаритянин 23 февраля 2009 года, 0:23 #

Что-то я не совсем тогда понимаю, если брать вариант решения из первого задания, тогда как сделать подписи у нижних картинок, они же выходят за края и UL и DIV а у нас там overflow:hidden (от одного overflow:hidden можно избавиться конечно, но от второго никак)?

webmolot 23 февраля 2009 года, 0:35 #

Самаритянин, подсказок не делаю, одно могу сказать точно, решение есть.

fateev 23 февраля 2009 года, 12:48 #

Обязательно нужно сделать на решении первого задания?
Или можно его переделать?

fateev 23 февраля 2009 года, 13:24 #

внешний xml использовать можно?

webmolot 23 февраля 2009 года, 13:45 #

fateev, если Вы думаете, что первое задание можете улучшить, то пожалуйста, можно его переделать. Но мне кажется, что мы только упрощаем себе работу, взяв за основу первое задание, т.к. оно грамотно сделано и для реализации второго задания нам необходимо немножко доработать код.
Если Вам поможет внешний xml, я против не буду, т.к. условия это не запрещают.

fateev 23 февраля 2009 года, 13:52 #

Отлично, тогда на 95% сделано )
Скоро, думаю, вышлю.

Mistereo 23 февраля 2009 года, 13:59 #

В этом xml javascript обработчик.
Поэтому мне кажется что этот способ не подходит?
Или я не прав?

webmolot 23 февраля 2009 года, 14:36 #

Mistereo, подходит

Mistereo 23 февраля 2009 года, 14:39 #

Да?
А как же условие с JavaScript?

fateev 23 февраля 2009 года, 15:26 #

К сожалению, мне не удалось добиться того, чтобы описание нижних блоков было без фона. В IE6/7 все ок, а вот в остальных браузерах не получилось.
Времени разбираться больше нету.

Выслал свой вариант, т.к. интересно, правильно ли я сделал все остальное?

webmolot 23 февраля 2009 года, 16:22 #

Определился победитель второго задания! Им стал Павел Радьков. Мои поздравления!

Mistereo, да, Вы правы, я не конкретизировал 5-й пункт условий. Он был рассчитан на то, что может найдется такой виртуоз, который сделает задание без использования javascript. Но, как оказалось, невозможное невозможно. Поэтому любуемся версткой победителя, где javascript обрабатывается через xml (архив)

Очень интересное решение. Уверен, многим пригодится в реальных проектах.

Dimox 23 февраля 2009 года, 16:37 #

Уууу… я бы такую штуку и в жизнь не смог сделать.

Самаритянин 23 февраля 2009 года, 17:16 #

Позвольте, но ведь решение не кроссбраузерное (в смысле, не соблюдается попиксельная точность в разных браузерах). В Опере и IE многоточие находит на отступ в 13 пикселей, а в Safari и FF не находит. Плюс, как заметили выше в XBL (для FF) используется JS. Самаритянин негодует :(

interpaul 23 февраля 2009 года, 17:19 #

Dimox, так и я не сам xml-ку писал. Нашел решение в интернете http://www.leechy.ru/howto/text-overflow/
До этого задания вообще не знал, что такое в принципе возможно

Dimox 23 февраля 2009 года, 17:34 #

interpaul, я до сегодняшнего дня тоже не знал =) А искать пытался, но не знал, что именно нужно искать.

webmolot 23 февраля 2009 года, 18:22 #

Хорошо, что сейчас все будут знать, как делается обрезание :)

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

40a 23 февраля 2009 года, 18:41 #

Статья по теме, как обрезать текст в FF без xml.
http://bolknote.ru/2008/04/12
Единственный минус — нет валидного хака, чтобы видел только FF.

interpaul 23 февраля 2009 года, 20:13 #

У меня этот пример не заработал в FF. Судя по коду этот метод всё же обрезает буквы посередине. Вот аналогичный пример: http://habrahabr.ru/blogs/webdev/19933/
В нем на шаге первом рассматривается похожий случай с «вываливающимся» блоком, плюс еще используется генерируемое содержимое.

Самаритянин 23 февраля 2009 года, 21:35 #

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

Самаритянин 24 февраля 2009 года, 0:16 #

Хотя нет, улучшить представленное решение можно, если использовать, в XBL XUL, тогда можно сделать решение работающее и без JS.
Пример можно скачать тут: http://rghost.ru/127097 (отличается только text-overflow.xml). Решение подсмотрел тут: http://www.rikkertkoppes.com/thoughts/2008/6/

webmolot 24 февраля 2009 года, 0:46 #

В очередной раз убеждаюсь в силе золотых слов «никогда не говори никогда».
Самаритянин — молодчина, виртуоз :).
По крупицам собрали пример и сделали, казалось, нереальное. Мы скоро с такими успехами таких делов намутим, что буржуи сами у нас списывать будут :)

webmolot 25 февраля 2009 года, 17:01 #

Самаритянит, какой у тебя e-mail ?

Самаритянин 25 февраля 2009 года, 17:33 #

pa1n_at_inbox.ru

Aurum 25 февраля 2009 года, 20:11 #

насколько я знаю xml относится к програмерам , но не как к верстальщикам… почемубы тогда не сделать на Flash ?
JS ещё както относится к к верстальщику( спрайты к примеру…)

k0msomolec 01 марта 2009 года, 16:05 #

А насколько я знаю, xml — расширенный язык разметки.

40a 02 марта 2009 года, 20:57 #

Самаритянин в вашем варианте в FF2 нет многоточия.

Mistereo 05 марта 2009 года, 15:09 #

А продолжение будет?

webmolot 05 марта 2009 года, 22:53 #

Конечно! В ближайшее время сообщу о новом задании.

Николай Ермошин 12 марта 2009 года, 21:53 #

Всем привет. Внимательно слежу за блогом. В предыдущем задании вы рассматривали интересный прием.
И вот мой вопрос: имеется блок плавающей ширины (%), в нем размещаются, блоки новинок (часто встречается на сайтах). Необходимо сделать, так, чтоб в зависимости от размера главного блока, добавлялись новинки. Какие есть возможные способы решения…….очень интересны варианты….

webmolot 13 марта 2009 года, 10:56 #

т.е. насколько я понял, Вы хотите предложить сделать первое задание с резиновой шириной блока контейнера. Опишите, пожалуйста, более конкретное ТЗ по заданию, по примеру того, как это делал я. Пришлите задачу вместе с Вашим вариантом решения мне на почту webmolot@gmail.com, я рассмотрю и опубликую его в ближайшее время.

interpaul 13 марта 2009 года, 13:07 #

Николай Ермошин, есть простое решение, но с яваскриптом: http://www.light-heads.com/uploads/files/adaptive_blocks.rar

Описание этого решения и другие варианты здесь http://cssing.org.ua/2008/09/17/adaptive-boxes/

Николай Ермошин 13 марта 2009 года, 20:52 #

Спасибо, низкий вам поклон…….

[...] Второе задание конкурса [...]

Артём 14 августа 2009 года, 15:20 #

Обновите ссылки на решенный вариант, пожалуйста

webmolot 26 сентября 2010 года, 11:22 #

Обновил ссылку на решение без javascript (архив)

Vik 27 мая 2011 года, 12:23 #

В Firefox 4 это не работает. Кто-нибудь уже решил эту проблему?

webmolot 27 мая 2011 года, 13:21 #

Vik, есть такая проблема с firefox 4. Он все еще не поддерживает свойство text-overflow: ellipsis и уже не поддерживает -moz-binding.
Временное решение проблемы есть, можете почитать здесь

Написать комментарий

Используйте в комментариях html-теги

ссылка — <a href=""> </a>
выделение — <strong> </strong>
удалённый текст — <del> </del>
цитата — <blockquote> </blockquote>
фрагмент кода html — <pre lang="html"> </pre>
фрагмент кода css — <pre lang="css"> </pre>

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com