02-08-2008 ercani css notları
Evet yazımıza devam ediyoruz. Önceki yazıda bir elemanın nasıl kutu ürettiğini ve kutuların kendi arasında nasıl davrandığını gördük. Şimdiki konu css için oldukça önemli bir konudur. çünkü kutuların kendi aralarında nasıl dizildiğini hangisinin öncelik kazanacağını bu konumuzda öğreneceğiz.
FLOAT: float özelliği kutuların kendi aralarındaki konumlamasını belirler.
genel değerleri;
left | right | none | inherit tir.
örnek bir kod yazalım ve görelim;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″/>
<title>float tanımlama</title>
<style>
p img {
float: leftt; */ resmimizin paragrafa göre yeni konumu /*
margin: 15px; */ resmimizin paragrafa olan dış uzaklığı /*
}
</style>
</head>
<body>
<p><img src=”http://www.ercani.com/ercani_logo.gif” alt=”ercani logo” />burası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yokburası herhangibir paragraftır öenmsemeye gerek yok.</p>
</body>
</html>
bu kodun görünümü şu şekildedir.
gördüğünüz gibi resim paragrafın soluna dayandı.Paragraf ise akışına devam etti sanki resim yokmuş gibi.
anlıcağımız float tanımlanan bir eleman normal akıştan çıkar ve konumlandığımız yerde diğerlerine uymaksızın durur.
Peki 3 tane kutumuz olsun ve 3 kutumuzada float uygularsak ne olur? önce float uygulanmamış şekilde 3 kutu oluşturalım
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″/>
<title>float tanımlama</title>
<style>
#birinci {border:dashed thin #ff33ff;
margin: 5px;
width:150px ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px; }
</style>
</head>
<body>
<div id=”birinci”>1. kutu</div>
<div id=”ikinci”>2. kutu</div>
<div id=”ucuncu”>3. kutu</div>
</body>
</html>
Bu kodun görünümü şu şekildedir.
Ama burada aşağıdaki gibi 3 kutuyada float eklersek birbirlerine göre konumlanacaklardır.
#birinci {border:dashed thin #ff33ff;
float: left;
margin: 5px;
width:150px ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
float:left}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px;
float: left; }
Peki sadece 2. kutuya float:right versek ne olur. O zamanda ikinci sağa dayanır ve 1. kutu ile 3. kutu sıralamaya devam eder.
sanırım float hakkında bir fikir oluştu kafamızda. Genel bir tekrar yapacak olursak Float kutuların sağa veya sola olan konumlarını belirler.
tablosuz web tasarımının önemli bir konusu daha CLEAR özelliği.
CLEAR: Clear özelligi ile float uygulanmıs elemandan sonraki elemanlara float etkisini durdurmamız mümkündür.Resim ve metin elemanları diger elemanlara göre floating eleman olarak tanımlanırlar.
aldığı değerler;none | left | right | both tur.
left degeri uygulandıgı elemanı floating elemanın bir alt soluna atar, right özelligi saga atar, none özelligi elemanın baslangıç degerini geri döndürür ve both degeride iki floating elemanın asagısına atar.
örneğin yukarıdaki örnekte 3 kutuyada float uyguladığımızda ne oluyordu, 3 kutuda birbirinin yanına konumlanıyordu. işte ikinci kutuya biz clear:left uygularsak 2. kutu 1. kutunun altına konumlanacaktır.
#birinci {border:dashed thin #ff33ff;
float: left;
margin: 5px;
width:150px ;
}
#ikinci {border:dashed thin #ffd400;
margin: 5px;
width:150px ;
float:left;
clear:left;}
#ucuncu{border:dashed thin #000000;
margin: 5px;
width:150px;
float: left; }
burda 2. kutunun float etkisi alınmıştır. ve önceki float elemana göre yeri söylenmiştir.
evet css le kutu yönetimi genel olarak bu şekildedir.Son olarak kutuların birbirine göre 3 boyutlu olarak üstte alta kalmasını içeren Z-index özellği vardır. yani bir kutu diğerini kapatacak şekilde üstteyse, altta kalan elemanı üstteki kutunun üstüne çıkarabiliriz.bunuda başka bir yazımda vermek istiyorum
1
[...] bile kutu orada sabit kalır yukarı çıkmaz.(Bu özelliği IE6 desteklemiyor) Float özellğinide diğer yazımda vermek [...]