div-css bilmeniz gereken kodlar

[emrag]

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:

 body
{
    margin-top: 0px;
} 
  

div içinde scrollbar:

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

 .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)

 .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

 .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)

 .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ı)

 .div3
{
    border: solid 1px black;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}
 
<div class="div3"></div> 
  

[alico]

http://forum.ceviz.net/css-ile-field...light=fieldset

[RealKabus]

Uzamayan div'ler için çözüm:

Uzamayan div'in altına şu kodları ekleyin:

<div id="duzelt"></div>

CSS Kodu:

    #duzelt {
    clear:both;
    height:0;
    }

[ipodfansmail]

Wow! This post rocks

[chesterx]

Uzamayan div'ler için çözüm:

Uzamayan div'in altına şu kodları ekleyin:

<div id="duzelt"></div>

CSS Kodu:

    #duzelt {
    clear:both;
    height:0;
    }

Uzamayan div derken ne demek istedin ?
ya da bir kaç yerde rastladım clear:both; ne işe yarar?

[01ada01]

clear:both; bildiğim kadarıyla ondan sonraki nesnelerin float ını etkisiz kılıyor yani bu tek satırda gösteriliyor

[mugenn]

Evet "clear:both;" -float kullanımı sonucundaki bazı saçmalıkları düzeltmekte kullanılır.

[cagrii]

Teşekkürler

[s!lv3r]

arkadaşlar bana css ile ilgili basit düzeyden başlayarak bilgi verebilecek bir site lazım yardımcı olabilir misiniz? yeni üyelerden s!lv3r

[OPETH]

arkadaşlar bana css ile ilgili basit düzeyden başlayarak bilgi verebilecek bir site lazım yardımcı olabilir misiniz? yeni üyelerden s!lv3r

http://www.w3schools.com/css/default.asp