Web Site Tasarımında DIV Kullanımı

Bugün artık tüm web tasarımlarında site temel çatısı olarak DIV tagı kullanılmaktadır. Bunun nedeni DIV tagının parçalı yüklenebilmesi -ki bu sayede yüklenme hızı artar- ve ölçeklendirmesinin (özellikle cep telefonları ekranları için) kolay olmasıdır.

Aşağıdaki gibi bir DIV yapısına sahip iskeleti oluşturalım.

Web Site Tasarımında DIV Kullanımı

Web Site Tasarımında DIV Kullanımı

HTML Kodu:

<body>
        <div class="tual">

        </div>

</body>

  CSS Kodu:

.tual { width: 960px; margin:0 auto; }

 

Web Site Tasarımında DIV Kullanımı

HTML Kodu:

<div class="tual">  
    <div class="sol_menu"></div>
    <div class="sag_icerik"></div>
           
    <div style="clear: both"></div>
</div>

  CSS Kodu:

.tual { width: 960px; margin:0 auto; background-color: burlywood; }
.sol_menu { width: 300px; height: 600px; float:left; background-color: aqua;  }
.sag_icerik { width: 660px; height: 600px; float:left; background-color: gold; }

Web Site Tasarımında DIV Kullanımı

HTML Kodları:

    <body>

        <div class="tual">
           
            <div class="sol_menu"></div>
            <div class="sag_icerik">
               
                <div class="sag_icerik_ust"></div>
                <div class="sag_icerik_orta"></div>
                <div class="sag_icerik_alt"></div>
               
            </div>
           
            <div style="clear: both"></div>

        </div>

    </body>

  CSS Kodları:

.tual { width: 960px; margin:0 auto; background-color: burlywood; padding: 30px; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua;  }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}

.sag_icerik_ust { height: 200px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; background-color: sandybrown; }
.sag_icerik_alt { height: 300px; background-color: blueviolet; }

  Web Site Tasarımında DIV Kullanımı

Web Site Tasarımında DIV Kullanımı

HTML Kodu:

    <body>

        <div class="tual">
           
            <div class="sol_menu"></div>
            <div class="sag_icerik">
               
                <div class="sag_icerik_ust"></div>
                <div class="sag_icerik_orta"></div>
                <div class="sag_icerik_alt">
                   
                    <div class="sag_icerik_alt_sol"></div>
                    <div class="sag_icerik_alt_orta"></div>
                    <div class="sag_icerik_alt_sag"></div>
                    <div style="clear: both"></div>
                   
                </div>
               
            </div>
           
            <div style="clear: both"></div>

        </div>

    </body>

  CSS Kodu:

.tual { width: 960px; margin:0 auto; background-color: burlywood; padding: 30px; }
.sol_menu { width: 300px; height: 660px; float:left; background-color: aqua;  }
.sag_icerik { width: 600px; height: 600px; float:left; background-color: gold; padding: 30px;}

.sag_icerik_ust { height: 200px; width:600px; background-color: chartreuse; }
.sag_icerik_orta { height: 100px; width:600px; background-color: deeppink; }
.sag_icerik_alt { height: 300px; width:560px; background-color: blueviolet; padding: 20px; }

.sag_icerik_alt_sol { height: 300px; width: 33.3%; float: left; background-color: darkorange; }
.sag_icerik_alt_orta { height: 300px;  width: 33.3%; float: left; background-color: tomato; }
.sag_icerik_alt_sag { height: 300px;  width: 33.3%; float: left; background-color: cyan; }

 

Web Site Tasarımında DIV Kullanımı

Yorumunuzu Ekleyin
Web Site Tasarımında DIV Kullanımı Yorumları +2 Yorum
  • Can
    1
    Can
    Bu kodu kullanarak, reklam alanı oluşturmak mümkün mü? Bu sayfanın altında sizinde kulanmış olduğunuz şekilde kendi web sitemde reklamlar yayınlıyorum fakat sayfa altında alt alta görünüyor, ben aynı satırda 2 veya 3 reklam alanı oluşturmak istiyorum?
    26 Ağustos 2015 12:53:26, Çarşamba
  • Yusuf ŞİMŞEK
    1
    Yusuf ŞİMŞEK
    Paylaşım için teşekkürler
    28 Haziran 2016 04:19:58, Salı


Yükleniyor...
Yükleniyor...