CSS ile web sitesi
kodlamanın en önemli özelliklerinden iki tanesidir float ve clear.
Float bir elemanı Normal Akısın dışına çıkarmak için kullanılan
bir yöntemdir. Bir biri ardına sıralanmış elemanlara float uygulandığında
elemanlar eğer yeterli alan varsa yan yana dizilirler. Float Dinamik Göreceli
Konumlandırma gibidir ve bu amaçla kullanılabilir.
Clear özelliği ile float uygulanmış elemandan sonraki elemanlara float etkisini durdurmamız
mümkündür. Örneğin iki paragrafınız olsun ve bunlardan sadece ilkini float uygulanmış elemanın
yanına koymak istiyorsunuz, bu durumda ikinci paragrafa clear özelliği atadığınızda
bu eleman float uygulanmış elemanın altında konumlanacaktır.
Örnek:
Aşağıdaki kural class="icon" öznitelikli bütün <img> çerçevelerini sola yanaştıracaktır (ve sol kenar dış boşluğunu
'0‘ yapacaktır):
IMG.icon
{
float: left;
margin-left: 0;
}
<!DOCTYPE html>
<html>
<head>
<style>
span { float: left; border: thin solid; margin: 2px }
body, p, img { border: thin solid; margin: 2.35em }
p { background-color: #eee; padding: 5px }
</style>
</head>
<body>
<p><span><img src=k_1.jpg alt="Bu resim bir
yüzen çerçeveyi simgeler"></span>Resim çerçevesi sola yanaştırılır. Devamındaki
içerik yüzen
çerçeveyle aynı satırdan başlayarak
yüzen çerçevenin
sağında
biçimlenir. Yüzen çerçevenin sağındaki satır çerçeveleri
yüzen çerçevenin
varlığından dolayı daraltılır fakat yüzen
çerçeveden sonra
normal genişliklerine dönerler.
</body>
</html>
Hiç yorum yok:
Yorum Gönder