CSS İle Arkaplan Resimlerini Konumlandırmak
Yaptığımız sayfalardaki tabloların veya tabloya ait hücrelerin arkaplanlarına resimler atayarak çok güzel görünümler elde edebiliriz. Bunu her seferinde manuel olarak kod ekleyerek yapabiliriz ancak bu tasvip edilmeyen uzun yoldur. Biz bunun için .css dosyasından yararlanabiliriz.
Örnek olarak forumumuzun üst kısmındaki linklerde görülen sayfa kıvrımı şeklindeki resim bu yolla atanmıştır.
Örnek olarak bir tablo hazırlayarak her hücre için farklı basit .css kodları oluşturalım. Bu çalışmada kullanılan örnek 20×20 boyutundaki zemin.gif adlı resim solda.
Kodları inceledikten sonra durum daha iyi kavranacaktır.
Yukarıdaki zemin.gif imajını bilgisayara alalım.
Sonra bir .txt dosyası açalım ve alttaki kodları ekleyip CerezStyle.css adı ile kaydedelim.
table {
font-size: 9pt;
font-family: arial,verdana,geneva,sans-serif;
}
.style01 {
background-image: url('zemin.gif');
}
.style02 {
background-image: url('zemin.gif');
background-repeat: repeat-y;
}
.style03 {
background-image: url('zemin.gif');
background-repeat: repeat-x;
}
.style04 {
background-image: url('zemin.gif');
background-repeat: no-repeat;
}
.style05 {
background-image: url('zemin.gif');
background-repeat: no-repeat;
background-position: top right;
}
.style06 {
background-image: url('zemin.gif');
background-position: 50% 50%;
}
.style07 {
background-image: url('zemin.gif');
background-attachment: fixed;
}
.style08 {
background: #ccddee;
font-size: 8pt;
}
Yukardaki satırlar hakkında kısa bir açıklama yapacak olursak ilk önce;
table {
font-size: 9pt;
font-family: arial,verdana,geneva,sans-serif;
}
kodları ile tablo için yazı stilimizi belirledik. Sonra her hücre için ayrı ayrı kod ekleyerek resmimizin hücrede nasıl görüneceğini belirledik. Tabii siz tümünü değil sadece işinizi görecek stili veya stilleri kullanacaksınız.
Artık .css dosyamız hazır olduğuna göre yine bir text editör veya FrontPage programını açıp alttaki kodları kopyalayıp yapıştıralım ve CerezStyle.css dosyamızın olduğu yere index.htm adı ile kaydedelim.
<html> <head> <meta charset="UTF-8" /> <title>Cerez CSS</title> <link rel="stylesheet" target="_blank" href="CerezStyle.css" mce_target="_blank" href="CerezStyle.css" type="text/css"> </head> <body> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="200"> <tr> <td class="style01" width="100%" height="40"> 01 - Arkaplanı kapla</td> </tr> <tr> <td class="style02" width="100%" height="40"> 02 - Sola bir kez sırala</td> </tr> <tr> <td class="style03" width="100%" height="40"> 03 - Üste bir kez sırala</td> </tr> <tr> <td class="style04" width="100%" height="40"> 04 - Sol üste bir kez</td> </tr> <tr> <td class="style05" width="100%" height="40"> 05 - Sağ üste 1 kez</td> </tr> <tr> <td class="style06" width="100%" height="40"> 06 - %50 sinden başla ve sırala</td> </tr> <tr> <td class="style07" width="100%" height="40"> 07 - Üstte boşluk bırak ve sırala</td> </tr> <tr> <td class="style08" width="100%" height="40"> 08 - Font ve arkaplana otm. renk</td> </tr> </table> </body> </html>
Görüldüğü gibi <head></head> kodları arasına .css dosyamızın yolunu gösteren kodu yazdıktan sonra tabloya ait hücreye ilgili css kodunu yazmak. td tagından sonra class=”xxx” şeklinde css dosyamızdaki tanımı yazıyoruz. (Kodları inceleyiniz)
Şimdi aynı yerde (herhangi bir klasörün içi olabilir);
1- zemin.gif
2- CerezStyle.css
3- index.htm
dosyaları oluştu. Artık index.htm dosyasına tıklayarak uygulamayı çalıştırabiliriz.
Soldaki resimde görüldüğünün tıpkısı bir görüntü elde edeceksiniz.
Her satırdaki numara CerezStyle.css dosyasındaki kodlarla örtüştüğü için kolaylıkla hangi kodların hangi hücreye hitap ettiğini anlayabilirsiniz.
