Tweet

CSS | Hizalama

CSS ile çerçeveleri hizalayabilir ve div leri birer table hücresi/kolonu gibi kullanabiliriz.

Bunun için kullanacağımız CSS kodu float aldığı değerler ise left, right, none, inherit.

Öncelikle iki tane div i css dosyamız içine tanımlayalım.[...]
CODE:
#div1 {
width: 300px;
height: 200px;
}
#div2 {
width: 300px;
height: 200px;
}


Şimdi de html dosyamız içine bu divleri yerleştirelim.

CODE:
<!-- Baslik bilgilerini ve css i tanımladığımızı varsayalım -->

<body>

<div id="div1"> Deneme Div 1 TheCoders.Net </div>
<div id="div2"> Deneme Div 2 TheCoders.Net </div>

</body>
</html>


Yukardaki örnek çalıştırıldığında divlerin alt alta geldiğini göreceğiz.
Şimdi tekrar CSS kodlarımıza dönerek float değerlerimizi ayarlayalım.

CODE:
#div1 {
width: 300px;
height: 200px;
float:left;
}
#div2 {
width: 300px;
height: 200px;
float:right;
}


Html dosyamızı CSS i düzenledikten sonra tekrar çalıştırdığımızda 1 numaralı div'in sola, 2 numaralı div'in ise sağa yaslandığını göreceğiz.

Aynı işlemi tablo çizerekte yapabilirdik ama tablolar hem kod fazlalığı ile hemde aşırı esnek olmaları sebebiyle sürekli sorun yaratabilir. Bundan dolayı CSS in float özelliği ile divleri tablolardan daha güçlü bir şekilde kullanabiliriz.

Kolay Gelsin...


semixh
semihz@msn.com
4 Agustos 2007 13:14

İlgili Olabilecek Makaleler


Yorumlar (1)





ametist
7 Ocak 2010 19:52
bunların keşke önizlemeside olsaymış :(

Ziyaretçi olarak yorum yazamazsınız. Üye olmak için tıklayın Üye iseniz giriş yapın.



MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg