Bu ders alimengu.tr.gg sitesinden alınmıştır.Siteye Teşekkür Ederiz.

Bu dersimizde Gelen Soru "Reklam Alani Nasıl Kodlanir" kısaca Anlaticam Yapamayanlar Yorum Atarsa Yardimci Olurum.

Öncelikle Arkadaslar benim elimde hazır bir tasarim olmadiğindan tasarim üzerinde anlatamayacam fakat Bu işlemleri Ayni şekilde uygularsaniz istediğiniz katman,tablo gibi bölgelerde kullanabilirsiniz.Öncelikle Kısaca özetleyeyim padding kodlariyla reklami istediğimiz bölgeye getirmeye çalışıcağız.

İlk Olarak Kullanacağım Resimler ;

Reklam Arkaplani Boyut 508x63

 

Reklam  Banneri 468x60



Amacimiz Reklam Bannerini Reklam Arkaplanina uygun bir şekilde yerleştirmek.Öncelikle Reklam Arkaplani için bir div katmani oluşturuyoruz "< div  id="alireklamarkaplani"></ div >" Ayni Sekilde Css Olarakda Kodumuzu Başlatiyoruz#alireklamarkaplani {buraya kodlar gelicek} Ve boyutlarını Reklam Arkaplanlanimiza göre ayarliyoruz benim Reklam Arkaplanima Göre width: 508px; ve height: 63px; Ardindan Katmanimiza Bir Arkaplan veriyoruz. background-image:arkaplanresmi Bu kısım Reklam Arkaplani katmanini oluşturmamiz için gerekli. Şimdi Kendi değerlerinizi Aşağıdaki Kırmızı yazılı yerlerle değiştirin. 
<style type="text/css">
<!--
#alireklamarkaplani {
    width: 508px;
    height: 63px;
    background-image: url(https://img.webme.com/pic/a/alimengu/reklamarkaplan.png);
}
-->
</style>
<div id="alireklamarkaplani"></div>

Yukardaki koda göre benim katmanimin görünüsü bu şekilde Eğer sizde Doğru Yaptıysanız Katmanda sizin reklam arkaplaniniz görünücektir;

Şimdi yapıcağımız işlem reklam bannerimizi katmana Eklemek.Bu Gayet Kolay Bir İşlem Bunun üzerinde fazla durmayacağım.
< div id="alireklamarkaplani"> buraya reklam kodunuz gelicek bannerin 468x60 boyutlarinda olmasina dikkat edin  < /div>  benim ekleyeceğim kod;
<img src="https://img.webme.com/pic/a/alimengu/reklam2.png" alt="" />

Şimdi Reklam Arkaplani Kodumuzun Son Haline Bakalim.
<style type="text/css">
<!--
#alireklamarkaplani {
    width: 508px;
    height: 63px;
    background-image: url(https://img.webme.com/pic/a/alimengu/reklamarkaplan.png);
}
-->
</style>
<div id="alireklamarkaplani"><img src="https://img.webme.com/pic/a/alimengu/reklam2.png" alt="" /></div>

Koda göre katmanimizin görünüsü Doğru Yaptiysaniz Sizinkide Buna Benzer Olucaktir;

Şimdi Reklam Bannerini İstediğimiz Konuma Getirme işlemini Yapıcağız.Bu kısmı size kendimce açıklayayım Padding kodunu kullanarak katmanimizin içeriğini katmanin içinde istediğimiz yere koyabiliriz.Bu işlemde toplama ve çıkarma işlemine ihtiyacimiz olucak.  Benim Bu kodda kullanicağım paddingler padding-top(içeriğin katmanin üst kısmına uzakliği) padding-left(içeriğin katmanin sol kısmına uzakliği) olucak.İlk Olarak içeriğin ust kısmına uzakliğindan baslayalim.Öncelikle Bilmeniz Gereken En önemli Kural padding-top kodunu kullanmak için height değeri - padding-topdeğeri=Yeni height Değeri işlemini kullanmamiz gerekiyor.Padding-left kullanmak içinde width değeri -  padding-leftdeğeri=Yeni width değeri bu div katmanini kullandiğiniz herşey için geçerlidir.Bu işlemi Tablo Tasarimda Kullananlarin Yapmasina Gerek ve imkan yoktur.
Ben Reklam bannerinin katmanimin ust kısmandan uzakliği için 1px değer veriyorum.Yani padding-top:1px; Bu durumda kodumuz ;
<style type="text/css">
<!--
#alireklamarkaplani {
    width: 508px;
    height: 62px;
    background-image: url(https://img.webme.com/pic/a/alimengu/reklamarkaplan.png);
    padding-top:1px;
}
-->
</style>
<div id="alireklamarkaplani"><img src="https://img.webme.com/pic/a/alimengu/reklam2.png" alt="" /></div>

Dikkat Ederseniz height değeri 63-1=62 oldu.Bununla Birlikte Reklam Arkaplani kodumun yeni görünüşü aşağıdaki gibidir.Siz padding değerini Kendi Tasariminiza veya arkaplaniniza göre verin.

Şimdi sıra Padding-left uygulamaya geldi.İçeriğin Katmanin Sol Kısmından Uzakliği için 28px değeri veriyorum. YaniPadding-left: 28px; Budurumda Kodumuz;
<style type="text/css">
<!--
#alireklamarkaplani {
    width: 480px;
    height: 62px;
    background-image: url(https://img.webme.com/pic/a/alimengu/reklamarkaplan.png);
    padding-top:1px;
    padding-left:28px;
}
-->
</style>
<div id="alireklamarkaplani"><img src="https://img.webme.com/pic/a/alimengu/reklam2.png" alt="" /></div>

Yine Dikkat Ederseniz width değeri 508-28=480 oldu.Bununla Birlikte Reklam Arkaplaninin görünümü aşağıdaki gibidir.
Siz padding değerini Kendi Tasariminiza veya arkaplaniniza göre verin.


Ve işte Sonuç;