closeSitedeki bazı videolar Youtube'ta yaptığım bir hata nedeniyle çalışmamaktadır..

Ali MengŁ | Kişisel Web Sayfasi

Margin & Padding Nedir? Nasıl Kulllanilir?

Arkadaslar Bugün Css de Çok önemli bir kod olan padding ardindan Marginin Ne Olduğunu ve Nasıl Kullanildiğini Göstericem.Bununla İlgili Olarak Reklam arkaplani ve alanı Kodlama Dersini Hazırlamıstık.Bu Dersdede Bu kodlari Kullanmiştik.

  Padding Ve Margin Nedir? Aralarindaki Fark Nedir?
Arkadaslar Bir Katman Düsünün bu Katmanin içeriğini katmanin her noktasina,Önünde Bir Engel Olmadiği Sürece götürebiliriz.İşte Bu İşlem Padding Kodu Sayesinde Yapiliyor.Margin Kodu İse Katmanin Bulunduğu sayfanin yine önünde bir engel olmadiği sürece her noktasina getirebiliriz.Buda Margin Kodu Sayesinde Yapiliyor.
Aşağıdaki Kırmızı Alani Katmanin Bulunduğu sayfa mavi alanida katman olarak kabul edersek.Kodumuz Su Sekilde olur.

#katmanadi {
margin-left:2px;
padding-top:5px;
padding-left:3px;
}

Margin-left:2px; dedik ve katmanimizi bulunduğu kısımdan 2px sağa aldik.Padding-top:5px; dedik ve katmanimizdaki içeriği 5px; aşağı aldık.Aynı sekilde padding-left:3px; dedik ve içeriği 3px sağa aldik.


Padding Kodunu Kullanirken Neye Dikkat Etmeliyiz.
Arkadaslar Boyutlari belli bir katmanin içeriğinin konumunu oynatmak istiyorsak.Yapicağımız İşlemler var.Örneğin tasarimlarda photoshopta çizdiğimiz resimleri arkaplan olarak katmanimiza veriyoruz.500px; genisliği olan bir katmana haliyle 500px boyutunda bir arkaplan veriyoruz.İçeriğin konumu değistirmek için padding-left:5px; yaptık.Bu sayede katmanin boyutunu 500px+5px=505px olarak arttirdik.Ve Haliyle bu boyuta uymayan arkaplan resmimiz sağ tarafa doğru açildi ve kendini tekrar etmeye basladi.Bunu Engellemek İçin.Width Değerleri için padding left veya right'a verdiğimiz değeri width değerinden Çıkartıyoruz.Width 500px olan bir katmanin içeriğini 5px; sağa itmek için Width değerini padding-left değerinden çıkartıyoruz.Aynı Şekilde height değeri 500px olan bir katmanın içeriğini bulunduğu konumdan aşağı doğru itmek için padding-top değerini height değerinden çıkartıyoruz.Bu olayi daha iyi kavramak için Reklam Arkaplani ve Alani kodlama dersini Okumanizi Öneririm.

Padding Ve Margin Kodlari
Arkadaslar Normalde Padding'e veya Margin'e vericeğimiz bir 5px değeri katmanin veya içeriğin Aşağıdan ve Yukaridan,Sağdan ve Soldan Eşit bir sekilde 5er px uzaklaşmasi anlamina gelir.Ama Biz sağdan uzaklaşirken soldan uzaklaşmasini istemiyorsak.Bunun için yukarida bahseddiğim right,left,top,bottom kodlarini kullanicaz.

Genislik (Width) İle Alakali Olanlar

Margin-Left => Katmanin Sayfanin Sol Kısmından Uzakliği
Margin-Right => Katmanin Sayfanin Sağ Kısmından Uzakliği
Padding-Left => Katman İçeriğinin Katmanin Sol Kısmından Uzakliği
Padding-Right => Katmanin içeriğinin katmanin Sağ kısmından uzakliği

-Unutmayiniz ! Padding Right ve Left Width Değerinden Çıkarılıcak. Sonuç Yeni Width Değeri Olarak Yazılacak

Uzunluk (Height) İle Alakali Olanlar
Margin-Top => Katmanin Sayfanin Üst Kısmından Uzakliği
Margin-Bottom => Katmanin Sayfanin Alt Kısmından Uzakliği
Padding-Top => Katman İçeriğinin Katmanin Üst Kısmından Uzakliği
Padding-Bottom => Katmanin içeriğinin Katmanin Alt kısmından uzakliği

-Unutmayiniz ! Padding top ve bottom Height Değerinden Çıkarılacak.Sonuç Yeni Height Değeri Olarak Yazılacak

Margin Kodumuza Örnek Olarak HackerFriend adresinin yayınlamış olduğu Tablo Ortalama Kodunu verebiliriz.

