22
февраля
2009
Верстальщик-виртуоз. Задание 2
Сверстать список товаров с подписью по рисункам. Если подпись не вмещается в одну строку, она должна обрезаться многоточием. При наведении на картинку и/или на текст, подпись должна показываться полностью. Товар и подпись являются ссылкой.
Обычное состояние
При наведении
За основу берем правильное решение предыдущего задания (архив).
При верстке необходимо соблюдать условия:
- верстка должна в точности соответствовать рисунку (пиксельная точность)
- кроссбраузерность Internet Explorer 6.0 +, Mozilla Firefox 2.0 +, Opera 9.0 +, Google Chrome, Safari 3.0 +
- валидный HTML
- не использовать дополнительные картинки (только img.gif из предыдущего задания)
- не использовать javascript
- не использовать .htc файл
Успехов! Награда ждет своего победителя!
Правила конкурса
Первое задание конкурса
Комментарии
Буквы перед многоточием должны обрезаться обязательно по ровному краю? Т.е. резанных букв по вертикали не должно быть?
да, по ровному краю, резаных букв ни по вертикали, ни по горизонтали не должно быть.
Шрифт тоже угадывать?
если не узнали шрифт, сделаю подсказку
font:normal 11px/1.2 Tahoma
классы использовать можно
Обрезание слова в виде многотичия тоже должно быть как на картинке?
Может я что путаю, но не сущетвует в CSS свойста, подставляющего многоточие и работающее во всех браузерах… Всегда реализовывалось с помощью php.
Да, не знаю как это в firefox’е реализовать
Dimox, да, как на картинке. Это, кстати, скриншот правильного решения.
Kozlovski, вы что-то путаете )
Хорошо, что напомнили, php не подходит.
Mistereo, над firefox-ом надо подумать
У меня в Google Chrome обрезание через раз срабатывает: при загрузке многоточие подставляет, наведешь-уберешь курсор - нет многоточия, наведешь-уберешь снова - опять появляется. В правильном решении всё работает четко?
А это задание нужно делать с учетом всех требований предыдущего?
interpaul, в правильном решении все четко. Вы на правильном пути, но надо доработать пункты 2 и 3 условия задачи.
Самаритянин, берем за основу правильное решение первого задания и дорабатываем его с учетом условий второго.
Что-то я не представляю, как можно обрезать слово с помощью чистого CSS. Разве такое возможно? Никогда не сталкивался с подобным на практике. А со всем остальным, думаю, справился бы.
Решение есть! Внимательно читайте условие задания.
Что-то я не совсем тогда понимаю, если брать вариант решения из первого задания, тогда как сделать подписи у нижних картинок, они же выходят за края и UL и DIV а у нас там overflow:hidden (от одного overflow:hidden можно избавиться конечно, но от второго никак)?
Самаритянин, подсказок не делаю, одно могу сказать точно, решение есть.
Обязательно нужно сделать на решении первого задания?
Или можно его переделать?
внешний xml использовать можно?
fateev, если Вы думаете, что первое задание можете улучшить, то пожалуйста, можно его переделать. Но мне кажется, что мы только упрощаем себе работу, взяв за основу первое задание, т.к. оно грамотно сделано и для реализации второго задания нам необходимо немножко доработать код.
Если Вам поможет внешний xml, я против не буду, т.к. условия это не запрещают.
Отлично, тогда на 95% сделано )
Скоро, думаю, вышлю.
В этом xml javascript обработчик.
Поэтому мне кажется что этот способ не подходит?
Или я не прав?
Mistereo, подходит
Да?
А как же условие с JavaScript?
К сожалению, мне не удалось добиться того, чтобы описание нижних блоков было без фона. В IE6/7 все ок, а вот в остальных браузерах не получилось.
Времени разбираться больше нету.
Выслал свой вариант, т.к. интересно, правильно ли я сделал все остальное?
Определился победитель второго задания! Им стал Павел Радьков. Мои поздравления!
Mistereo, да, Вы правы, я не конкретизировал 5-й пункт условий. Он был рассчитан на то, что может найдется такой виртуоз, который сделает задание без использования javascript. Но, как оказалось, невозможное невозможно. Поэтому любуемся версткой победителя, где javascript обрабатывается через xml (архив)
Очень интересное решение. Уверен, многим пригодится в реальных проектах.
Уууу… я бы такую штуку и в жизнь не смог сделать.
Позвольте, но ведь решение не кроссбраузерное (в смысле, не соблюдается попиксельная точность в разных браузерах). В Опере и IE многоточие находит на отступ в 13 пикселей, а в Safari и FF не находит. Плюс, как заметили выше в XBL (для FF) используется JS. Самаритянин негодует :(
Dimox, так и я не сам xml-ку писал. Нашел решение в интернете http://www.leechy.ru/howto/text-overflow/
До этого задания вообще не знал, что такое в принципе возможно
interpaul, я до сегодняшнего дня тоже не знал =) А искать пытался, но не знал, что именно нужно искать.
Хорошо, что сейчас все будут знать, как делается обрезание :)
Самаритянин, если у Вас получится доработать верстку победителя, все будут только рады, и Вы не останетесь без внимания.
Статья по теме, как обрезать текст в FF без xml.
http://bolknote.ru/2008/04/12
Единственный минус — нет валидного хака, чтобы видел только FF.
У меня этот пример не заработал в FF. Судя по коду этот метод всё же обрезает буквы посередине. Вот аналогичный пример: http://habrahabr.ru/blogs/webdev/19933/
В нем на шаге первом рассматривается похожий случай с “вываливающимся” блоком, плюс еще используется генерируемое содержимое.
Нет, более хорошего решения я предложить не могу, и думаю, что на данный момент такого решения не существует. Я к тому, что нужно четче формулировать задания, потому как именно на основе заданий участники отсеивают варианты. В данном случае, если учитывать все пункты задания, как вы неоднократно замечали в комментариях, решения не существует.
Хотя нет, улучшить представленное решение можно, если использовать, в XBL XUL, тогда можно сделать решение работающее и без JS.
Пример можно скачать тут: http://rghost.ru/127097 (отличается только text-overflow.xml). Решение подсмотрел тут: http://www.rikkertkoppes.com/thoughts/2008/6/
В очередной раз убеждаюсь в силе золотых слов “никогда не говори никогда”.
Самаритянин - молодчина, виртуоз :).
По крупицам собрали пример и сделали, казалось, нереальное. Мы скоро с такими успехами таких делов намутим, что буржуи сами у нас списывать будут :)
Самаритянит, какой у тебя e-mail ?
pa1n_at_inbox.ru
насколько я знаю xml относится к програмерам , но не как к верстальщикам… почемубы тогда не сделать на Flash ?
JS ещё както относится к к верстальщику( спрайты к примеру…)
А насколько я знаю, xml - расширенный язык разметки.
Самаритянин в вашем варианте в FF2 нет многоточия.
А продолжение будет?
Конечно! В ближайшее время сообщу о новом задании.
Всем привет. Внимательно слежу за блогом. В предыдущем задании вы рассматривали интересный прием.
И вот мой вопрос: имеется блок плавающей ширины (%), в нем размещаются, блоки новинок (часто встречается на сайтах). Необходимо сделать, так, чтоб в зависимости от размера главного блока, добавлялись новинки. Какие есть возможные способы решения…….очень интересны варианты….
т.е. насколько я понял, Вы хотите предложить сделать первое задание с резиновой шириной блока контейнера. Опишите, пожалуйста, более конкретное ТЗ по заданию, по примеру того, как это делал я. Пришлите задачу вместе с Вашим вариантом решения мне на почту webmolot@gmail.com, я рассмотрю и опубликую его в ближайшее время.
Николай Ермошин, есть простое решение, но с яваскриптом: http://www.light-heads.com/uploads/files/adaptive_blocks.rar
Описание этого решения и другие варианты здесь http://cssing.org.ua/2008/09/17/adaptive-boxes/
Спасибо, низкий вам поклон…….
[...] Второе задание конкурса [...]
Обновите ссылки на решенный вариант, пожалуйста