Перейти к публикации

Помогите сверстать правильно блок с товаром


Рекомендованные сообщения

Здравствуйте, помогите пожалуйста правильно сверстать блок с товаром с наименьшим количеством кода. Делала сама получилась куча строк, по моему лишних. Приложен скрин уже готового блока и строки кода CSS и HTML. Рассмотрю любые варианты. Можно также на вид или красивее, кто что сможет. Выражаю заранее огромную благодарность тем, кто поможет мне в реализации этой задачи!!!!

pXM4x.png

HTML


[head]

<div class="all_posic">

[/head]

[line]

<a href="{good_url}" title="{name}"><div class="name_posic">{name}</div></a>

<div class="okno">

<div class="imgtovara"><center>{image}</center></div>

<div class="sale">S A L E</div>

<div class="pr">Новая цена {price}</div>

<div class="pro">{price_old}</div>

</div>

[/line]

[foot]

</div>

[/foot]

CSS

/* стилизация левого блока дешевых товаров */

.all_posic											   { display:inline; }

.name_posic										  { padding: 5px 5px 5px 5px; color: #ffffff; font-weight: bold; background-color: #b22422;

-webkit-border-radius: 3px 3px 0 0;

    -moz-border-radius: 3px 3px 0 0;

   border-radius: 3px 3px 0 0;

}

.okno { margin: 0  0 15px 0; padding: 7px 0 39px 0;  border: 1px solid #c22515;

-webkit-border-radius: 0 0 3px 3px;

    -moz-border-radius: 0 0 3px 3px;

   border-radius: 0 0 3px 3px;

}

.imgtovara											   { float: center!important; margin: 5px 0 0 0; }

.pro										  { text-decoration:line-through; color: #ffffff; position: relative; margin: 10px 0 0 0; padding: 7px 5px 7px 5px; font-weight: bold; float: left; background-color: #b22422;

-webkit-border-radius: 0 3px 0 0;

    -moz-border-radius: 0 3px 0 0;

   border-radius: 0 3px 0 0;

}

.pr										  { position: relative; margin: 10px 0 0 0; padding: 7px 5px 7px 7px; font-weight: bold; float: right; background-color: #7fff00;

-webkit-border-radius: 3px 0 0 0;

    -moz-border-radius: 3px 0 0 0;

   border-radius: 3px 0 0 0;

}

.sale										  { font-family: georgia; font-size: 14px; color: #7fff00; position: relative; margin: -62px 0 0 0; padding: 7px 10px 7px 7px; float: left; background-color: #b22422;

-webkit-border-radius: 0 3px 3px 0;

    -moz-border-radius: 0 3px 3px 0;

   border-radius: 0 3px 3px 0;

}

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

Ссылка на сообщение
Поделиться на других сайтах

float: center!important; ??? :)http://htmlbook.ru/css/float

Да

что "да"?) доступные значения left | right | none | inherit

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...