CSS resimli hover - Sayfa 2

10-02-2014, 14:35:03

#10

Blogizma adlı üyeden alıntı: mesajı görüntüle

Arkadaşın verdiği kod üzerinde biraz düzenleme yaptım bu şekilde denerseniz çalışacaktır muhtemelen.

Css Kodu :
.cerceve { width:300px; height:60px; background-color:black; } .cerceve li { display: block; width: 60px; height: 60px; list-style:none; float:left; } .cerceve .facebook{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png") no-repeat 0 0; float:left; } .cerceve .facebook:hover{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png") no-repeat 0 0; } .cerceve .twitter{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png") no-repeat 0 0; float:left; } .cerceve .twitter:hover{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png") no-repeat 0 0; } .cerceve .plus{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png") no-repeat 0 0;float:left; } .cerceve .plus:hover{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png") no-repeat 0 0; } .cerceve .youtube{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png") no-repeat 0 0;float:left; } .cerceve .youtube:hover{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png") no-repeat 0 0; } .cerceve .rss{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png") no-repeat 0 0;-content/themes/pitch/images/r1.png") no-repeat 0 0;float:left; } .cerceve .rss:hover{ background: url("http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png") no-repeat 0 0; }
HTML KODU:
<div class="cerceve"> <li class="facebook"><a href="#" title="Facebook"></a></li> <li class="twitter"><a href="#" title="Twitter"></a></li> <li class="plus"><a href="#" title="Google+"></a></li> <li class="youtube"><a href="#" title="Youtube"></a></li> <li class="rss"><a href="#" title="RSS"></a></li> </div>

html'nin kodunu temaya gömünce çalışıyor ama widget'lara atınca çalışmıyor.

10-02-2014, 14:47:02

#11

Gokyuzu

Bileşen alanına kod olarakta ekledim sorunsuz çalıştı.

http://prntscr.com/2r7i14

10-02-2014, 16:34:15

#12

cok_asi55

Blogizma adlı üyeden alıntı: mesajı görüntüle

Bileşen alanına kod olarakta ekledim sorunsuz çalıştı.

http://prntscr.com/2r7i14

Bunun için bir eklenti desteği mi kullanıyorsun?

10-02-2014, 16:43:01

#13

Gokyuzu

Metin bileşeni olarak ekledim, başlık kısmını sallama birşeylerle doldurdum metin içerik kısmınada style kodlarını ve html kodları ekledim.

10-02-2014, 17:39:18

#14

cok_asi55

Blogizma adlı üyeden alıntı: mesajı görüntüle

Metin bileşeni olarak ekledim, başlık kısmını sallama birşeylerle doldurdum metin içerik kısmınada style kodlarını ve html kodları ekledim.

kafayı sıyırıcam yaa. bende başka bir sitemde deniyorum sorunsuz çalışıyor, buraya alıyorum burada çalışmıyor, arka plan rengi çıkıyor ama kendisi yok.

Birşeyle çakışıyor ama neyle bulamadım bir türlü

Tüm eklentileri pasif yaparakda denedim ama yok, css etiket isimlerini değiştirdim çakışma varmı diye ama gene yok.

10-02-2014, 18:30:30

#15

Gokyuzu

Site adreslerini iletir misin yada skypeni.?

10-02-2014, 23:32:40

#16

Mintik

html kodları sidebar.php dosyasına eklemeyi dene. Css kodlarınıda bir stil dosyasına yükleyip ftpye at sonra <link rel diye header.php ekle. Yada temanda css ekleme bölümü varsa ordanda cs kodları ekleyebilirsin.

11-02-2014, 08:08:35

#17

cok_asi55

Blogizma adlı üyeden alıntı: mesajı görüntüle

Site adreslerini iletir misin yada skypeni.?

Yolladım dostum.

11-02-2014, 11:31:10

#18

Gokyuzu

Temanızın css yapısı gereği bu düzenlemeler çalışma sırasında sorunlu gözükebilir. Sıfırlama yapmadan direk <li> </li> taglarında kullanım esnasında temanın bileşen desteği css sınıflarıyla uyumlu olmadığı için sonuç olumsuz oluyordu, kodlarda şu şekilde bir düzenleme yaptık.

CSS Sınıfı kodları :

.cerceve {
   width:320px;
    height:60px;
    background-color:black;

}
.cerceve li {
   display: block;
   list-style:none;
   float:left;
   padding: 0px 10px;
}

.clearfix {
	clear:both;
}

.cerceve a { display:block; width:60px; height:60px; text-indent:-9999px; text-transform:capitalize; }
 
.cerceve .facebook{
   background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/f1.png') no-repeat 0 0; float:left;
   width: 60px;
   height: 60px; cursor:pointer;
}
.cerceve .facebook:hover{
 background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/f2.png') no-repeat 0 0;
}
.cerceve .twitter{
   background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/t1.png') no-repeat 0 0; float:left;
   width: 60px;
   height: 60px;cursor:pointer;
}
.cerceve .twitter:hover{
background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/t2.png') no-repeat 0 0;
}
.cerceve .plus{
   background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/g1.png') no-repeat 0 0;float:left;
   width: 60px;
   height: 60px;cursor:pointer;
}
.cerceve .plus:hover{
   background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/g2.png') no-repeat 0 0;
}
.cerceve .youtube{
background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/y1.png') no-repeat 0 0;float:left;
   width: 60px;
   height: 60px;cursor:pointer;
}
.cerceve .youtube:hover{
   background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/y2.png') no-repeat 0 0;
}
.cerceve .rss{
background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/r1.png') no-repeat 0 0; float:left;
   width: 60px;
   height: 60px;cursor:pointer;
}
.cerceve .rss:hover{
   background: url('http://tema.isakoc.com/wp-content/themes/pitch/images/r2.png') no-repeat 0 0;
}

HTML sınıf kodları:

<div class="cerceve">
<div class="facebook"><a href="#" title="Facebook">Facebook</a></div>
<div class="twitter"><a href="#" title="Twitter">Twitter</a></div>
<div class="plus"><a href="#" title="Google+">Google Plus</a></div>
<div class="youtube"><a href="#" title="Youtube">Youtube</a></div>
<div class="rss"><a href="#" title="RSS">Rss</a></div>
</div>