"Yeni başlayanlar için CSS layout rehberi" makalesine hoş geldiniz. Bu makale size genel olarak CSS ile tablosuz tasarımın işleyişi hakkında bilgi verecek. Bu makale temel css bilgisi gerektirir. Eğer henüz css hakkında genel bilginiz yoksa lütfen W3Schools'u ziyaret edin.
Bu sayfaya ulaştığınıza göre CSS ile tasarımın artılarını bildiğinizi varsayıyorum, yine de bu artıları yeniden hatırlamak isterseniz lütfen buraya göz atın.
Daha ilk tablosuz tasarımınızdan sonra ne kadar doğru bir seçim yaptığınızı farkedecek , sonraki tasarımlarınızda belki de yaptığınız en önemli geçişi gerçekleştirdiğinizi anlayacaksınız.
İsterseniz ilk tasarımımızı yapmaya hemen başlayalım.
Tasarımın div'li iskeleti ise şöyle görünüyor;
HTML editörünüz ile (örn: Macromedia Dreamweaver, Microsoft Frontpage vb.) normal şekilde yeni bir html dosyası oluşturun. Oluşan sayfada <body></body> kodları arasına aşağıdaki kodu ekleyin:
<div id="ust">Deneme Yazısı</div>
Bu kod ile, sayfamıza css üzerinde bir "tablo" ekledik, id="ust" kodunda, css dosyamızda oluşturacağımız "ust" isimli stilde bu css şablonunun ayrıntılarını vereceğiz.
Evet, biraz karışık oldu, şimdi yavaş yavaş anlamaya başlayacağız.
Boş bir dosya açıp bunu stil.css olarak kaydedin. Daha sonra, 1. adımda oluşturduğumuz html dosyasının <head></head> kodları arasına aşağıdaki kodları ekleyin (ya da öğrenip kendiniz yazın )
<style type="text/css">
@import "stil.css";
</style>Bu kod ile oluşturduğumuz stil.css dosyasıyla HTML dosyamız arasında bağlantı kurduk.
Şimdi yeniden stil.css dosyamıza dönüp ilk başta oluşturduğumuz "ust" isimli stilin özelliklerini atıyoruz;
#ust { width: 700px; height: 100px; background: #666666; margin-left:auto; margin-right:auto; }Gördüğünüz gibi stilimizi belirlerken # kodu ile başladık ve HTML dosyamızda div'imize stilimizi çağırırken id="ust" kodunu kullandık. Aynı şekilde, görmüşsünüzdür, . ile tanımlanan ve class="stilismi" ile çağrılan stiller de vardır. Class ile Id arasındaki farkı da, cemshid.com'un sahibi Ozan Çağlargil çok güzel bir şekilde anlatmıştı.
Devam edelim.
Oluşturduğumuz html dosyasına göz attığımızda şu şekilde bir sonuç çıkması gerekiyor. İşlemi doğru gerçekleştirdiniz mi? Mükemmel, bu işten gerçekten anlıyorsunuz. Gri tablomuzu bilgisayarınızda göremiyor musunuz? Üzülmeyin, yukarıdaki adımları yeniden okuyup sayfalarınızı kontrol edin.
Evet, 3. adıma geldik bile. Hedef tasarımımıza dikkatlice bakarsanız, yukarı bölüm ile aşağı bölüm arasında 1 pixellik boşluk olduğunu görürsünüz. Bu boşluğu html üzerinde genellikle spacer.gif ile yapar, güzel bir kod çorbası oluştururuz. Ama css üzerinde kısacık bir kodla, daha esnek şekilde bu işi halledeceğiz;
margin-bottom: 1px;
Bu kodu div stil kodumuzun için yerleştirdiğimizde, ilk başta farketmeseniz bile o div'in alt tarafında 1 pixellik boşluk oluşacak.
#ust { width: 700px; height: 100px; background: #666666; margin-left:auto; margin-right:auto; margin-bottom: 1px; }Margin ile ilgili ayrıntılı bilgiye W3Schools üzerinden ulaşabilirsiniz.
Orta bölüme ulaştık. Tasarım iskeletimize yeniden göz atıyoruz. Tablolarla tasarım yapsaydık, bir büyük <table> açıp, orta bölüm ile menümüzü <td> kolonları ile belirlerdik. CSS üzerinde de, yine aynı şekilde, orta bölüm (resim üzerinde "div:sol") ile sağ menümüzü (resim üzerinde "div:menu") içine alacak bir div oluşturmamız gerekiyor.
- "Yoruldum ama" diyorsanız, bir kahve molası iyi gelebilir. -
Aynı "ust" isimli divimiz gibi, bu da genel özelliklere sahip olacak, yani; 700 px genişlik, beyaz arkaplan rengi.
#orta { width: 700px; background: #fff; margin-left:auto; margin-right:auto; }Bu kodu css dosyasına ekledikten sonra, sizin de tahmin ettiğiniz gibi html dosyamıza yeni bir "orta" id'li div açıyoruz. HTML dosyamızda son durum şöyle;
<body>
<div id="ust"></div>
<div id="orta"></div>
</body>CSS layout'larına önceden göz attıysanız, birşey kafanızı kurcalamış olabilir. Tablo tasarımlarında iki kolonlu bir tasarım yapmak için -eğer hala unutmadıysam - aşağıdaki kod yeterli olacaktır;
<table>
<tr>
<td>içerik</td>
<td>içerik</td>
</tr>
</table>CSS üzerinde de, bildiğiniz gibi div'ler şu şekilde listelenir;
<div id="x"></div>
<div id="y"></div>
...Ve bu kodla, bir sonraki div hep alt satıra geçer. Yani sorunumuz nasıl yeni bir kolon oluşturacağımız.
Tabii ki css'de bunun için çok kolay, mükemmel bir çözüm sunulmuş durumda. "Float" elementi ile div'leri sağa veya sola yaslama özgürlüğüne sahibiz. Ayrıca bu kod, divleri birbirine yaslayarak bize kolonlar oluşturma fırsatı sunuyor. Şimdi yapacağımız bu iki kolonlu tasarımda float elementi bize yardımcı olacak.
#sol { float:left; width: 500px; height: 400px; background: #fff; }<body>
<div id="ust"></div>
<div id="orta">
<div id="sol"></div>
</div>
</body>Sol bölüm bu şekilde görünüyor. Şimdi aynı şekilde menü div'imizi oluşturup bu div'i yine "float" ile "sol" isimli div'imize yaslayacağız;
#menu { float:left; width: 200px; height: 400px; background: #FFCC00; }<body>
<div id="ust"></div>
<div id="orta">
<div id="sol"></div><div id="menu"></div>
</div>
</body>Ve işte sayfamızın son hali.
Dikkat ettiyseniz sayfamızın son halinde de görüldüğü gibi oluşturduğumuz "sol" div'inin arkaplanını gri yapmadık. Çünkü bu div'in bölüme gelmesi gereken bir alt bölüm var. Yani bu "sol" div'inin içine yine iki adet div gelecek; sol içerik ve alt bölüm.
Sol içerikle başlayalım. Tasarım iskeletimize yeniden göz atıyoruz. Burada da görüldüğü gibi, orta bölüm 500x350 boyutlarında olacak, bu div'in altına 50 pixel yüksekliğinde "alt" isimli açık gri arkaplanlı div gelince toplam boyut menü boyutuna ulaşacak. Divler alt alta geleceği için "float" elementini burada kullanmıyoruz.
#solicerik { width: 500px; height: 350px; background: #666666; }#alt { width: 500px; height: 50px; background: #999999; }<body>
<div id="ust"></div>
<div id="orta">
<div id="sol">
<div id="solicerik"></div>
<div id="alt"></div>
</div><div id="menu"></div>
</div>
</body>İşte bu kadar! Sitenin son halini görmek için tıklayın.
CSS ile neler yapılabileceğini daha iyi anlamak için CSSBeauty'i sürekli ziyaret edin.
CSS ile daha gelişmiş layoutlar hakkında bilgi almak için burayı ziyaret edin.
CSS hakkında en genel bilgileri tek bir kaynaktan okumak için W3Schools'u ziyaret edin.
Yorumlarınızı buraya alabilirim.
Yazan: Muhammet Sevim, 2006, hello@muhammetsevim.com