1. * 5651 Sayılı Kanun'a göre TÜM ÜYELERİMİZ yaptıkları paylaşımlardan sorumludur.
    * Telif hakkına konu olan eserlerin yasal olmayan şekilde paylaşıldığını ve yasal haklarının çiğnendiğini düşünen hak sahiplerinin İLETİŞİM bölümünden bize ulaşmaları durumunda ilgili şikayet incelenip gereği 1 (bir) hafta içinde gereği yapılacaktır.
    E-posta adresimiz

CSS İle Arkaplan Resimlerini Konumlandırmak

Konusu 'WebMaster Bölümü' forumundadır ve YoRuMSuZ tarafından 15 Aralık 2007 başlatılmıştır.

  1. YoRuMSuZ
    Avare

    YoRuMSuZ Biz işimize bakalım!

    Katılım:
    7 Haziran 2006
    Mesajlar:
    24.430
    Beğenileri:
    7.357
    Ödül Puanları:
    11.330
    Cinsiyet:
    Bay
    Banka:
    8.819 ÇTL
    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.

    Kod:
      Kodları görebilmek için ÜYE omalısınız !
    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.
    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">&nbsp;01 Arkaplanı kapla</td>
      </
    tr>
      <
    tr>
        <
    td class="style02" width="100%" height="40">&nbsp;02 Sola bir kez sırala</td>
      </
    tr>
      <
    tr>
        <
    td class="style03" width="100%" height="40">&nbsp;03 Üste bir kez sırala</td>
      </
    tr>
      <
    tr>
        <
    td class="style04" width="100%" height="40">&nbsp;04 Sol üste bir kez</td>
      </
    tr>
      <
    tr>
        <
    td class="style05" width="100%" height="40">&nbsp;05 Sağ üste 1 kez</td>
      </
    tr>
      <
    tr>
        <
    td class="style06" width="100%" height="40">&nbsp;06 - %50 sinden başla ve
        sırala
    </td>
      </
    tr>
      <
    tr>
        <
    td class="style07" width="100%" height="40">&nbsp;07 Üstte boşluk bırak
        ve sorala
    </td>
      </
    tr>
      <
    tr>
        <
    td class="style08" width="100%" height="40">&nbsp;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.

    Alttakiki resimde görüldüğünün tıpkısı bir görüntü elde edeceksiniz.
    [​IMG]
    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.​
     

Sayfayı Paylaş