Блог → Верстальщик-виртуоз. Задание 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>

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

верстка должна в точности соответствовать рисунку (пиксельная точность)
не использовать классы и идентификаторы
количество товара в каталоге не ограничено
новый товар заносится в список путем добавления <li></li>
горизонтальные ряды товаров разделены линией
список, фиксированный по ширине
картинки товара одного размера (темный прямоугольник)
у всех картинок одинаковая рамка
кроссбраузерность, валидность
в html-код можно добавить один свой элемент

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

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

46 комментариев
16 февраля 2009 года

Поделиться ссылкой на статью:

← Предыдущая статья: Следующая статья →

Читать похожие статьи:

Ровно через 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 #

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

Верстальщик-виртуоз. Задание 3 27 марта 2009 года, 11:22 #

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

Катя 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

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

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

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

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

Поделиться ссылкой на статью:

Читать похожие статьи:

Комментарии

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

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

Мои контакты

Лучшее в блоге

Поиск по блогу

Облако тегов

Комментарии

Вопрос-ответ

Полезные ссылки

Twitter @webmolot