ZODIOS.net

Как сделать галерею товаров для интернет-магазина

03.13.2009  –  Рубрика: HTML&CSS

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

К недостаткам реализации такого метода относится то, что независимо от ширины экрана количество товаров в строке остается постоянным и единственное чем может отличаться организация, это реализация – ширины таблицы. Таблица с товарами может быть или фиксированной ширины и центрироваться, или резиновой и растягивать товары в строке на всю ширину основного блока сайта.

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

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

Второй метод состоит в реализации элементов списка в виде строчных элементов которые в блоке списка(ul/ol) выравниваются по центру, а в элементе списка размещен структруный элемент с display:inline-block. В результате получим галерею, в которой в строке элементы выровнены по центру и их количество зависит от разрешения экрана. Вот пример реализации второго метода .

Для того чтоб нагляднее увидеть как изменяется количество товаров в строке в зависимости от разрешения можно воспользоваться функцией масштабирования в браузере. Таким образов, с точки зрения организации структуры реализовывать перечень товаров в интернет-магазине лучше через список, чем через таблицу. раскрутка сайта.