[Решено] Дополнения в карточку товара

[krashman]

Привет!
Решил добавить такие иконки в карточку товара. Добавил div в product.tpl с ссылками на изображения. Но получилось так:
 

 
теперь нужно перенести правее, в свободное пространство:
 

 
через css , конечно можно добавить margin, но тогда останется много пустого места перед ценой. хочется так как на втором скрине.
простите, если это слишком глупые вопросы... :)
 
___________________________________
 
РЕШЕНО!
 
Напишу как, может кому и пригодится:
 
Пользовался этой инструкцией.
В файл product.tpl в необходимое место добавил:

<div id="product-pluses">

 <div class="wallet-down2" data-title="Текст, который будет всплывать">
<img src="...ПУТЬ К КАРТИНКЕ..." />
 </div>
 
</div>

Далее переходим в стили stylesheet.css:

/// Размещаем блок в необходимое место:

#product-pluses {
    position: absolute;
    margin-left: 250px;
    margin-top: -125px;
}

/// Далее настраиваем всплывающие подсказки:

.wallet-down2 {
    position: relative;
}

.wallet-down2:hover:after {
    background: none repeat scroll 0 0 rgba(255, 255, 230, 0.9);
    content: attr(data-title);
    font-family: Arial,sans-serif;
    font-size: 13px;
    left: 20%;
    padding: 5px 10px;
    position: absolute;
    top: 30%;
    z-index: 1;
    border: 1px solid #333;
    border-radius: 0 10px 20px 10px;
    width: 180px;
}

Пример...

[deim]

Хм, быстрее всего наверное будет задать значение position для всего блока с иконками, a потом указать отступы через top и right

 

Однако, если у вас производитель окажется из серии "сантехмонтажстройновосибирск", то блоки вероятнее всего перекроют друг друга. В таком случае только через float:left и float:right, но тут без кода страницы подсказывать нечего.

[krashman]

Хм, быстрее всего наверное будет задать значение position для всего блока с иконками, a потом указать отступы через top и right

 

Однако, если у вас производитель окажется из серии "сантехмонтажстройновосибирск", то блоки вероятнее всего перекроют друг друга. В таком случае только через float:left и float:right, но тут без кода страницы подсказывать нечего.

 

да, совсем забыл скинуть ссылку

 

и вот ещё добавил, чтобы текст появлялся при наведении, но 3 картинки сползли друг под друга (если добавить в css display: inline-block, то проблема уходит - картинки становятся в один ряд, но при этом всплывающий текст вытягивается в струнку - совсем некрасиво)

[deim]

По поводу всплывающего текста вам сюда: http://htmlbook.ru/blog/vsplyvayushchaya-podskazka-na-css

 

Кстати, про инлайновые блоки вы невнятно написали. У вас там первый стоит block, затем два inline-block и последний снова block. Неясно на что жалуетесь

[krashman]

По поводу всплывающего текста вам сюда: http://htmlbook.ru/blog/vsplyvayushchaya-podskazka-na-css

Да, спасибо, я уже разобрался :)

Вроде больше вопросов пока нет - всё так как и хотел.

[deim]

Вот и хорошо.

Если у вас была какая-то проблема с "data-title" то будет совершенно не лишним описать её в этой теме и рассказать, как справились.

Возможно в будущем кому-то пригодится.

[krashman]

Вот и хорошо.

Если у вас была какая-то проблема с "data-title" то будет совершенно не лишним описать её в этой теме и рассказать, как справились.

Возможно в будущем кому-то пригодится.

 

Сложностей не было в принципе, кроме как отпозиционировать блок в необходимое место.

Скажу, как сделал в первом посту.

Спасибо и Вам!