Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Резиновая и адаптивная HTML верстка каталога товаров

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

Резиновая и адаптивная HTML верстка каталога товаров
Содержание статьи

Какую верстку использовать для каталога товаров

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

Если бы мы использовали шаблон с фиксированной версткой, то и проблем с каталогом бы никаких не было. Заранее известная ширина макета дает нам возможность все точно рассчитать и указать конкретные размеры для товарных групп каталога, поэтому данный способ мы рассматривать не будем и разберем более сложные и изощренные способы HTML-разметки в комбинации с CSS.

Фиксированное количество элементов на каждой строке

Сначала разберем каталоги, в которых на каждой строке всегда одинаковое количество товаров или категорий товаров (в данном случае нам это не важно). Способ расположения элементов каталога на странице, при котором количество наименований на каждой строке не меняется при изменении разрешения экрана является самым распространенным и в то же время ошибочным.

monitorsДело в том, что это лет 15-20 назад все мониторы были примерно одного разрешения – 800х600 (самые старые динозавры) и 1024х768 пикселей – появились немного позже и это разрешение было самым популярным. Оно продержалось на пике популярности довольно долго, но потом, благодаря неумолимому прогрессу, стали появляться все новые и новые разрешения экранов. Разнообразие разрешений мониторов пользователей хорошо просматривалось в Яндекс.Метрике, подключенной к сайту с приличной посещаемостью. Там можно было увидеть практически все что угодно.

Так вот, мы это клоним к тому, что в наши дни на ваш сайт могут зайти пользователи, у которых разрешение монитора все еще довольно скромное – 1024х768, но также велика вероятность, что на сайт зайдут посетители, у которых это разрешение в 2 раза больше и чем дальше мы движемся вперед, тем чаще такие случаи встречаются на практике.

Каталог товаров, содержащий 3 элемента на каждой строке будет хорошо смотреться на небольших мониторах, но если ширину экрана растянуть вдвое, то эти 3 элемента просто потеряются на белом фоне и будут смотреться слишком разрежено. Но мы все-таки для начала рассмотрим такой тип верстки, раз уж начали о нем разговор.

Верстка каталога товаров при помощи таблицы

В случае с табличной версткой каталога все очень просто – сначала нам нужно определиться, сколько наименований будет расположено на каждой строке. Допустим в этот раз их будет 3. Самое главное в этом деле – не забыть установить ширину таблицы в 100%, т. к. по умолчанию этот элемент ведет себя не как блочный, а как встроенный.

Примечательно то, что столбцы страницы выравниваются по ширине между собой автоматически. Если в каком-то столбце будет больше информации, то он станет шире других, но в нашем случае во всех столбцах будут картинки одинаковой ширины, поэтому нам даже не обязательно будет указывать ширину в 33% для каждого столбца.

.catalog-list-01 {
	width: 100%;
}
.catalog-list-01 td {
	vertical-align: top;
	text-align: center;
}
<table class="catalog-list-01">
<tr>
	<td><img src="./i/good-01.jpg"></td>
	<td><img src="./i/good-02.jpg"></td>
	<td><img src="./i/good-03.jpg"></td>
</tr>
<tr>
	<td><img src="./i/good-04.jpg"></td>
	<td><img src="./i/good-05.jpg"></td>
	<td><img src="./i/good-06.jpg"></td>
</tr>
<tr>
	<td><img src="./i/good-07.jpg"></td>
	<td><img src="./i/good-08.jpg"></td>
	<td><img src="./i/good-09.jpg"></td>
</tr>
</table>

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

  • ширина таблицы должна быть 100%;
  • выравнивание в столбцах по должно производиться по центру по горизонтали и по верхнему краю по вертикали.

Использование маркированного списка и свойства display: inline-block для верстки каталога товаров

markersСейчас мы рассмотрим очень интересный способ верстки каталога, в основе которого будет использоваться маркированный список. Все мы знаем, что элементы маркированного списка по умолчанию являются блочными элементами, а это значит, что они бы занимали по 100% ширины родительского элемента. Нам же требуется поместить несколько элементов на строке, поэтому назначим элементам нашего списка свойство display: inline-block, которое означает, что элемент подчиняется как правилам блочных элементов, так и правилам встроенных.

В общем не рыба и не мясо, но нам то это как раз и нужно в данном случае. Итак, поехали! Создаем маркированный список и легким движением руки превращаем его в каталог товаров. Ключевым моментом в этом способе является установка стиля display: inline-block, иначе ничего не получится. Можно конечно установить и display: inline, но тогда нельзя будет задавать стили, характерные блочным элементам, а это нам обязательно понадобится в верстке каталога.

.catalog-list-02 {
	margin: 0;
	padding: 0;
	list-style: none;
}
.catalog-list-02 li {
	display: inline-block;
	width: 33%;
	min-width: 200px;
	text-align: center;
}
<ul class="catalog-list-02">
	<li><img src="./i/good-01.jpg"></li><li><img src="./i/good-02.jpg"></li><li><img src="./i/good-03.jpg"></li><li><img src="./i/good-04.jpg"></li><li><img src="./i/good-05.jpg"></li><li><img src="./i/good-06.jpg"></li><li><img src="./i/good-07.jpg"></li><li><img src="./i/good-08.jpg"></li><li><img src="./i/good-09.jpg"></li>
</ul>

В данном способе есть несколько ключевых моментов:

  • нужно обнулить внешние и внутренние отступы для маркированного списка, используя свойства margin и padding;
  • отключить маркеры списка с помощью свойства list-style;
  • сделать элементы li наполовину блочными и наполовину встроенными при помощи свойства display;
  • расположить все элементы каталога на одной строке, без переносов каретки (очень важно);
  • указать ширину для элементов каталога;
  • установить минимальную ширину для элементов, равную ширине вложенных изображений;

И на этом солидный список нюансов, наконец, заканчивается. Итак, давайте уточним некоторые детали.

По поводу обнуления внешних и внутренних отступов понятно, т. к. маркированные списки по умолчанию поставляются с отступами от левого края, а нам в верстке каталога это совсем не нужно.

Маркеры нам тоже не нужны, поэтому отключаем их при помощи свойства list-style, присвоив ему значение none.

По поводу display: inline-block мы рассказали чуть выше, поэтому не будем повторяться. adaptive-layout

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

Ширина элементов должна быть указана в процентах. В случае с 3 элементами на каждой строке каталога указываем 33%, в случае с 4 – 25% и так далее.

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

Таким образом мы получили адаптивную верстку каталога товаров, использовав всего один маркированный список. Все что мы сделали – это просто грамотно его настроили при помощи некоторых хитростей CSS. Если экран сжать слишком сильно, то 3-ий элемент в каждой строке перенесется на следующую, а если сжать еще сильней, то в строке вообще останется по 1 товарной позиции. Такая верстка будет прекрасно смотреться как на больших мониторах, так и на экранах мобильных телефонов даже с вертикальной ориентацией!

Использование плавающих блоков для верстки каталога

В предыдущем примере мы добились отличного и универсального результата при помощи маркированного списка, но мы бы не хотели на этом останавливаться и решили сделать то же самое, только немного другим способом. Речь пойдет о плавающих блоках, которые создаются при помощи свойства float (от англ. float – поплавок, плавать). Разметка каталога практически не будет отличаться от предыдущего варианта, впрочем как и стили. Главное отличие – это принцип, который лежит в основе данного способа.

.catalog-list-03 {
	margin: 0;
	padding: 0;
	list-style: none;	
}
.catalog-list-03 li {
	float: left;
	width: 33%;
	min-width: 200px;
	text-align: center;
}
.clear {
	clear: both;
}
<ul class="catalog-list-03">
	<li><img src="./i/good-01.jpg"></li>
	<li><img src="./i/good-02.jpg"></li>
	<li><img src="./i/good-03.jpg"></li>
	<li><img src="./i/good-04.jpg"></li>
	<li><img src="./i/good-05.jpg"></li>
	<li><img src="./i/good-06.jpg"></li>
	<li><img src="./i/good-07.jpg"></li>
	<li><img src="./i/good-08.jpg"></li>
	<li><img src="./i/good-09.jpg"></li>
	<div class="clear"></div>
</ul>

Итак, давайте рассмотрим действия, которые нужно предпринять:

  • нужно обнулить внешние и внутренние отступы для маркированного списка, используя свойства margin и padding;
  • отключить маркеры списка с помощью свойства list-style;
  • указать ширину элементов каталога;
  • установить минимальную ширину для элементов, равную ширине вложенных изображений;
  • сделать элементы li плавающими при помощи свойства float;
  • отменить обтекание в конце списка при помощи свойства clear.

floating-blocksПервые два пункта мы уже рассматривали подробно ранее, то же самое и с шириной элементов. Главное отличие этого способа – плавающие блоки. Свойство float: left устанавливает обтекание с левой стороны. Таким образом у нас с вами получается, что каждый последующий элемент каталога обтекает предыдущий слева, а мы с вами достигаем желанного результата. В самой разметке при этом элементы не нужно располагать в одну строку без пробелов, как мы это делали прежде.

В данном способе есть и подводные камни – если не отключить обтекание в самом конце списка, то следующие после каталога элементы наложатся на него в вертикальной плоскости, как будто высота каталога равна нулю и его вообще не существует в DOM-е. Для того, чтобы этого не случилось, мы заранее создаем специальный класс .clear, который очищает обтекание с обеих сторон при помощи свойства clear: both.

Универсальный способ верстки каталога товаров

А теперь, в качестве бонуса, мы рассмотрим самый универсальный способ верстки каталога, который подойдет как для мобильных устройств, так и для мониторов с очень высоким разрешением – 26 и более дюймов. За основу мы возьмем способ, который любим больше всего – маркированный список в комбинации с display: inline-block, но можно использовать и плавающие блоки. Все зависит от того, какой способ вам больше по душе.

Итак, сейчас мы сверстаем каталог, в котором количество товаров на каждой строке теоретически может колебаться от 1 до бесконечности. При этом не будет забыто ни одно устройство и ни один экран, каким бы разрешением он ни обладал.

.catalog-list-04 {
	margin: 0;
	padding: 0;
	list-style: none;
}
.catalog-list-04 li {
	display: inline-block;
	width: 150px;
	min-width: 100px;
	max-width: 300px;
}
.catalog-list-04 li img {
	width: 100%;
}
<ul class="catalog-list-04">
	<li><img src="./i/good-01.jpg"></li><li><img src="./i/good-02.jpg"></li><li><img src="./i/good-03.jpg"></li><li><img src="./i/good-04.jpg"></li><li><img src="./i/good-05.jpg"></li><li><img src="./i/good-06.jpg"></li><li><img src="./i/good-07.jpg"></li><li><img src="./i/good-08.jpg"></li><li><img src="./i/good-09.jpg"></li>
</ul>

Основные моменты:

  • делаем все точно так же, как и во втором примере;
  • устанавливаем ширину изображений (или вложенных контейнеров) в процентах от ширины li;
  • устанавливаем ширину li НЕ в процентах, а в пикселях;
  • устанавливаем минимальную и максимальную ширину для элементов на свое усмотрение;
  • пишем javascript, который будет при необходимости изменять размер li, в зависимости от разрешения экрана.

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

Главной фишкой этого способа является непостоянный размер элементов каталога, который будет высчитываться в процентах от текущего размера экрана. В первую очередь нас конечно интересует ширина. В нашем скрипте мы взяли 10% от ширины окна браузера, посчитав такой размер наиболее приемлемым и эстетичным. Чем больше будет становиться экран, тем крупнее будут и элементы каталога.

$(function() {
	adjustCatalogElements();
	$(window).resize(function() {
		adjustCatalogElements();
	});
});
function adjustCatalogElements() {
	var bw = $(window).width() / 10;
	$(".catalog-list-04 li").css({"width" : bw});
}

adaptive-templateА для того, чтобы элементы не стали слишком уж огромными на мониторах с диагональю 26 и более дюймов, мы задали максимальную ширину блоков, равную 300.

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

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

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

открыть в новой вкладке



Предыдущая статья:
Оптимизация запросов к базе данных mySQL

Читайте также:
Отправка почты без SMTP. PHP функция отправки на основе mail()

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»