Konu: CSS Dersi: Başlangıç, Padding ve Margin Oluşturma

CSS bu dönemde websitelerinin standart yapımında kullanılagelen yeni sistemdir. Bir geliştirici ya da dizayn ustası olun olmayın, CSS programlamada ve dizaynda bir köprü oluşturacak ve size de yardımcı olacaktır. Farkettiniz mi bilmiyorum, kullandığımız forum sistemi olan vBulletin, yazımızı yazdığımız şu sıralarda henüz CSS ile kodlanmış değil, fakat aşağıda sizlere sıralayacağımız temel CSS standartlarını baz alarak biz [ Linki görebilmek için buraya tıklayıp foruma üye olmalısınız ]CSS ile kodlamış bulunmaktayız. Gelin bu standart bilgilere beraber bakalım:

Genel Bakış: Ne Tasarlıyoruz


Standart olarak kullanılan, aşağıdaki başlıklara göz atacağız:

1. Padding <--> margin
2. Floats
3. Center alignment
4. Ordered vs. unordered lists
5. Styling headings
6. Overflow
7. Position

1. Padding <-> Margin

Yeni başlayanların en çok karıştırdığı olgu padding ve margin kodlamalarıdır. Pratikte mesela "height" kullanırken yapılan padding veya margin kodu çoğu zaman hata(bug)ya sebep olmakta. Bu iki standardı anlama CSS'in temelini oluşturacaktır.

Nedir bu Padding ve Margin?

Padding bir elementin içteki alanıyla ilgiliidir, margin ise elementin dış alanıyla ilgili kısmıdır.

İkisi arasındaki farkı anlamak için arkaplan ve border kullanılır. Benzersiz padding, marginler birbirleri üzerine örtüşmezler, çünkü asıl elementin dış kısım boşluğunu oluştururlar.
Aşağıdaki resimleri inceleyince daha iyi anlayacaksınız:

[ Linki görebilmek için buraya tıklayıp foruma üye olmalısınız ]

[ Linki görebilmek için buraya tıklayıp foruma üye olmalısınız ]

Margin ve padding değerleri saat yönünde ayarlandı, üstten başlıyor.

Pratik örnek: Aşağıda yer alan örnekteki iki paragraf arasındaki <h2> tagında gördüğünüz gibi margin, paragraflar arasında beyaz bir boşluk yaratırken padding (gri renkli arka planla gördüğünüz bölüm) iç kısımdaki PaylaX <h2> başlığı bölümünü rahatlatmaktadır.

[ Linki görebilmek için buraya tıklayıp foruma üye olmalısınız ]


Margin ve Padding Değişkenleri

Yukarıdaki <h2> örneğimizdeki kodlar aşağıdaki gibidir:

Kod:

h2 {background: #f0f0f0; border: 1px solid #ddd; margin: 15px 0; padding: 15px; }

2. Floats (Türkçe karşılığı yüzen cisimler)

Float'lar CSS-tabanlı websitelerinin temel elementleridir ve align image(resimleri sıraya koyma) 'te ve layout(yerleşim) ve column(sütun) düzenlemesinde kullanılırlar. HTML elementlerinden anımsayacağınız right ve left align elementlerindekinin karşılığıdır.

[ Linki görebilmek için buraya tıklayıp foruma üye olmalısınız ]
float: left değişkeni elementleri sola doğru sıralar ve aynı zamanda yerleşim ve sütun oluşturmada kullanılır. Aşağıdaki örnekte kullanılan float: left elementine bakın;

[ Linki görebilmek için buraya tıklayıp foruma üye olmalısınız ]