table{Margin-Left:auto;Margin-Right:auto;}
Kodu Kullanilmiş.Bu demek oluyorki sitemdeki tablolari sağdan ve soldan eşit bir şekilde ortala.Dikkat Bu Kod aşağı ve yukari ortalamada kullanilmaz.Bu Başka bir Kodlama Dilinde Yapilabilir.


Bu Ders Ali Mengü Tarafindan Hazırlanmıştır.Sorusu,Şikayeti,Önerisi Olan Yorum Kısmını Kullanabilir.

İligili Sayfalar
Reklam Arkaplani ve Alani Kodlama





Bu sayfa hakkındaki son yorum:
Yorumu gönderen: evden eve nakliyat, 29.01.2016, 20:23 (UTC):
kartalevden-evenakliyat.com sitemdeki sileder in alteındalı kırmzı alandakı iletişim icon ve yazıların kırmızı alan içinde bıraz daha yukarıda olsun ama yapamadım siteye bi goz atıp bana anlacK var mı yarım edin arkadaslar

Yorumu gönderen: kkk, 03.08.2015, 06:47 (UTC):
keske daha basıt anlatılsaymıs kodlar

Yorumu gönderen: eren, 26.07.2015, 09:00 (UTC):
çok sagol çok işime yaradı sitenin tasarımında çok lazım olacak kodlar sagol

Yorumu gönderen: eeeeee, 05.05.2015, 13:32 (UTC):

Yorumu gönderen: Pharmc459, 14.02.2013, 07:27 (UTC):
Hello! ddckddc interesting ddckddc site! I'm really like it! Very, very ddckddc good!

Yorumu gönderen: Pharmg593, 01.02.2013, 18:50 (UTC):
Hello! kkeeddf interesting kkeeddf site! I'm really like it! Very, very kkeeddf good!

Yorumu gönderen: Pharma406, 01.02.2013, 18:50 (UTC):
Hello! ckdcddk interesting ckdcddk site! I'm really like it! Very, very ckdcddk good!

Yorumu gönderen: Pharme914, 27.01.2013, 18:51 (UTC):
Hello! ddekeee interesting ddekeee site! I'm really like it! Very, very ddekeee good!

Yorumu gönderen: Pharmd520, 26.01.2013, 01:41 (UTC):
Hello! dgcekfd interesting dgcekfd site! I'm really like it! Very, very dgcekfd good!

Yorumu gönderen: Pharmk509, 21.12.2012, 16:44 (UTC):
Hello! ddeefbk interesting ddeefbk site! I'm really like it! Very, very ddeefbk good!

Yorumu gönderen: Atakan Goktepe, 23.06.2012, 19:19 (UTC):
Emeğine Sağlık Kardeşim Aklıma Takılan Sorulardan Biriydi.

Yorumu gönderen::26.07.2011, 10:32 (UTC)
alimengu
alimengu
Kapalı

Frekans ==> Yorumun için teşekkür ederim.Söylediklerini Dikkate alicam

Yorumu gönderen: frekans, 24.07.2011, 20:30 (UTC):
Olumlu tarafların oldukça fazla... Ben sadece olumsuz olanları yazayım bundan gerisinin olumlu olduğunu çıkarırsın...

Sitende kullanmış olduğun yazı tipi, rengi, ve arkaplanla uyumsuzluğu söz konusu... Bunun dışında hazırlamış olduğun videolarda sesini de kullanırsan hem kendine hem de vidolarını izleyip tatbik edenlere daha büyük bir iyilik etmiş olursun...
Sonuç olarak yaşına ve yaptıklarına göre "helal olsun" lafını hak ediyorsun...

Yorumu gönderen::11.06.2011, 12:55 (UTC)
kral-html-kodlari
kral-html-kodlari
Kapalı

teşekkürler

Yorumu gönderen::14.04.2011, 10:05 (UTC)
tasarim-dunya
tasarim-dunya
Kapalı

Bu bilgiler çok yararlı size binlerce teşekkürümü sunuyorum

Yorumu gönderen::13.04.2011, 19:51 (UTC)
alimengu
alimengu
Kapalı

Teşekkürler.

Yorumu gönderen::13.04.2011, 19:23 (UTC)
exporler
exporler
Kapalı

SAOL KARDEŞ EMEĞİNE SAĞLIK EE TABİKİDE ELİNEDE SAĞLIK xD

Yorumu gönderen::12.04.2011, 20:11 (UTC)
alimengu
alimengu
Kapalı

yorumun için tesekkür ederim ustad

Yorumu gönderen::12.04.2011, 19:51 (UTC)
wwebw
wwebw
Kapalı

Teşekkürler.Çok güzel bilgiler.



Bu sayfa hakkında yorum ekle:
İsminiz:
Mesajın:

Bugün toplam 23 ziyaretçi sitemizi dolaştı.
http://www.mypagerank.net/services/pagerankbutton/pagerankbutton.php?aut=de510918aee37d99078ff98e1f31074c56421665b926a44a75
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=