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.
#div1 {
width: 300px;
height: 200px;
}
#div2 {
width: 300px;
height: 200px;
}
Şimdi de html dosyamız içine bu divleri yerleştirelim.
<!-- 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>
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.
#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…
Semih DURAK
Benzer Yazılar
- CSS İle Radius (Oval) Kenarlar
- CSS ve HTML Arasındaki Fark
- CSS Giriş
- CSS | Renkler ve Arkaplanlar
- CSS | Fontlar
- CSS | Metin İşlemleri
- CSS | Uzunluk Birimleri
- CSS | Birimler
- CSS | Söz Dizilimi
- CSS | Tarayıcıya css tanıtmak
RSS
Newsletter
Twitter
Facebook
LinkedIn
MySpace
FriendFeed
