Top

Hasan Yasin TÜRKYILMAZ > Dijital Pazarlama Uzmanı, Growth Hacker, Dijital Stratejist, Sosyolog

Bugün şu hasta halimle, Hürriyet bumerang sayesinde bu güzel anket sitesi ile karşılaştım. Çok da makul gözüken ödülleri var. Mesela; "fikirmetre üyesi olduktan sonra dolduracağın her anket için puan kazanacaksın. Kazandığın puanları ister e-ticaret sitelerinde isterseniz sosyal sorumluluk organizasyonlarında kullanabilirsin. Bunun için yapman gereken fikirmetre’ye giriş yaptıktan...

Biz bağımsız bir ülkeyiz. Fakat Nato başlığı altında füze kalkanını Yunanlıları kapı dışarı ettiğimiz memleketimize yerleştirecekler. Bu sayede Amerika Rusya'yı(Kızıl kuvvet-hala böyle geçmekte-), Avrupa'yı(BM ve Avrupa Birliği gücü), İran'ı(İslamik bağımsız güç-sözde nükleer-) ve hatta Türkiye'yi(Dünya'nın potansiyel hakimi, İslamik güç,ortadoğuya sözü geçen devlet) kontrol altında tutabilecek. Özellikle...

Koskoca güzelliklerle dolu bir ramazan ayını geride bıraktık. Eriştiğimiz için şükürler olsun ve bir daha erişebilmek nasip olur inşallah. Herkesin ramazan bayramı kutlu olsun. Şeker değil dikkatinizi çekerim, Ramazan Bayramı. Teröristlerin kökünün kazınacağı günlere ulaşabilmek ve o günleri görebilmek dileğiyle! Birlik ve beraberliğimizi hep koruyalım...

Bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…


Tüm HTML elemanları kutu olarak düşünülebilir. CSS’te, “box model”(kutu modeli) terimi  tasarım ve düzen hakkında konuşulduğunda kullanılır.

CSS box model HTML elementlerini saran bir kutu aslında ve margin’e(dış boşluk), border’a(kenar/çerçeve), padding’e(iç boşluk, içeriğin uzaklığı)ve asıl içeriğe(content) dayanır.

Box model elementlerin etrafına sınır çekmemize izin verir ve ilgili elementlere yakın konumlarına boşluklar koymamızı sağlar.

Alttaki resim kutu modelini anlatmaktadır:

Farklı bölümlerin açıklaması:

  • Margin – border’ın yani çerçevenin etrafını temizler ya da boşluk bırakır-boşaltır- da denilebilir. Margin arkaplan rengine sahip değildir, tamamen transparandır. Bizler okulda kompozisyon yazarken A4 kağıdın her tarafında 5 cm boşluk bırakırız ve içerik o boşluklarda yer almaz. İşte o boşluk margin’dir.
  • Border – Bir border padding(içeriği uzaklaştıran boşluk) ve content.(içerik) i de içine alan bir sınırdır. Border kutunun arkaplan renginden etkilenir.
  • Padding – Content’in yani içeriğin çevresindeki alanı boşaltır ya da temizler. Padding kutunun arkaplan renginden etkilenir.
  • Content – Kutunun içeriğidir yazılar ve resimler burada görünür.

Tüm tarayıcılarda doğru bir şekilde gözükmesini sağlayabilmeniz için box model’in nasıl işlediğini bilmeniz gerekmektedir.


Bir elementin Width ve Height değerleri(Genişlik ve yükseklik)

Önemli:Css ile bir elementin genişlik ve yükseklik değerlerini belirttiğinizde sadece içeriğin yer alacağı alanın genişlik ve yüksekliğini belirtmiş oluyorsunuz. Bir elementin tam kapladığı alanı bilebilmek için padding, border ve margin değerlerini de eklemelisiniz.

Aşağıdaki örmekte bir elementin toplam genişliği 300px’dir:

width:250px;
 padding:10px;
 border:5px solid gray;
 margin:10px;

Şimdi ölçelim:
250px (width yani genişlik)
+ 20px (sol ve sağ padding yani iç boşluk)
+ 10px (sol ve sağ çerçeve yani border)
+ 20px (sol ve sağ margin yani dış boşluk)
= 300px toplamda

Temamın tablo stilleri uygun olmadığı için göstermek istediğim tablo biçimini şuradan görebilirsiniz buraya tıklayarak.

Ek açıklama da; bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…

Table Borders(tablo kenarları)

border özelliği kullanılarak tablo kenarları css ile biçimlendirilir.

Aşağıdaki örnek siyah bir kenar oluşturur table, th ve td elementleri için:

Örnek

table, th, td
 {
 border: 1px solid black;
 }
 Kendiniz deneyin! »

Örnekteki tablonun kenarlarının çift olduğuna dikkat edin. Bu table ve th/td elementlerinin ayrı olarak kenar özelliğine sahip olduğunun göstergesidir.

Tablo kenarında tek bir çizgi göstermek için border-collapse özelliğini kullanın.