Float ve Clear özellikler ile konumlandırma
CSS ile sayfa planlamak için kullanılan yöntemlerden bir tanesidir float ve clear özelliklerinin kullanımı. Float bir elementi Normal Akışın dışına çıkarmak için kullanılan bir yöntemdir. Bir biri ardına sıralanmış elementlere float uygulandığında elementler 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ış element’den sonraki elementlere float etkisini durdurmamız mümkündür. Örneğin iki paragrafınız olsun ve bunlardan sadece ilkini float uygulanmış elementin yanına koymak istiyorsunuz, bu durumda ikinci paragrafa clear özelliği atadığınızda bu element float uygulanmış elementin altında konumlanacaktır.
float
Yapısı : float: <deger>
Aldığı Değerler : left | right | none | inherit
Başlangıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
Float ilk olarak resimleri konumlandırmak için kullanılmıştır. Resimlerin metinlere göre konumunu belirlemek için HTML 1.0 ile birlikte align özelliği kullanıldı. Böylelikle resimler metinlere göre sola veya sağa konumlandırması imkanı sağlanmış oldu. Bu kullanım float ile benzerdir. Resimleri konumlandırmak için kullanılan bu yöntem daha sonra CSS’in olaya el atması ile tüm elementler için kullanıla geldi. Ayrıca float özelliği çoklu kolon oluşturmak için de kullanılır.
img {
float:left;
margin:0 4px 4px 0;
}
float:left ataması yapılan resim sola dayanacak ve metin bu resmin etrafını saracaktır.
<img src="resim.gif" width="150" height=150 alt="resim bilgisi" /> <p>... paragraf metni ... </p>
Bir elemente float uygulandığında, float uygulanan kutu kapsayıcı kutunun veya diğer float kutusunun dış kenarının sağına veya soluna kaydırılabilir. Float uygulanan kutu, dökümanın normal akışının dışına çıkacaktır. Dökümandaki normal kutular float elementi burda yokmuş gibi normal akışına devam edeceklerdir.
Aşağıdaki şekilde görüldüğü gibi başlangıçta normal akış içinde bulunan 1.kutu float:right özelliğ ile sağ tarafa kaymış ve normal akıştaki elementlerin akışı 1.kutu yokmuş gibi devam etmiştir.
Aşağıdaki şekilde float:left tanımlaması yapılarak 1.kutu kapsayıcı kutunun en soluna dayanmıştır. Diğer iki kutu ise normal akışına devam etmektedir.
p {
float:left;
width:200px;
margin:0;
}
img {
float:left;
margin:0 4px 4px 0;
}
Burada her iki elemente de float uygulanarak metnin resmi sarmasına son verilmiştir. Bu çoklu kolon oluşturma tekniğinin basit bir örneğidir. Float uygulanan her element satır boyunca yan yana dizilecektir.
Eğer kapsayıcı kutu genişliği her üçünün sığacağı kadar değil ise sondaki kutu kendiliğinden aşağı kayacaktır. Eğer kutular farklı yükseklikte ise yükseliği düşük olan kutudan sonra gelen kutu bunun altında devam edecektir. Bu durumu düzeltmek için clear özelliği kullanılır bunu aşığda göreceğiz.
clear
Yapısı : clear: <deger>
Aldığı Değerler : none | left | right | both
Başlangıç değeri: tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
Float ile sık sık kullanılan diğer özellik clear’dir. Float elementinin etkisinden kurtulmak için clear özelliğini kullanırız. Float uygulanmış kutu sonra gelen elementleri etkiler bu etkiden kurtulmak için clear özelliği kullanılır.
clear özelliğinin kullanımına örnek verecek olursak. Eğer float uygulanmış element’ten sonraki elementin içeriği float uygulanmış kutunun yüksekliğinden küçük ise bir sonraki element de bu float uygulamasından etkilenecektir. Biz bu etkiyi kaldırmak için clear özelliğini kullanırız. Clear özelliği üst kutu ile araya gerekli mesafeyi koyacaktır, bir bakıma üst kutu ile araya üst margin değeri ataması yapmaktır.
hocam sağ tarafa geçiyor ama bi satır alta geçiyor yani aynı satırda sağa geçmiyor.
şu anda da deniyorum ama yine olmuyor.
@Emre
eğer h1 ve h2 ye float ve genişlik tanımı yaptı isen float:right uyguladığnı üste yazarsan düzelicektir.
ya arkadaslar benim bi sorum olacak yapmaya calısıyorum ama işin içinden çıkamıyorum yardımcı olursanız cok memnun olurum .
öncelikle 2 adet h1 ve h2 tagım var bunlardan h1 solda h2 sağda olmasını istiyorum ancak h2 ye float:right eklediğim zaman bi satır alta geçiyor
çözümünü bulamadım yardımcı olursanız cok memnun olurum
işte bu sanırm bu dersten sonra temamın tohumlarını serpiştirmeye başlayabilrim=)
float:center diye bir değeri yok.
Eğer blok level bir elementi ortalamak istiyorsan.
CSS ile sayfalarımızı ve elementlerimizi ortalamak a bir bak istersen
hocam bu float da right yaptıgım zaman saga left yaptıgım zaman sola alıyor ama bir turlu ortaya aldıramadım. float:center yapıyorum surekli sola alıyor left calısıyor yani.
ne yapmam gerekiyor.
Fatih başarılarının devamını diliyorum. Gerçekten çok faydalı bir site yapmışsın. Senden çok şey öğrendim. Sağol varol güzel kardeşim.
kapsayan katmana 240px genişlik verip resime align=”left” veya css ile katman içindeki resimlere float:left tanımı yaparsanız olacaktır
ben resmi saran yazıyı bir türlü yapamadım. 240px genişlik olan bir katmanın sol tarafına resimi yerleştirip, resmin üst sağ tarafından yazının başlayıp resmi sarmasını istiyorum ama benim yazı uzayıp gidiyor sağa doğru. hayır siz basit bir şekilde anlatmışınız hemen yapıcam sandım ama olmadı bir türlü.
Selam arkadaşlar benim sitenin sitilini CSS ile yaptım
tüm tarayılarda düzgün görünüyor fakat tarayıcıyı küçültüğümde sitedeki menüler sol tarafa kayıyor oysa sol tarafta içerik var bu da görüntüyü çok bozuyor.
Site içerik ve menü olmak üzere iki bölümden olşuyor bunların uzunluğunu ()% olarak verdim o şekilde olunca menü ve içerik küçülüyor en azından tarayıcı bir yere kadar bozmuyor.Benim istediğim ise tarayıcıyı küçültüğüm zaman benim site sabit kalsın ben uzunlukları pixsel cinsinden de verince aynı sorunu yaşıyorum.Bunu nasıl düzelteceğim bilen varsa yardımını bekliyor.