div-css bilmeniz gereken kodlar

div-css bilmeniz gereken kodlar
ALINTIDIR
--------------------------------------------------------------------------------

artık web sayfaları tableless (tablosuz) olarak kodlanmaya başlandı. ama gerek tarayıcı farklılıklarından gereksede div'in tablo kadar esnek olmayışı acemi kullanıcılara büyük sorunlar yaşatıyor.

bu başlık altında genel anlamda kullanılabilecek div-css kodlar paylaşılacak. mini bir kütüphane gibi. yalnız burada paylaşılacak olan kodlar "şu divi tamda şu kısma yerleştirmem gerek nasıl yaparım?" sorularının cevabı olmayacak. sayfamı nasıl ortalarım, nasıl scrollbar'lı div yaparım yada sayfamı nasıl yukarıya yapıştırabilirimin cevapları bu başlık altında toplanacak.

tartışmaya açık konular değilde, sadece artık kalıplaşmış çözümler bu başlık altında toplanacak. benim şu an aklıma gelenler bunlar. hatırladıkça eklemeler yapacağım. sizlerde başlığı destek çıkarsanız kısa zamanda elimizde güzel bir mini kütüphanemiz olur.


sayfanızı yukarıya yapıştırmak için:


PHP Kodu:
body
{
margin-top: 0px;
}

div içinde scrollbar:

1. kaydırma çubukları sürekli görünen: (overflow: scroll)


PHP Kodu:
.div1
{
overflow: scroll;
height: 100px;
width: 100px;
}

<div class="div1">asd asasd asdsad asd asd d<br><br><br><br><br><br><br></div>

2. kaydırma çubuğu yazı alanı taşınca görünen: (overflow: auto)

PHP Kodu:
.div1
{
overflow: auto;
height: 100px;
width: 100px;
}

<div class="div1">asd asasd asdsad asd asd d</div>


yan yana div kutular: (float)

1. sola dayalı: (float: left


PHP Kodu:
.div2
{
border: solid 1px black;
float: left;
height: 100px;
width: 100px;
}

<div class="div2">1</div>
<div class="div2">2</div>
<div class="div2">3</div>

2. sağa dayalı: (float: right)


PHP Kodu:
.div2
{
border: solid 1px black;
float: right;
height: 100px;
width: 100px;
}

<div class="div2">1</div>
<div class="div2">2</div>
<div class="div2">3</div>


div'i sayfaya göre ortaya almak: (margin-left: auto; margin-right: auto; ikisi bir arada kullanılmalı)


PHP Kodu:
.div3
{
border: solid 1px black;
height: 100px;
margin-left: auto;
margin-right: auto;
width: 100px;
}

<div class="div3"></div>