Anasayfa

Html & Css

Html Css Float Komutu Kullanımı
Facebookta Paylaş

Html Css Float Komutu Kullanımı

Bu dersimizde Html ve Css 'de float komutunun kullanımını gösteriyor olacağım. Float komutu nesnelerin position (pozisyon)larını belirlerken kullandığımız, nerdeyse her projede kullanılan bir komuttur. Float komutu , right, left, none ve inherit parametlerini almaktadır. Sayfanın solunda,sağında resim ve resmin hemen yanında yazı olan içerikleri görmüşsünüzdür. Bu durumlarda float kullanılmaktadır. Şimdi örnekler üzerinden gidelim ve nasıl kullanıldığını görelim.

400 px genişliğinde bir divimiz olsun ve içerisine bir resim ve sonrasında yazı girelim. Kodumuz şöyle olacaktır;

<div style="width:400px;height:50px;background:#ddd;">
<img src="http://www.ulusoyy.com/img/logo.jpg" />Hüseyin ULUSOY
</div>

Bu kodun çıktısı aşağıdaki gibi olacaktır. Float:none uygulanmış hali gibidir.

Hüseyin ULUSOY

Ama biz yazının yukardan, resim ile aynı hizada başlamasını ve resimin yüksekliği kadar olan alanı daha uzun bir yazı girdiğimizde sığacak şekilde kullanmak isteriz genelde. Bu durumda float komutu devreye girer.

<div style="width:400px;height:50px;background:#ddd;">
<img src="http://www.ulusoyy.com/img/logo.jpg" style="float:left;" />Hüseyin ULUSOY
</div>

Resime float:left uyguladığımızda aşağıda göreceğiniz üzere resim solda, yazı sağda kalacak şekilde ve yazı yukardan hizalı bir şekilde devam eder.

Hüseyin ULUSOY

 

<div style="width:400px;height:50px;background:#ddd;">
<img src="http://www.ulusoyy.com/img/logo.jpg" style="float:right;" />Hüseyin ULUSOY
</div>

Resime float:right uyguladığımızda aşağıda göreceğiniz üzere resim sağda, yazı solda kalacak şekilde ve yazı yukardan hizalı bir şekilde devam eder.

Hüseyin ULUSOY

Örnekleri bu şekilde çoğaltabilirsiniz. Resim ve yazı şeklinde olacağı, resim ve resim, yazı ve yazı gibi istediğiniz şekilde nesneleri alanları özelleştirebilirsiniz.

Not: Float uyguladığınız alanlardan sonraki bölümlerde bozulmalar,kaymalar olmaması için float uyguladığınız alanlardan hemen sonra aşağıdaki kodu yazmanızı öneririm.

<div style="width:400px;height:50px;background:#ddd;">
<img src="http://www.ulusoyy.com/img/logo.jpg" style="float:right;" />Hüseyin ULUSOY
</div>
 
<div style="clear:both;height:0;"></div>

 

24 Ekim 2013 11:39 Kategori :Html & Css7784
Sitene Ekle :
Yukarıdaki kodu sitenize ekleyerek bu konuyu sitenizde yayınlayabilirsiniz.