‘Kutu-Modeli’ etiketi için sonuçlar

Süper bir özellik display:inline-block

Şubat 28th, 2010 • 20 yorum CSS, XHTML
Etiketler: , , , ,

Alışkanlıklar kolay kolay bırakılmıyor. Zamanında display:inline-block özelliğini Firefox desteklemediği(Firefox desteği 3. sürümden itibaren geldi) için kullanmıyordum. Hala orada kalmışım hiç kullanmıyorum bu özelliği, şimdi bir projede gerekti ve kullandım. Çok hoşuma gitti. Tekrar bir hatırlayalım display:inline-block özelliği hibrit bir özelliktir. Bir yanı satır içi davranırken bir yanı blok davranır.

display:inline-block tanımı yapılmış elemanlar satır için akış içinde satır içi eleman gibi davranırken, elemente genişlik, yükseklik ve dikey margin değerleri tanımlanırsa satır içinde blok-level özelliğine bürünür.

display:inline-block elementler çevresindeki elementlere ve satır içi kutu içeriklerine göre farklı davranışlar gösterir.

Durumu daha iyi anlamak için genel bir örnek yapalım. 3 paraftan oluşan bir içeriğimiz olsun ve bu içerikteki belli bir kısmı paragraf etiketi içine alalım ve bunlara sırası ile display:block, display:inline ve display:inline-block tanımları atayalım

<div id="denemeBir"> Lorem ipsum dolor sit amet... <p>Praesent id nunc eros. Integer mauris orci, venenatis ac tempor ut, gravida ac diam. </p> Pellentesque...</div>
<div id="denemeIki">Quisque at venenatis nulla...<p>Nam fermentum porttitor hendrerit.</p> Mauris ante nulla..</div>
<div id="denemeUc"> Sed urna neque...<p>Sed est lacus, laoreet at malesuada quis, convallis ut nibh.</p> Sed dapibus...</div>

CSS kodu

