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

Сверстать список товаров каталога по картинке, используя следующий код html:

<ul>
    <li><mg src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
</ul>


При верстке необходимо соблюдать условия:

  1. верстка должна в точности соответствовать рисунку (пиксельная точность)
  2. не использовать классы и идентификаторы
  3. количество товара в каталоге не ограничено
  4. новый товар заносится в список путем добавления <li></li>
  5. горизонтальные ряды товаров разделены линией
  6. список, фиксированный по ширине
  7. картинки товара одного размера (темный прямоугольник)
  8. у всех картинок одинаковая рамка
  9. кроссбраузерность, валидность
  10. в html-код можно добавить один свой элемент

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

  • Правила конкурса смотрите здесь

Комментарии

Леонид Бугаев 16 февраля 2009 года, 11:49 #

А 2 ряда максимум, или может быть сколько угодно элементов?

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

пункт 3 — количество товара в каталоге не ограничено. Количество рядов, соответственно, тоже не ограничено.

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

уже поступают первые ответы, но 100% правильного (с соблюдением всех условий) еще не было, кто же победит :)

lastic 16 февраля 2009 года, 13:56 #

сделал ща пришлю

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

отослал своё ужасное решение)

Bonch 16 февраля 2009 года, 14:04 #

Отправил (с адреса demerest@gmail.com). Смотрите :)

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

С удовольствием бы принял участие. Только найти бы время…

Какой период действия одного задания? До первого правильного решения?

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

Да, до первого правильного решения.

На данный момент свои решения прислали 6 человек, правильного ответа нет. Наиболее близок к победе Mistereo , прошу прощения, Vasiliy Nesterenko

Почти все почему-то забивают на первое, самое важное условие. Ведь мы верстальщики-виртуозы, давайте будем максимально точными ;)

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

Отправил свое решение.

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

Лидирует Dimox

Bonch 16 февраля 2009 года, 16:02 #

Че все, Dimox всех одолел? :)

interpaul 16 февраля 2009 года, 16:42 #

Отправил и я свое решение.

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

Все, есть правильное решение! Его прислал Dimox.
Dimox — верстальщик-виртуоз!
мои поздравления ;)

omfg 16 февраля 2009 года, 16:50 #

хм, а картинка 662?421 или 420?267?

lastic 16 февраля 2009 года, 16:53 #

не важно какая картинка главное решение элегантное, красиво.

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

полный размер картинки 662?421, при наведении на нее написано «смотреть полный размер»

Андрей 16 февраля 2009 года, 16:55 #

Но расскажите же все-таки, чем обусловлен второй пункт условий? Совершенно непонятно, чем вызвано такое требование

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

тем, что для задания отступов между картинками могли задавать различные классы для li, что не допустимо для грамотной верстки )

Как Вам конкурс, понравился?
Будем продолжать?

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

Будем. По любому интересней сначала поломать голову над задачкой, а уже потом увидеть ее решение, чем просто читать готовые «рецепты».

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

Торжественное награждение победителя!!!

max 16 февраля 2009 года, 17:20 #

странно мне обернуть список div’м не разрешили :(

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

кто Вам не разрешил )

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

Почти.
А когда следущее задание?

Vasiliy Nesterenko 16 февраля 2009 года, 17:36 #

Фак. Я не догадалсо клыцнуть на картинку и открыть её в новом окне. Поэтому проиграл. =(

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

Пока не могу сказать точно, но я заблаговременно сообщу.
Слева в сайдбаре в разделе «Верстальщик-виртуоз» будет написано время публикации следующего задания.

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

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

Vasiliy Nesterenko, почему же, вы делали в правильных размерах. Проблема в Вашем решении была с кроссбраузерностью.

Sam 16 февраля 2009 года, 18:04 #

Закончил работу на сегодня :) Поверстаю постфактум…

Leopard 16 февраля 2009 года, 18:25 #

Конкурс понравился! Обязательно надо продолжать!

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

Можно увидеть резюме первого конкурса? Сколько решений было получено? Через сколько часов пришел первый правильный ответ?

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

Кстати, да, поддерживаю interpaul.

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

