background: url("http://3.bp.blogspot.com/-wk3l6B_FVNI/T4lJsK3mwkI/AAAAAAAAEo0/tb1D2tWKl5Y/s1600/sag5.png");
css kodunu koydum ve şu kodu koycam yerine
ama yukarıdaki kodda nereye koycam
- Üyelik 06.08.2011
- Yaş/Cinsiyet 30 / E
- Meslek öğrenci
- Konum Antalya
- Ad Soyad T** A**
- Mesajlar 425
- Beğeniler 91 / 66
- Ticaret 7, (%100)
Mesela şu kodda ;
css kodunu koydum ve şu kodu koycam yerine
ama yukarıdaki kodda nereye koycam
css kodunu koydum ve şu kodu koycam yerine
ama yukarıdaki kodda nereye koycam
- Üyelik 16.12.2010
- Yaş/Cinsiyet 34 / E
- Meslek High Professional Student in G
- Konum
- Ad Soyad ** **
- Mesajlar 372
- Beğeniler 82 / 243
- Ticaret 0, (%0)
Bende alternatif bir bakış açısı getiriyim konuya :)
CSS Sprite ın mantığı sitedeki tüm resimler tek tek yüklenmek yerine tek resim yükleyip CSS background position ile tek resimde tüm görselleri göstermek oluyor..
Sistemde bi tane sprite diye div oluşturun ve background tanımlayın.
Yani;
diye..
Ardından örnek olarak konu arkaplanı olan bir öğede yani .konu divinde bir arkaplanımız vardı (sprite öncesi konu.png iken onu kaldırıyoruz)
şeklinde oluşturulan kodumuzu
.konu + .sprites + .konu_png olarak 3 farklı css şablonunu tek css şablonunda topluyoruz.
Background repeat özelliğini konu CSS inden silmeyin..Repeat özelliği spritela bir sorun çıkartmaz ama konu da silerseniz tekrarlama sorunu çıkabilir karşınıza..Sadece background-image kısmını silip sprite ve konu_png tanımlarını alın..
CSS Sprite ın mantığı sitedeki tüm resimler tek tek yüklenmek yerine tek resim yükleyip CSS background position ile tek resimde tüm görselleri göstermek oluyor..
Sistemde bi tane sprite diye div oluşturun ve background tanımlayın.
Yani;
.sprites {
background-image : url(resim/sprite.png);
background-color : transparent;
background-repeat : no-repeat;
display:inline-block;
} diye..
Ardından örnek olarak konu arkaplanı olan bir öğede yani .konu divinde bir arkaplanımız vardı (sprite öncesi konu.png iken onu kaldırıyoruz)
.konu_png {
height : 25px;
width : 25px;
background-position : -25px -0px;
} şeklinde oluşturulan kodumuzu
.konu + .sprites + .konu_png olarak 3 farklı css şablonunu tek css şablonunda topluyoruz.
yapıyoruz örnek olarak.Background repeat özelliğini konu CSS inden silmeyin..Repeat özelliği spritela bir sorun çıkartmaz ama konu da silerseniz tekrarlama sorunu çıkabilir karşınıza..Sadece background-image kısmını silip sprite ve konu_png tanımlarını alın..
- Üyelik 08.11.2011
- Yaş/Cinsiyet 32 / E
- Meslek öğrenci
- Konum İstanbul Avrupa
- Ad Soyad T** Ş**
- Mesajlar 897
- Beğeniler 172 / 134
- Ticaret 0, (%0)
@Beyaz hocam mesela burayı
bu kod nerdeyse onunlamı değiştirecez
misal index de indexlemi değiştircez
css yi hallediyorum gerisi ni yapamadım
yapıyoruz örnek olarak. bu kod nerdeyse onunlamı değiştirecez
misal index de indexlemi değiştircez
css yi hallediyorum gerisi ni yapamadım
Sana göre aptalca,bana göre şaheser.
- Üyelik 16.12.2010
- Yaş/Cinsiyet 34 / E
- Meslek High Professional Student in G
- Konum
- Ad Soyad ** **
- Mesajlar 372
- Beğeniler 82 / 243
- Ticaret 0, (%0)
TuncaySahin adlı üyeden alıntı
@Beyaz hocam mesela burayıbu kod nerdeyse onunlamı değiştirecez
misal index de indexlemi değiştircez
css yi hallediyorum gerisi ni yapamadım
Şöyle tuncay.CSS de resimlerin olduğu divler örnek olarak .facebook divinde background resmi var..Facebook divini php dosyasından düzeltip css e facebook_img ve sprites ekliyorsun.
- Üyelik 08.11.2011
- Yaş/Cinsiyet 32 / E
- Meslek öğrenci
- Konum İstanbul Avrupa
- Ad Soyad T** Ş**
- Mesajlar 897
- Beğeniler 172 / 134
- Ticaret 0, (%0)
şimdi anladım teşekürler
Sana göre aptalca,bana göre şaheser.
- Üyelik 27.03.2012
- Yaş/Cinsiyet - / E
- Meslek
- Konum
- Ad Soyad ** **
- Mesajlar 31
- Beğeniler 0 / 20
- Ticaret 0, (%0)
Mesela şu kodda ;
css kodunu koydum ve şu kodu koycam yerine
ama yukarıdaki kodda nereye koycam
css kodunu koydum ve şu kodu koycam yerine
ama yukarıdaki kodda nereye koycam
Öncelikle background url tanımlanan bölümlerin temanızda konum değerleri ayrıca belirtildiği için sprite işlemi biraz zorlaşır.Alttaki bilgileri deneyebilirsiniz,ancak çalışacağını garanti edemem.
Kodunuz ;
background: url("http://3.bp.blogspot.com/-wk3l6B_FVNI/T4lJsK3mwkI/AAAAAAAAEo0/tb1D2tWKl5Y/s1600/sag5.png");
kısmını şu şekilde düzenleyin;
.sprites {background-image:url('birleştirdiğiniz resmin url sini ekleyiniz');background-repeat:no-repeat;display:inline;}
#sag5.png {height: px;width: px;background-position: px px;}
Kırmızı olan bölgelere eklediğiniz css nin #sag5.png alt satırındaki px bilgilerini girin...
- Üyelik 07.07.2011
- Yaş/Cinsiyet 36 / E
- Meslek Blog Yazarı ve Web Geliştirici
- Konum İstanbul Avrupa
- Ad Soyad Z** Z**
- Mesajlar 267
- Beğeniler 31 / 46
- Ticaret 3, (%100)
yararlı paylaşım teşekkürler.
www.zaferzent.com - blogger
- Üyelik 20.04.2012
- Yaş/Cinsiyet 33 / K
- Meslek öğrenci-üniversitenin dergisin
- Konum
- Ad Soyad ** **
- Mesajlar 336
- Beğeniler 7 / 80
- Ticaret 0, (%0)
bu sitede açık oluşturmasın? (:
- Üyelik 27.03.2012
- Yaş/Cinsiyet - / E
- Meslek
- Konum
- Ad Soyad ** **
- Mesajlar 31
- Beğeniler 0 / 20
- Ticaret 0, (%0)
bu sitede açık oluşturmasın? (:
Nasıl bi açık? Teorik olarak;zaten mevcut olan resimleri,tek parça halinde olan başka bir resimle değiştiriyoruz.
- Üyelik 07.04.2012
- Yaş/Cinsiyet 32 / E
- Meslek Öğrenci
- Konum Ankara
- Ad Soyad ** **
- Mesajlar 137
- Beğeniler 40 / 15
- Ticaret 0, (%0)
hep bu olayı merak ediyordum izlesene ve daha bir çok kaliteli sitede bu olay var çözemiyordum gerçketen çok teşekkürler.. :) süper bir anlatım
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)