16
февраля
2009
Верстальщик-виртуоз. Задание 1
Сверстать список товаров каталога по картинке, используя следующий код html:
<ul><li><img src="img.gif" alt="" width="" height="" /></li><li><img src="img.gif" alt="" width="" height="" /></li><li><img src="img.gif" alt="" width="" height="" /></li><li><img src="img.gif" alt="" width="" height="" /></li><li><img src="img.gif" alt="" width="" height="" /></li><li><img src="img.gif" alt="" width="" height="" /></li></ul>
При верстке необходимо соблюдать условия:
- верстка должна в точности соответствовать рисунку (пиксельная точность)
- не использовать классы и идентификаторы
- количество товара в каталоге не ограничено
- новый товар заносится в список путем добавления <li></li>
- горизонтальные ряды товаров разделены линией
- список, фиксированный по ширине
- картинки товара одного размера (темный прямоугольник)
- у всех картинок одинаковая рамка
- кроссбраузерность, валидность
- в html-код можно добавить один свой элемент
Успехов! Награда ждет своего победителя!
Правила конкурса смотрите здесь
Комментарии
А 2 ряда максимум, или может быть сколько угодно элементов?
пункт 3 - количество товара в каталоге не ограничено. Количество рядов, соответственно, тоже не ограничено.
уже поступают первые ответы, но 100% правильного (с соблюдением всех условий) еще не было, кто же победит :)
сделал ща пришлю
отослал своё ужасное решение)
Отправил (с адреса demerest@gmail.com). Смотрите :)
С удовольствием бы принял участие. Только найти бы время…
Какой период действия одного задания? До первого правильного решения?
Да, до первого правильного решения.
На данный момент свои решения прислали 6 человек, правильного ответа нет. Наиболее близок к победе
Mistereo, прошу прощения, Vasiliy NesterenkoПочти все почему-то забивают на первое, самое важное условие. Ведь мы верстальщики-виртуозы, давайте будем максимально точными ;)
Отправил свое решение.
Лидирует Dimox
Че все, Dimox всех одолел? :)
Отправил и я свое решение.
Все, есть правильное решение! Его прислал Dimox.
Dimox - верстальщик-виртуоз!
мои поздравления ;)
хм, а картинка 662×421 или 420×267?
не важно какая картинка главное решение элегантное, красиво.
полный размер картинки 662×421, при наведении на нее написано “смотреть полный размер”
Но расскажите же все-таки, чем обусловлен второй пункт условий? Совершенно непонятно, чем вызвано такое требование
тем, что для задания отступов между картинками могли задавать различные классы для li, что не допустимо для грамотной верстки )
Как Вам конкурс, понравился?
Будем продолжать?
Будем. По любому интересней сначала поломать голову над задачкой, а уже потом увидеть ее решение, чем просто читать готовые “рецепты”.
Торжественное награждение победителя!!!
странно мне обернуть список div’м не разрешили :(
кто Вам не разрешил )
Почти.
А когда следущее задание?
Фак. Я не догадалсо клыцнуть на картинку и открыть её в новом окне. Поэтому проиграл. =(
Пока не могу сказать точно, но я заблаговременно сообщу.
Слева в сайдбаре в разделе “Верстальщик-виртуоз” будет написано время публикации следующего задания.
Напоминаю, если у Вас есть интересное задание для конкурса, присылайте и Вас заметят :). Ведь придумывать хорошие вопросы бывает сложнее, чем на них отвечать!
Vasiliy Nesterenko, почему же, вы делали в правильных размерах. Проблема в Вашем решении была с кроссбраузерностью.
Закончил работу на сегодня :) Поверстаю постфактум…
Конкурс понравился! Обязательно надо продолжать!
Можно увидеть резюме первого конкурса? Сколько решений было получено? Через сколько часов пришел первый правильный ответ?
Кстати, да, поддерживаю interpaul.
только сел)
вижу, победитель уже есть(
излишки full time job((
Dimox, а покажи свое решение, очень интересно.
И давайте все кто участвовал, показывайте свои решения.
Вот моё: http://torqueo.net/files/webmolot/
Bonch, я ведь дал ссылку на решение Dimox-а чуть выше. В Вашем решении в opera 8.5 не все гладко.
Конечно, кто желает, может выкладывать ссылки на свои работы
По просьбе читателей составил резюме конкурса :)
Ровно через 59 минут с начала конкурса свое решение прислал Найман Максим.
В нем были недочеты по пунктам 1, 2, 5 условия задачи.
Затем посыпались письма от:
- Александр Тимофеев
- Бубка Александр
- Vasiliy Nesterenko
- Mistereo
- Artemov Andrey
К сожалению у всех были различного рода ошибки и недочеты, на которые я указывал и давал время исправить.
Через 4 часа после начала конкурса прислал свое решение Dimox, еще через час - Павел Радьков.
Как видим, утверждение resurection и Sam, что победит тот, кто первым увидит задание, не оправдалось. Победитель 7-м (предпоследним из участников) прислал свой ответ.
Ну что же, продолжаем оттачивать мастерство на текущих проектах, а я пока подготовлю второе задание конкурса. Уверяю Вас, оно будет не менее интересным ;)
Я вот тут опоздал , но тоже с удовольствием поучаствую! Жду второго издания
Здравствуйте. Тут возникла проблема с работой победителя, при включенной Fit to width в Opera. Блоки отображаются по два в ряд и съезжают.
Что вообще делать в таких случаях?
[...] Первое задание конкурса [...]
В решении победителя совершенно лишнее
li {border-top: 1px solid #C6B6AE;} если
li {padding: 44px 52px 43px 0};
а если вместо
li {padding: 43px 52px 43px 0;}
сделать
li img {margin:43px 52px 43px 0;}
то ещё лишнее
li {margin-bottom: -1px;}
Здравствуйте друзья! я начинающий, но не чайник и пишу здесь в первые, блог посещаю давно. У меня такой вопрос: можно ли в зависимости от браузера импортировать разные таблицы стилей не применяя при этом JavaScript???
Арслан, конечно есть.
Только в этом посте другие вопросы решались :)
Почитайте про условные комментарии для IE
Миша Абасов, Вы отключите Fix и проблема решится )
Спасибо! Извиняюсь что не в той теме задал вопрос.
[...] Первое задание конкурса [...]
Ой, сорри, не поссылке решение Димокса не открывается (