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.

Zemin.gifÖ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.

İlgili içerikler

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.

TiTaNiC

İnternet ortamında hobi amaçlı yayınladığı içeriklerle kullanıcılara doğru bilgilere ulaştırmayı ve eğlendirmeyi hedeflemektedir...

İlgili içerikler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu