Перейти к содержимому


Фотография
- - - - -

Добавление нескольких Icons в Teaser


Лучший Ответ mmth , 14 January 2018 - 08:58

Ситуация - с помощью Элемента ImageBox иконки, создал 2е иконки и хочу через css развести их в Тизере по разным углам сверху основной картинки, но там одинаковые классы "gboxicon":

 <div class="gboxicon"><img src="/images/sale.png" title="Sale" width="50" height="50"></div>
 <div class="gboxicon"><img src="/images/new.png" title="New" width="80" height="42"></div>

attachicon.gificons_box.png

как сделать для первого класса gboxicon1 и для второго gboxicon2 ... ?
что править и где?

Вот Вам пример с путем решения: https://jsfiddle.net/noz8z8bz/

.gboxicon img[title='Sale'] {...} 

По факту, использовать можно вариант СВЯТОШИ, но у него есть минус, что если первой метки не будет, то вторая, будет вести себя как первая.

Перейти к сообщению


Сообщений в теме: 2

#1 techweb

techweb

Отправлено 13 January 2018 - 22:04

Ситуация - с помощью Элемента ImageBox иконки, создал 2е иконки и хочу через css развести их в Тизере по разным углам сверху основной картинки, но там одинаковые классы "gboxicon":

 <div class="gboxicon"><img src="/images/sale.png" title="Sale" width="50" height="50"></div>
 <div class="gboxicon"><img src="/images/new.png" title="New" width="80" height="42"></div>

icons_box.png

как сделать для первого класса gboxicon1 и для второго gboxicon2 ... ?
что править и где?


  • 0

#2 CB9TOIIIA

CB9TOIIIA

Отправлено 13 January 2018 - 22:35

nth-child не подходит?
  • 0

#3 mmth

mmth

Отправлено 14 January 2018 - 08:58   Лучший Ответ

Ситуация - с помощью Элемента ImageBox иконки, создал 2е иконки и хочу через css развести их в Тизере по разным углам сверху основной картинки, но там одинаковые классы "gboxicon":

 <div class="gboxicon"><img src="/images/sale.png" title="Sale" width="50" height="50"></div>
 <div class="gboxicon"><img src="/images/new.png" title="New" width="80" height="42"></div>

attachicon.gificons_box.png

как сделать для первого класса gboxicon1 и для второго gboxicon2 ... ?
что править и где?

Вот Вам пример с путем решения: https://jsfiddle.net/noz8z8bz/

.gboxicon img[title='Sale'] {...} 

По факту, использовать можно вариант СВЯТОШИ, но у него есть минус, что если первой метки не будет, то вторая, будет вести себя как первая.


  • 4




Click to return to top of page in style!