background("deneme.gif");

veya

	background(deneme.gif);

Ben birkaç güne kadar arada bir farkın olmadığını düşünüyordum.(Aslında benim gibi özel durumlar hariç bir fark olmadığı hakkındaki düşüncem devam ediyor.)

Projede css’de kullanılan resimlerin ön belleğe alınmaması için background:url(denem.gif?v={VERSION}) diye bir yol izliyoruz versiyon kısmına her atılan versiyonun numarası yazıyor ve böylelikle tarayıcılar resimler önbelleğe almıyor özelliklede Chrome!

Tabi bu kullanım Dreamweaver’da css otomatik tamamlamasını ve bu tanımdan sonraki özelliklerin renklendirmesini bozuyor.

	background(deneme.gif?v={VERSION});

Dün ise eğer bu tanımı tırnak içinde yazarsam Dreamweaver otomatik tamamlaması ve kod renklendirmesini bozmadığını gördüm ve sevindim.

	background("deneme.gif?v={VERSION}");

Sağlıcakla kalın.

Daha önceki makalemizde bir iki yöntem anlatmıştık. http://www.fatihhayrioglu.com/onden-resimleripreloading-images-yukleme-yontemleri/

Şimdi daha basit bir yöntemi daha bilgi dağarcığımıza ekleyelim.

Ajax ile sonradan yüklenen elemanlarımızın ardalanına atadığımız resimleri önceden yüklemek için mevcut ardalan atanmamış bir elemana bu ardalan resmini tanımlarız ve konumunuda sayfa dışına vererek(-9999px) görünmez yaparız. Böylelikle resim yüklenmiş olur ve sonradan yüklenen alanlar açıldığında görüntü problemi yaşamamış oluruz.

<div class="resimYukle"></div>

CSS kodumuzda

.resimYukle{ background:url(/images/bg.gif) -9999px -9999px no-repeat}

Bu durum için fazladan bir div açıp onun ardalanına bu resmi atayabiliridk ama eğer sayfa içinde ardalan tanımı olmayan bir eleman varsa bunu tanımlayarak fazladan bir divden kurtulmuş oluruz. Bir not bu kodu css kodumuzun sonuna eklememiz daha mantıklıdır.

.baskaBirEleman{ background:url(/images/bg.gif) -9999px -9999px no-repeat}

Benzer bir kodu :after seçicisi ve content özelliği ile de yapabiliriz.

body:after {content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) url(img05.png)}

Bu kodu ie7 ve ie6 desteklemiyor maalesef.

Ayrıca CSS3 ile bir elemana birden fazla background tanımıda yapabiliyoruz bu özellik yardımı ile de yapabiliriz. Tabi tüm tarayıcılar desteklemediği için beklemek gerekiyor.

Kaynaklar

• http://css-tricks.com/snippets/css/css-only-image-preloading/
• http://www.velvetblues.com/web-development-blog/the-css-approach-preload-images-without-javascript/
• http://snipplr.com/view/2122/css-image-preloader/
• http://www.thecssninja.com/css/even-better-image-preloading-with-css2
• http://divitodesign.com/css/create-an-image-pre-loader-with-css-only/
• http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/

Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkanlar nispetinde 2. kitapta çıkacaktır.

Kitabı ve kaynak dosyalarını indirmek için tıklayınız.

Arkaplan Resmi kaydırmaca tanımlamasını cemsid‘den aldım. CSS ile menü yapımı serimize devam ediyoruz. CSS ile yapılan bir çok menü örneği mevcut biz burada bunları katagorize edip her bir katagoriye bir örnek yaparak mantığını anlatmaya çalıyoruz, mantığını anladıktan sonra CSS ile yapılan tüm menüleri yapabileceğimize inanıyorum.

CSS menülerinin vazgeçilmezi sırasız listeleri(<ul>) kullanarak her bir linkin iki resimi bulunan(bir normal hali, diğeri fare imlecinin üzerine gelince görünecek resim) menü oluşturacağız.

Bu menü sayfa yüklenmeden yüklendiği için javascript ile yapılan rollover menülerden avantajlıdır ve Internet Explorer’da Temporary Internet Files > Settings > ‘Every visit to page.’ seçeneği seçili olan kullanıcılar için biçilmiş kaftandır. Ayrıca CSS ile yapılan menülerdeki avantajlara(kolay ekleme ve düzenleme, esnek yapı vb.) sahiptir tabi ki.

Bu metod cemsid’inde açıkladığı gibi arkaplan resmi(background-image) kaydırarak yapılıyor. Genelde bu tip menüler resim içeren veya anti-aliased metinlerin kullanıldığı durumlarda kullanılır.

<ul id="menu" >
<li id="elma"><a href="#" title="Elma">Elma</a></li>
<li id="armut"><a href="#" title="Armut">Armut</a></li>
<li id="muz"><a href="#" title="Muz">Muz</a></li>
<li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
</ul>

Görüldüğü gibi diğer menü başlangıcından farkı olmayan-bir ek hariç- bir kodlama. Hariç olan ek her menu elemanına bir id atamamız. Çünkü her menü elemanı için bir resim tanımlaması yapacağız. Manav dükkanı açıyoruz :)

şžimdi menümüzü oluşturan resimi hazırlamaya geldi sıra. Menü resmini oluştururken bir normal halini ve hemen altına fare imleci üzerine geldiğindeki halini koyup resmi kaydedeceğiz. Bu işlem için Photosohop, Firefowrk, PaintShopPro vb. programlar kullanabilrisiniz.

Menüdeki margin, padding ve imgeleri kaldıralım. Boyutlarını ve konumunu tanımlayalım:

ul#menu {
    height: 54px;
    width: 500px;
    margin: 0;
    padding: 0;
    position: relative;
}

Menümüzü yatay olarak sıralamak için

ul#menu li {
    list-style: none;
    position: absolute;
}

Menü elemanlarının yükseklikleri sabit olduğu için hepsine ortak tanımlama yapıyoruz, hepsini kendine has kapsama alanı olması için blokladık(display:block) ve konumlandırdık(postion:relative).

ul#menu li a {
    height: 54px;
    display: block;
    position:relative;
}

Her menü elemanı için kendi genişliği ve arkaplan resmindeki(menu.jpg) yerini belirleyelim.

#elma a{
    width:130px;
    background: url(images/menu.jpg) 0 0 no-repeat;
}
#armut a{
    width:142px;
    background: url(images/menu.jpg) -130px 0 no-repeat;
}
#muz a{
    width:120px;
    background: url(images/menu.jpg) -272px 0 no-repeat;
}
#kivi a{
    width:108px;
    background: url(images/menu.jpg) -392px 0 no-repeat;
}

ve tüm menü elementlerinin soldan konumu belirleyelim.

#elma {left: 0px;}
#armut {left: 130px;}
#muz {left: 272px;}
#kivi {left: 392px;}

Resimler üzerindeki metinleri kaldırmak için

ul#menu li a {
    text-indent: -9999px;
    text-decoration: none;
}

Menümüz tamam. şžimdi de rollover efekti vermek için a:hover arkaplan resimlerinin konumunu belirleyelim. Konumunu yazarken sadece yükseliği üstten konumu değiştirdiğimize dikkat edin.

