Opencore | Açık Çekirdek Platformu

Tablosuz Tasarım Yapma

Tablosuz Tasarım Yapımı?

CSS ile  Tablodan kurtulma
----------------

Merhaba bugün kü konumda tablosuz tasarım temellerini anlatıcam.Bu derste tablo kullanmadan divler üzerinde css kodları ile kutulardan oluşan basit bir tasarım yapıcam.
Bu makalemizde css ile basit bir tablosuz tasarım şablonu oluşturacağız. Şablonumuz aşağıdaki resimdeki gibi bir görünüme sahip olacak.



Öncelikle sayfamıza html kodlarımızı yazalım sonra ise css kodlarımızı yazacağız.

<div id="anaKapsayici">
        <div id="ustAlan">
        </div>
        <div id="menuAlani">
        </div>
        <div id="icerikAlani">
            <div id="solAlan">
            </div>
            <div id="ortaAlan">
            </div>
            <div id="sagAlan">
                <div class="kutu">
                </div>
                <div class="kutu">
                </div>
                <div class="kutu">
                </div>
            </div>
            <div style="clear: both">
            </div>
        </div>
        <div id="altAlan">
        </div>
    </div>
Css kodlarımızı ise style.css dosyamızın içine yazalım


Son olarak style.css dosyamızı html sayfamızda çağıralım. Bunun için head tagları arasına aşağıdaki kodu yazıyoruz.
body
{
    margin:0; /* sayfamızın kenarlarındaki boşluğu aldık */
}
#anaKapsayici
{
    width:980px;
    margin:0 auto; /* yatay olarak ortaladık */   
}
#ustAlan
{
    height:120px;
    background:Red;   
}
#menuAlani
{
    height:30px;
    background:Gray;   
}
#solAlan,#sagAlan
{
    float:left; /* katmanı sola yasladık */
    width:200px;
    height:600px;
    background:Blue;
}
#ortaAlan
{
    float:left;
    width:580px;
    height:600px;
    background:Green;   
}
.kutu
{
    width:180px;
    height:180px;
    background:Yellow;
    margin:10px; /* kutunun çevresine 10px boşluk verdik */
}
#altAlan
{
    height:60px;
    background:Purple;   
}

<link href="style.css" rel="stylesheet" type="text/css" />
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=