div {margin: 10px 0; border: 1px solid #000;}
p {border: 1px dotted #000;}
    div#denemeBir p {display: block; width: 50px; text-align: center; background-color:#FF0}
    div#denemeIki p {display: inline; width: 50px; text-align: center; background-color:#0FF}
    div#denemeUc p {display: inline-block; width: 50px; text-align: center; background-color:#F0F}

Örneği görmek için tıklayınız.

Aynı yapıdaki elemanların display özelliğine sırası ile block, inline ve inline-block tanımlarını atadık.

display:block uygulanan paragraf kendisine atanan width, text-align:center özelliğini yorumlamış ve blok-level bir element olarak sonrasına bir boşluk bırakmıştır.

display:inline tanımı yapılmış paragraf kendisine atanan width, text-align:center tanımlarını görmemiştir.

display:inline-block uygulanmış paragraf ise kendisine uygulanan width ve text-align:center tanımlarını görmüş ama bir blok-level element gibi sonrasına bir boşluk bırakmamıştır. Tam bir hibrit özellik göstermiştir.

display:inline-block tanımını daha iyi anlamak için nerelerde kullanırız neler yapabiliriz buna bakalım.

Float kullanmadan display:inline-block ile elemanları yan yana dizmek

<div id="menu">
<a href="">Ana Sayfa</a>
 <a href="">Ürünler</a>
<a href="">İletişim</a>
</div>

CSS kodumuzu yazalım;

#menu a{
  width:150px;
  height:50px;
  display: inline-block;
  margin:0;
  padding:5px;
  color: #1B1B1B;
  background-color: #E2E2E2;
  text-decoration: none;
  border-top:5px solid #999
}

Örneği görmek için tıklayınız.

Bu kod ile biz öğeleri yan yana dizeriz. Normalde hiç bir tanım yapmasak da bu elemanlar yan yana dizilecekti, ancak bu elemanlar arasındaki mesafeyi ayarlıyamıyacaktık. Hem satır içi eleman gibi yan yana dursun hemde genişlik, yükseklik ve margin tanımlarını uygulayalım istersek display:inline-block tanımı yapmalıyız.

Dikeyde ortalama

Float uygulanmış elemanların dikeyde ortalamak çok zordur, aksine display:inline-block uyguladığımız elemanları sadece vertical-align özelliği kullanarak dikey ortalama yaparız. Dikeyde ortalama aynı seviyedeki elemanlar arasında olduğunu unutmamak lazım.

Bir örnek yapalım. Yan yana dizilmiş üç kutu hazırlayalım ve bunları kapsayıcı katmana göre dikey olarak üstte, ortada ve altta hizalayalım.

<div class="anaKapsul">
    <div class="solKutu">Sol</div>
    <div class="ortaKutu">Orta</div>
    <div class="sagKutu">Sağ</div>
</div>

CSS kodumuzu yazalım.

.anaKapsul { border: 1px gray solid; padding: 5px; text-align: center; }
    .solKutu { display: inline-block; background-color: lightblue; vertical-align: middle; width: 200px; height: 200px; }
    .ortaKutu { display: inline-block; background-color: yellow; vertical-align: middle; width: 200px; height: 150px; }
    .sagKutu { display: inline-block; background-color: gray; vertical-align: bottom; width: 200px; height: 100px; }

Örneği görmek için tıklayınız.

Firefox, Safari, Google Chrome, Opera ve İE8′de bu görüntüyü elde ederiz. Ancak ie7 ve ie6′da durum böyle değildir.

Bu tarayıcılarda aynı sonucu elde etmek için bu tarayıcılar için bu elemnalara display:inline ve zoom:1 tanımı yapmalıyız. Bunun için tüm tarayıcılar için düzeltmeler kısmındaki kodlardan yararlanacağım.

*:first-child+html div.anaKapsul div{display:inline; zoom: 1;}
* html div.anaKapsul div{display:inline; zoom: 1;}

Bu kodları ekledikten sonra sorunumuz düzeldi.

Kaynaklar

PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II

Ocak 6th, 2010 • 35 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , , , , , ,

Ana Sayfa Kodlaması

Bir önceki makalemde sizlere kodlamaya başlamadan önceki süreci anlattım. Şimdi sizlerle sitenin Ana Sayfasını nasıl kodladığımı anlatmaya çalışacağım. Bu makaleye yazacağımı düşünerek kodlama yaparken notlar tutmuştum, bu makale biraz da o notların derlemiş hali şeklinde olacaktır.

Okumaya devam edin »

En çok kullandığım CSS Hileleri(Hack)

Kasım 3rd, 2008 • 24 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , , ,

Yaklaşık 3-4 senedir css ile web sayfası kodluyorum. CSS ile web sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. CSS hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında CSS ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer CSS hileleri olması idi biz farklı tarayıcılar için değil belirli tarayıcılar için kod yazmış olacaktık ki bu erişebilirlik açısından ve müşteri istekleri açısından sorun oluşturan bir durumdur.

Başta dediğim gibi 3-4 senedir CSS ile sayfa kodluyorum ve en çok kullandığım css hilelerini burada yazmamın uygun olacağını düşündüm. Çünkü birçok bu işi yeni başlayan arkadaş için önemli bir bilgi olacağını düşünüyorum. Lafı fazla uzatmadan listemiz açıklayalım.

Okumaya devam edin »

Kutu Modeli – Görünüm Efekti Özellikleri

Eylül 7th, 2007 • 32 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , , , ,

Bu aralar CSS kitabına(e-kitap) ağırlık verdim. Kitaptaki eksik bölümleri tamamlıyorum. İnşallah en yakın zamanda bitecek. Bu konuda onlardan biri.

Kutu elementlerin görünümüne çeşitli etkiler yapan özellikleri göreceğiz bu makalede çoğu CSS2 ile birlikte gelen bu özellikler aşağıda sıralanmıştır.

  • overflow – taşma
  • clip – kırpma
  • visibility – görünürlük

Okumaya devam edin »

CSS ile Kutu modeli, sorunları ve çözümleri

Nisan 26th, 2006 • 60 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , , , , , , , , ,

CSS’e geçişte en çok düşündüren konu niye CSS geçelim ve CSS’in avantajları nelerdir? CSS’in avantajı bize web sayfasındaki elemanlara daha fazla müdahele etme imkanı vermesidir. Burada bunun en güzel örneklerinden birini göreceğiz.

CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Okumaya devam edin »

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.