Учимся выкладывать товары на витрину, урок по верстке

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

Если схема понятная перейдем к html коду

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<ul class="tovari">
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
<li>
Canon
<a href="#"><img src="04.jpg"/></a>
<div class="price">15 000 R</div>
<div class="add"><a href="#">добавить в корзину</a></div>
</li>
</ul>

Здесь как я описал в схеме используется маркированный список ul со вложенными пунктами li в которых и содержится вся информация о товаре.

Но чтоб это код работал как следует, нам нужно настроить css стили для всех элементов..
Вот css код

1
2
3
4
5
6
7

.tovari {width:800px; margin:0 auto; overflow: hidden; background:#FFF; border:1px solid #CCC; overflow: hidden; padding:0 0 40px 30px; }
* html .tovari li { padding: 50px 20px 30px 20px; margin-left:5px; } /* хак для ие от проглатывания отступа */
.tovari li { display:block; list-style:none; float:left; padding: 30px 60px 20px 5px; width:200px; height:200px; color:#F00; text-align:center;}
img{border:1px solid #CCC; width:180px; height:180px; margin:0; padding:2px;}
.price{float:left; display:inline; position:relative; color:#09F; font-family:Arial, Helvetica, sans-serif;}
a {float:right; margin:0 -20px 0 0; position:relative; padding: 0 10px; font-size:13px; display:inline; color:#06F; font-family:Arial, Helvetica, sans-serif;}
a:visited{ color:#06F;}

.tovari { width:800px} ширина контейнера в которую будут умещаться товары
.tovari li { float:left} это основное свойство обтекания каждого последующего элемента, которое будет выводить список товаров по 3 товара в ряд, количество товаров на ряд будет зависеть от параметра width для каждого элемента списка li, у нас стоит 200px, так как ширина контейнера 800 делим на 200+отспупы с обеих сторон, получаем ~ 3 товара на ряд.
Все остальные параметры можно настраивать под свои требования.

Готовый вариант можно посмотреть в примере

После прочтения данной статьи рекомендуется :
Поджечь мой RSS
И наблюдать за этим из Твиттера

Автор: Chukey | Опубликовано 31-05-2010 Рубрика: CSS

Метки: div, html, layout, каталог товаров

Предыдущие записи

Комментарии: (30)

Masterix - 31-05-2010

Ты знаешь, я не уверен, но помоему это можно сделать немного легче. Ты мне даже идею для 2х статей дал =) спасибо огромное… Сейчас сразу не скажу, но как будет время покручу и выложу на блоге. Думаю тоже будет интересно =) кстате ко всему ссылку поставлю на эту твою статью, как на основную =)

ЗЫ: И поставь наконец кнопку “Submit Comment” =)))

Блог о верстке и веб дизайне, все для верстальщиков и дизайнеров

CSSKA.RU

Блог divного парня верстальщика

О верстке простыми словами

Учимся выкладывать товары на витрину, урок по верстке

Предыдущие записи

Комментарии: (30)

Оставить комментарий

На счет подписки

Разделы

Самое свежее

Опрос

Мои проекты

Тучка тегов

Можно почитать