bukarovalogin 3 Опубликовано: 4 марта 2014 Рассказать Опубликовано: 4 марта 2014 Здравствуйте, помогите пожалуйста правильно сверстать блок с товаром с наименьшим количеством кода. Делала сама получилась куча строк, по моему лишних. Приложен скрин уже готового блока и строки кода CSS и HTML. Рассмотрю любые варианты. Можно также на вид или красивее, кто что сможет. Выражаю заранее огромную благодарность тем, кто поможет мне в реализации этой задачи!!!! 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; } Задача сократить кол-во кода и сделать этот блок правильным, т.е чтобы ничего никуда не съезжало, и если цена товара увеличивается, чтобы просто растягивалось поле, а не было фексированным Цитата Ссылка на сообщение Поделиться на других сайтах
Lomot 134 Опубликовано: 4 марта 2014 Рассказать Опубликовано: 4 марта 2014 float: center!important; ??? http://htmlbook.ru/css/float Цитата Ссылка на сообщение Поделиться на других сайтах
bukarovalogin 3 Опубликовано: 4 марта 2014 Рассказать Опубликовано: 4 марта 2014 Автор float: center!important; ??? http://htmlbook.ru/css/float Да Цитата Ссылка на сообщение Поделиться на других сайтах
Lomot 134 Опубликовано: 4 марта 2014 Рассказать Опубликовано: 4 марта 2014 float: center!important; ??? http://htmlbook.ru/css/float Да что "да"?) доступные значения left | right | none | inherit http://www.w3.org/TR/CSS21/visuren.html#propdef-float 1 Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.