YoRuMSuZ
Biz işimize bakalım...
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ı basir .css kodları oluşturalım. Bu çalışmada kullanılan örnek 20x20 boyutundaki zemin.gif adlı resim bu:
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.
Yukardaki satırlar hakkında kısa bir açıklama yapacak olursak ilk önce;
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.
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.
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.
Ö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ı basir .css kodları oluşturalım. Bu çalışmada kullanılan örnek 20x20 boyutundaki zemin.gif adlı resim bu:
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.
Kod:
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.font-size: 9pt;
font-family: arial,verdana,geneva,sans-serif;
}
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.
PHP:
<html>
<head>
<meta http-equiv="Content-Language" content="tr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Cerez CSS</title>
<link rel="stylesheet" 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 sorala</td>
</tr>
<tr>
<td class="style08" width="100%" height="40"> 08 - Font ve arkaplana
otm. renk</td>
</tr>
</table>
</body>
</html>Ş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.
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.
