Два вида верстки боксов для товаров инет-магазина

1 Июнь, 2010

Пару часов назад “шлялся” по Интернету в поисках “пищи” для себя и своего блога. Наткнулся на одну из статей моего читателя, тоже верстальщика. У него тоже молодой блог и он постоянно пишет интересные статьи на тему html-layout. В своей статье он предложил метод как с помощью списка и блоков можно сверстать боксы для товаров Интернет магазина. Как я написал ему в комментариях, у него сильно замудрено там и пообещал ему, что вскоре попробую сделать то же самое, но немного легче. Сравнивайте, что вышло у меня и у него. Возможно, вы отдадите предпочтение его варианту, может моему. Для этого я и пишу эту статью. Замете, я не в коме случае не хочу сказать, что он плохой верстальщик. Просто у каждого свои методы =)

Сначало, как обычно, идем в файл html и создаем структуру. У меня вышло так:

1
2
3
4
5
6
7
8
9
10
11

<div id="cont">
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
<div>Canon<img src="04.jpg"><span>15 000 R</span> <a href="#">добавить в корзину</a></div>
</div>

Дальше идем в наш “магический” файл css и творим чудеса:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html, body{ padding:0px; margin:0p; height:100%; width:100%;}
#cont{
position:relative;
width:800px;
margin:0 auto;
margin-bottom:15px;
border:1px solid #CCCCCC;
overflow:hidden;
}
#cont div{
position:relative;
width:220px;
height:220px;
float:left;
margin:20px 0 40px 35px;
text-align:center;
color:#FF0000;
font-family:tahoma;
font-size:14px;
}
#cont img{border:1px solid #CCCCCC;}
#cont span{color:#0099FF;float:left;}
#cont a{ color:#0099CC;float:right;}

Итак смотрим. У него вышло один идентификатор, пять классов и два или три псевдокласса. Ну соответственно большая структура списка, дивов и так далее.

У мемя смотрим. Вышел один идентификатор и четыре псевдокласса. Весь код поместился 11-ти строчках.

Теперь независимая оценка читателей, которая очень важна в данном вопросе, предпочитается выложить её в комментариях ниже =)

Хотите получить бесплатный обмен ссылками или постовыми?

PS: Если вы ищите хостинг в Казахстане, то вы его уже нашли. Так же на сайте есть услуга регистрация доменов. Отличное решения для начатия бизнеса!