0
Kayıt Ol

CSS hizalama konusunda yardım

5

●

286

  • 22-09-2019, 11:41:00
    #1
    HatayMaster
    HatayMaster
    Üyeliği durduruldu
    Merhaba arkadaşlar, şu adreste ana menüde ürünler üstüne indirim ikonunu css ile ekledim fakat ne yaptıysam bu ikonu menü öğesinin üst sağına yerleştiremedim. Tam üstüne geldi. Bu konuda yardım istiyorum, şimdiden teşekkür ederim.
  • 22-09-2019, 11:48:39
    #2
    Revilationer
    Revilationer

    Hocam sanırım şu save 0 yazandan bahsediyorsunuz
    resimle aynı divin altına div açın resme position relative indirime position absolute verip top 0 right 0 verince olması gerekiyor
  • 22-09-2019, 11:54:07
    #3
    HatayMaster
    HatayMaster
    Üyeliği durduruldu
    Revilationer adlı üyeden alıntı: mesajı görüntüle

    Hocam sanırım şu save 0 yazandan bahsediyorsunuz
    resimle aynı divin altına div açın resme position relative indirime position absolute verip top 0 right 0 verince olması gerekiyor
    Hayır hocam üstte ana menüde ürünler menüsünün üstündeki indirim ikonundan bahsediyorum.
  • 22-09-2019, 11:54:45
    #4
    Daryl
    Daryl 
    .menu-badge{position: relative}
.menu-badge:after{content: ''; position: absolute;width: 40px;height: 24px;top: -10px; right: -10px;background: url('https://www.yoreselhatay.com/wp-content/uploads/2019/03/indirim.png') no-repeat}
  • 22-09-2019, 11:54:51
    #5
    m0ri4rty
    m0ri4rty
    HatayMaster adlı üyeden alıntı: mesajı görüntüle
    Merhaba arkadaşlar, şu adreste ana menüde ürünler üstüne indirim ikonunu css ile ekledim fakat ne yaptıysam bu ikonu menü öğesinin üst sağına yerleştiremedim. Tam üstüne geldi. Bu konuda yardım istiyorum, şimdiden teşekkür ederim.

    Merhaba css kodlarınız arasında menu-badge için tanımladığınız arka plan resmini kaldırarak css kodlarınıza şunları olduğu gibi ekleyebilirsiniz.

    .menu-item-5203:after {
content: "";
position: absolute;
background: url([url]https://www.yoreselhatay.com/wp-content/uploads/2019/03/indirim.png);[/url]
z-index: 1;
top: -10px;
left: 35px;
width: 43px;
height: 40px;
background-repeat: no-repeat;
background-size: contain;
}
  • 22-09-2019, 11:58:25
    #6
    HatayMaster
    HatayMaster
    Üyeliği durduruldu
    Daryl adlı üyeden alıntı: mesajı görüntüle 
    .menu-badge{position: relative}
.menu-badge:after{content: ''; position: absolute;width: 40px;height: 24px;top: -10px; right: -10px;background: url('https://www.yoreselhatay.com/wp-content/uploads/2019/03/indirim.png') no-repeat top right}
    Bu çalıştı hocam çok teşekkür ederim.
    m0ri4rty adlı üyeden alıntı: mesajı görüntüle
    Merhaba css kodlarınız arasında menu-badge için tanımladığınız arka plan resmini kaldırarak css kodlarınıza şunları olduğu gibi ekleyebilirsiniz.

    .menu-item-5203:after {
content: "";
position: absolute;
background: url([url]https://www.yoreselhatay.com/wp-content/uploads/2019/03/indirim.png);[/url]
z-index: 1;
top: -10px;
left: 35px;
width: 43px;
height: 40px;
background-repeat: no-repeat;
background-size: contain;
}
    Çok teşekkür ediyorum üstteki arkadaşın kodu çalıştığı için bunu denemedim ama mantığı tam olarak kavradım. Elinize sağlık.