#elma a:hover{
    width:130px;
    background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a:hover{
    width:142px;
    background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a:hover{
    width:120px;
    background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a:hover{
    width:108px;
    background: url(images/menu.jpg) -392px -54px no-repeat;
}

Son olarakta bir bölümde olduğunda o bölümün aktif görünmesini sağlamak için, genel de bunu için a:hover durumu normal durum olarak tanımlanır. Bizde öyle yapalım. Mesela Muz bölümünde olduğumuzu farz edelim.

<ul id="menu" >
    <li id="elma"><a href="#" title="Elma">Elma</a></li>
    <li id="armut"><a href="#" title="Armut">Armut</a></li>
    <li id="muz"><a href="#" title="Muz" class="secili" >Muz</a></li>
    <li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
</ul>

#elma a.secili{
    width:130px;
    background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a.secili{
    width:142px;
    background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a.secili{
    width:120px;
    background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a.secili{
    width:108px;
    background: url(images/menu.jpg) -392px -54px no-repeat;
}

Örnek kodları indirmek için tıklayınız.

Burada tanımlanacak CSS özellikleri 15 Haziran 2005′de yürürlüğe giren CSS2.1 standartlarına göre yazılmıştır.

Sırası ile aşağıdaki özelliklere değinilecektir.

• Zemin (Background) Özellikleri
• Kenarlık (Border) Özellikleri
• Font Özellikleri
• Liste Özellikleri
• Margin Özellikleri
• Padding Özellikleri
• Metin Özellikleri
• Floating ve Positioning Özellikleri
• Tablo Özellikleri

Burada standart bir özellik tanımı kullanılacaktır.

* Bu işaretin anlamı bu özelliğin 1′den 4′e kadar değer alabileceğini gösterir. Örneğin:

p.deneme {
	border-style: solid dashed dotted solid;
}

CSS – Zemin(BACKGROUND) Özellikleri

Zemin(Bacground) yukarıdaki resimde padding alanı ve içerik alanını(paragraf) kapsar.

Zemin özellikleri ile elementlere tek bir renk atanabildiği gibi background-image özelliği ile (X)HTML’in çok üzerinde eklemelerde yapılabilir.

Zemin özelliklerini tek tek incelersek:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

background-color

Elementlerin zeminine bir renk atamak için kullanılır.

Yapısı : background-color: <deger>
Aldığı Değerler : renk | transparent
Başlangıç değeri: transparent
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

p {
	background-color: #ddd;
}

background-image

Elementlerin zeminine resim eklemek için kullanılır.

Yapısı : background-image: <deger>
Aldığı Değerler : url | none
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

body {
	background-image: url(/images/deneme.gif)
}

background-repeat

background-repeat özelliği background-image ile zemine eklenen resmin tekrarı ile özellikleri belirler.

Yapısı : background-image: <deger>
Aldığı Değerler : repeat | repeat-x | repeat-y | no-repeat
Başlangıç değeri: repeat
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

body {
background: white url(deneme.gif);
background-repeat: repeat-x;
}

background-attachment

background-attachment özelliği zemine eklenen resmin sayfa ile scroll
etmesini veya sayfanın zeminin de çakılı kalmasını sağlar.

Yapısı : background-attachment: <deger>
Aldığı Değerler : scroll | fixed
Başlangıç değeri: scroll
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

body {
background: white url(deneme.gif);
background-attachment: fixed;
}

background-position

background-position özelliği background-image ile belirlenen resmin başlangıç noktasını belirler. Bu özellik sadece block-level ve replaced(Bu elementler kendine özgü boyutları olan elementler olarak tanımlanabilir. Örn: IMG, INPUT, TEXTAREA, SELECT, ve OBJECT) elementlere uygulanır.

Yapısı : background-position: <deger>
Aldığı Değerler : [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Başlangıç değeri: 0% 0%
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok

En kolay kullanım şekli;
Yatay değerler için: left,center,right
Dikey değerler için: top, center, bottom

Yüzde değerleri ve uzunluk değerleri de kullanılır. Yüzde değerleri elemtin boyuta bağlı olarak görecelidir. Uzunluk değerleri de kullanılabilir. Ancak farklı ekran çözünürlklerinde farklı görüntülere sebebiyet vermesi nedeni ile pek önerilmez.

Yüzde değerler ve uzunluk değerleri verildiğinde ilk değer yatay içindir sonra gelen dikey değerdir. Örneğin %10 %60 değeri bir zemin resmi için verilmiş ise %10 değeri yataydaki değeri %60 ise dikey olarak değerini gösterir. 5px 10px gibi değerler verilmişse resmin sol üstden 5px sağa ve 10px aşağıdan başlayacağını belirler.

Eğer yanlızca yatay değer verilmiş ise, dikey değer %50 olarak kabul edilecektir. Yüzde değerler ve uzunluk değerleri eksi değerler alabilir. Örn -2px %10 gibi. Aşağıdaki örnekler genel kullanım için yararlıdır:

• top left = left top = 0% 0%
• top = top center = center top = 50% 0%
• right top = top right = 100% 0%
• left = left center = center left = 0% 50%
• center = center center = 50% 50%
• right = right center = center right = 100% 50%
• bottom left = left bottom = 0% 100%
• bottom = bottom center = center bottom = 50% 100%
• bottom right = right bottom = 100% 100%

Örnek:

body
{
background-image: url(deneme.gif);
background-repeat: no-repeat;
background-position: center;
}

background

Bu özellik Zemin(background) ile ilgili tüm özelliklerin bir arada kullanımı sağlar.

Yapısı : background: <deger>
Aldığı Değerler : <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Başlangıç değeri: Tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Örnek:

body{
background: white url(deneme.gif)
}
blockquote {
background: #f00
}
p {
background: url(../images/deneme.png) #f00 fixed
}
table{
background: #0c0 url(deneme.jpg) no-repeat bottom right
}

Hata çözmede izlenecek yöntemlerden bir tanesi elementlere kenar çizgisi(border) atamaktır.

li a {
	border: 1px solid red;
}

Diğer bir yöntemde elemente ardalan rengi(background-color) uygulamaktır.

#icerikalani {
	background-color:#999;
}

Böylece elementin etki alanı görülecek ve hatayı tespit kolaylaşacaktır.

http://bitesizestandards.com/bites/automatic-coloured-rows

İkisini karşılaştırırsak alispart’ın kodu her tabloya özel uygulanaiblir. Ancak bitesizestanmdar’ın kodu sayfadaki tüm tabloları bu şekle çeviriyor. Seçimi sayfanıza göre yapacaksınız artık.