Jump to content


Photo
- - - - -

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


Best Answer 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'] {...} 

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

Go to the full post


2 replies to this topic

#1 techweb

techweb
  • JBZoo User (rus)
  • User rate: 0
  • posts: 60
  • topics: 19

Posted 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
  • Administrators
  • User rate: 230.6
  • posts: 3680
  • topics: 235

Posted 13 January 2018 - 22:35

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

#3 mmth

mmth
  • JBZoo User (rus)
  • User rate: 22.3
  • posts: 546
  • topics: 8

Posted 14 January 2018 - 08:58   Best Answer

Ситуация - с помощью Элемента 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!