Верстаем каталог товаров с разделителями

Верстаем каталог товаров с разделителями

От автора: недавно пришлось покопаться в коде одного интернет-магазина. Каталог магазина имел табличный вид, но сверстан был без использования таблиц. Это все достаточно стандартно. Но первый и последний товары в каждой строке каталога отличались по дизайну как между собой, так и от остальных товаров. Чтобы это реализовать, делались при выводе товаров в скрипте PHP дополнительные проверки, и в зависимости от результатов проверки применялись те или иные классы. Это достаточно сложный и громоздкий вариант решения задачи.

автор

Автор: Андрей Бернацкий

Один из авторов проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — www.WebForMyself.com

Данный проект представляет собой подборку качественных материалов: обучающих статей, книг, курсов, видеоуроков — как зарубежных, так и отечественных специалистов в области сайтостроения.

Бернацкий Андрей свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.

Сайт: http://webformyself.com – «Основы Самостоятельного Сайтотсроения»

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

скачать исходникискачать урок

Создай полноценный каталог товара для сайта

Прямо сейчас посмотрите курс по созданию каталога товара для сайта на PHP, MySQL и jQuery!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (5)

  1. Ринат

    Очень полезно, а самое главное — спасибо за исходники к урокам!

  2. Викс

    Спасибо Андрей за интересный урок.
    У меня к вам такой вопрос:
    Можно ли с помощью описанного метода по CSS убирать border под элементами, находящимися в самом низу. Причем при условии, что количество продуктов заранее не известно (т.е. их может быть в конце 1, 2 или все 3).

  3. Сергей

    Я так полагаю, что в данном уроке всеми горяче любимые ИЕ не рассматриваются?

  4. Михаил

    Как только услышал от проповедника резиновой верстки в этом уроке о фиксированном размере блока, а через минуту о ссылке с заголовка h2 сразу выключил! Так нельзя!
    И еще, у меня весь сайт криво отображается в Opera. Да и в FF — прежде чем всё успокоится проходит несколько этапов перестроения, что выражается в подергивании и перемещении отдельных элементов! Исправьте у себя, а то возникает сомнение.

  5. Валерий

    У меня вопрос. Вы для слоя фиксированной ширины (с товаром) добавляли padding-left и padding-right. Но при этом первоначальную ширину этого не изменили после добавления padding. Почему? Ведь padding увеличивает размеры блока, по ширине или высоте.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree