Блог студії веб-дизайну «make a site»

Яку верстку використовувати для каталогу товарів

У даній статті мова піде про сайти з гумовою або адаптивної версткою. тому і вимоги до каталогу товарів будуть пред'являтися відповідні.

Якби ми використовували шаблон з фіксованою версткою. то і проблем з каталогом б ніяких не було. Заздалегідь відома ширина макета дає нам можливість все точно розрахувати і вказати конкретні розміри для товарних груп каталогу, тому даний спосіб ми розглядати не будемо і розберемо більш складні і витончені способи HTML-розмітки в комбінації з CSS.

Фіксована кількість елементів на кожному рядку

Справа в тому, що це років 15-20 назад все монітори були приблизно одного дозволу - 800х600 (найстаріші динозаври) і 1024х768 пікселів - з'явилися трохи пізніше і цей дозвіл було найпопулярнішим. Воно протрималося на піку популярності досить довго, але потім, завдяки невблаганного прогресу, стали з'являтися все нові і нові дозволи екранів. Різноманітність дозволів моніторів користувачів добре проглядалося в Яндекс.Метрика, підключеної до сайту з пристойною відвідуваністю. Там можна було побачити практично все що завгодно.

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

Каталог товарів, що містить 3 елементи на кожному рядку буде добре виглядати на невеликих моніторах, але якщо ширину екрану розтягнути вдвічі, то ці 3 елементи просто загубляться на білому тлі і будуть виглядати занадто розріджене. Але ми все-таки для початку розглянемо такий тип верстки, якщо вже почали про нього розмова.

Верстка каталогу товарів за допомогою таблиці

У випадку з табличній версткою каталогу все дуже просто - спочатку нам потрібно визначитися, скільки найменувань буде розташовано на кожному рядку. Припустимо в цей раз їх буде 3. Найголовніше в цій справі - не забути встановити ширину таблиці в 100%, т. К. За замовчуванням цей елемент поводиться не як блоковий, а як вбудований.

Примітно те, що стовпчики сторінки вирівнюються по ширині між собою автоматично. Якщо в якомусь стовпці буде більше інформації, то він стане ширше інших, але в нашому випадку у всіх шпальтах будуть картинки однакової ширини, тому нам навіть не обов'язково буде вказувати ширину в 33% для кожного стовпчика.

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

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

Використання маркованого списку і властивості display: inline-block для верстки каталогу товарів

Зараз ми розглянемо дуже цікавий спосіб верстки каталогу, в основі якого буде використовуватися маркований список. Всі ми знаємо, що елементи маркованого списку за замовчуванням є блоковими елементами, а це значить, що вони б займали по 100% ширини батьківського елементу. Нам же потрібно помістити кілька елементів на рядку, тому призначимо елементам нашого списку властивість display: inline-block. яке означає, що елемент підпорядковується як правилам блокових елементів, так і правилам вбудованих.

Загалом не риба і не м'ясо, але нам то це якраз і потрібно в даному випадку. Отже, поїхали! Створюємо маркований список і легким рухом руки перетворюємо його в каталог товарів. Ключовим моментом в цьому способі є установка стилю display: inline-block, інакше нічого не вийде. Можна звичайно встановити і display: inline, але тоді не можна буде задавати стилі, характерні блоковим елементам, а це нам обов'язково знадобиться в верстці каталогу.

В даному способі є кілька ключових моментів:

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

І на цьому солідний список нюансів, нарешті, закінчується. Отже, давайте уточнимо деякі деталі.

З приводу обнуління зовнішніх і внутрішніх відступів зрозуміло, т. К. Марковані списки за умовчанням поставляються з відступами від лівого краю, а нам у верстці каталогу це зовсім не потрібно.

Маркери нам теж не потрібні, тому відключаємо їх за допомогою властивості list-style. присвоївши йому значення none.

З приводу display: inline-block ми розповіли трохи вище, тому не будемо повторюватися.

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

Ширина елементів повинна бути вказана у відсотках. У випадку з 3 елементами на кожному рядку каталогу вказуємо 33%, у випадку з 4 - 25% і так далі.

Мінімальна ширина елементів каталогу нам потрібна для того, щоб вони не стискалися занадто сильно при використанні моніторів з невеликим дозволом або ж мобільних пристроїв.

Використання плаваючих блоків для верстки каталогу

У попередньому прикладі ми домоглися відмінного і універсального результату за допомогою маркованого списку, але ми б не хотіли на цьому зупинятися і вирішили зробити те ж саме, тільки трохи іншим способом. Йтиметься про плаваючі блоках, які створюються за допомогою властивості float (від англ. Float - поплавок, плавати). Розмітка каталогу практично не буде відрізнятися від попереднього варіанту, втім як і стилі. Головна відмінність - це принцип, який лежить в основі даного способу.

Отже, давайте розглянемо дії, які потрібно зробити:

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

Перші два пункти ми вже розглядали детально раніше, те ж саме і з шириною елементів. Головна відмінність цього способу - плаваючі блоки. Властивість float: left встановлює обтікання з лівого боку. Таким чином у нас з вами виходить, що кожний наступний елемент каталогу обтікає попередній зліва, а ми з вами досягаємо бажаного результату. У самій розмітці при цьому елементи не потрібно мати у своєму розпорядженні в один рядок без пробілів, як ми це робили раніше.

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

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

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

Отже, зараз ми зверстаємо каталог, в якому кількість товарів на кожному рядку теоретично може коливатися від 1 до нескінченності. При цьому не буде забуто ні один пристрій і жоден екран, яким би дозволом він не володів.

В даному прикладі варто приділити увагу одну важливу деталь - якщо встановити розмір li у відсотках, то при сильному звуженні екрану, елементи каталогу будуть ставати занадто маленькими, що в нашому випадку неприпустимо. Тому ми вказуємо ширину в пікселях, але маємо можливість змінювати її залежно від поточного розміру вікна браузера за допомогою джава скрипта. Також не забудьте встановити мінімальну ширину для елементів каталогу в уникненні їх надмірного стиснення.

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

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

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

Найулюбленішим нашим методом є верстка за допомогою маркованих списків, елементам яких присвоюються властивості наполовину вбудованих і наполовину блокових елементів. Код при цьому виглядає компактно, а реалізація досить проста.

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