только сел)
вижу, победитель уже есть(
излишки full time job((

Bonch 17 февраля 2009 года, 7:17 #

Dimox, а покажи свое решение, очень интересно.
И давайте все кто участвовал, показывайте свои решения.

Вот моё: http://torqueo.net/files/webmolot/

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

Bonch, я ведь дал ссылку на решение Dimox-а чуть выше. В Вашем решении в opera 8.5 не все гладко.

Конечно, кто желает, может выкладывать ссылки на свои работы

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

По просьбе читателей составил резюме конкурса :)

Ровно через 59 минут с начала конкурса свое решение прислал Найман Максим.
В нем были недочеты по пунктам 1, 2, 5 условия задачи.
Затем посыпались письма от:
- Александр Тимофеев
- Бубка Александр
- Vasiliy Nesterenko
- Mistereo
- Artemov Andrey
К сожалению у всех были различного рода ошибки и недочеты, на которые я указывал и давал время исправить.
Через 4 часа после начала конкурса прислал свое решение Dimox, еще через час — Павел Радьков.

Как видим, утверждение resurection и Sam, что победит тот, кто первым увидит задание, не оправдалось. Победитель 7-м (предпоследним из участников) прислал свой ответ.

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

Aurum 21 февраля 2009 года, 16:03 #

Я вот тут опоздал , но тоже с удовольствием поучаствую! Жду второго издания

Миша Абасов 22 февраля 2009 года, 7:49 #

Здравствуйте. Тут возникла проблема с работой победителя, при включенной Fit to width в Opera. Блоки отображаются по два в ряд и съезжают.

Что вообще делать в таких случаях?

Верстальщик-виртуоз. Задание 2 22 февраля 2009 года, 14:52 #

[...] Первое задание конкурса [...]

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

В решении победителя совершенно лишнее
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;}

Арслан 21 марта 2009 года, 21:59 #

Здравствуйте друзья! я начинающий, но не чайник и пишу здесь в первые, блог посещаю давно. У меня такой вопрос: можно ли в зависимости от браузера импортировать разные таблицы стилей не применяя при этом JavaScript???

webmolot 23 марта 2009 года, 10:33 #

Арслан, конечно есть.
Только в этом посте другие вопросы решались :)
Почитайте про условные комментарии для IE

Миша Абасов, Вы отключите Fix и проблема решится )

Арслан 23 марта 2009 года, 15:30 #

Спасибо! Извиняюсь что не в той теме задал вопрос.

[...] Первое задание конкурса [...]

Катя 17 июня 2009 года, 22:51 #

Ой, сорри, не поссылке решение Димокса не открывается (

Вадим 21 января 2010 года, 23:54 #

Мало добиться результата, необходимо верное решение некоторых задач. Не было времени конкретней рассмотреть решение победителя и выписать ошибки, но на первый взгляд куча лишнего кода, что тоже не верно да и сама задача поставлена некорректно, верстальщик он как художник сам должен выбирать какой ему хтмл использовать выгодней в той или иной ситуации (естественно учитывая програминг сайта) и не быть ограниченным в выборе структуры блока как это было приведено в данном примере… Необходимо программировать сайт под верстку а не верстать под чейто уже готовый код…
а данный пример можно реализовать 4 строчками используя таблицу и 2 строчки прописав правила цсс…. и будет достигнуто 100% соответствие макету, а так же 100% кроссбраузерность с минимальными потерями для оптимизации и 100% гарантией что никогда ни в одном браузере не развалится данный блок.
А ваши все вышеперечисленные решения в том числе и автора статьи необходимо тестировать под разными версиями браузеров и под разными браузерами я на 100% уверен что где нибудь да все «посыпется»… первые подозрения на Safari.

А данную статью считаю вообще не актуальной и более того опасной для начинающих верстальщиков, т.к. сотни раз приходилось переделывать эти корявые блоки после таких псевдо суперпрофессионалов :)

Так что уважаемый webmolot уберите данную статью из сети дабы не вводить начинающих в заблуждение… самому ведь потом придется исправлять чужие ошибки….

с уважением Вадим
Автор сайта http://www.craftgroup.uz — это тоже блог про версту и тп. (правда не такой серьезный как у вас ;)

Вадим 23 января 2010 года, 8:30 #

Вы кстати свой блог в IE6 видели?))))

P.S.мне вот этот ответ понравился у Вас » webmolot 16 февраля | 17:45 »

может почините сначала свой сайт а потом будете учить других? ;)

webmolot 04 августа 2010 года, 11:32 #

Вадим, полностью с Вами согласен. Сайт нужно чинить было уже давно, но все никак не хватало времени. В сентябре планирую запустить новую версию сайта. Верстка уже практически готова. Кому интересно, можете посмотреть здесь http://webmolot.com/test/index.html

Даниил 23 августа 2013 года, 23:01 #

А что сложного то? Обтекаемые элементы списка + бэкграунды у изображения с бордюром. Даже никакого хтмл элемента задавать не надо.

Alex 14 ноября 2013 года, 1:20 #

Решение с флоатами и фикс.ширинами «виртуозно»? И с overflow? Печаль…)

Сами понимаете почему решение отвратительно и в реальных условиях нежизнеспособно или объяснить?)

webmolot 14 ноября 2013 года, 12:23 #

Alex, посмотрите дату публикации поста и успокойтесь. Если хотите поумничать, можете объяснить, мы все вас с удовольствием послушаем ;)

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

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

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

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

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

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