PDA

Orijinalini görmek için tıklayınız : Birden Fazla Float Elementi Kullanma



mhusty
02-01-2012, 22:56
İçiçe float elementlerinin kullanımı basit bir kodlama yapılabilinir. Bir genel float elementinin sağ üstüne bir float element yerleştirelim. Bu kodlama genelde içeriğe resim ekleme gibi durumlar için kullanılır ve kafa karıştırıcıdır..

Css Alanımıza gelelim..




#icerik{
margin: 10px;
border: 1px solid gray;
}
#icerik #resim {
float: right;
width: 150px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
margin-left: 5px;
}


Bu kodları biraz açalım ...

İçerik id'sine margin ve kenarlık tanımlası yaptık. Daha sonra resim alanını içerik alanının sağ üst kısmına yerleştirmek için float:right elementini, genişliğini belirlemek için ise width:150px yaptık ama ekleyeceğimiz resimin boyutuna göre düzenlenebilir, sol ve alt kenarlıklarını belirlemek için border-left ve border-bottom(sağ ve üst ksımlarda zaten olduğu için buralara kenarlık ataması yapmadık) stillerini ve içerik metini ile arasında boşluk bırakmak için margin-left stillerini kullanıyoruz...

Gelelim şimdi Div kısmına.. Artık divler hakkında örnekleme yapıyorum çünkü tablo kullanımı eski bir teknik artık pek kullanılmıyor...


<div id="icerik">
<div id="resim">
<img src="resimyolu" width="resim genişliği" height="resim yükseklği" border="0" />
</div>
<h1>İçerik </h1>
<p>İçerik id'sine margin ve kenarlık tanımlası yaptık. Daha sonra resim alanını içerik alanının sağ üst kısmına yerleştirmek için float:right elementini, genişliğini belirlemek için ise width:150px yaptık ama ekleyeceğimiz resimin boyutuna göre düzenlenebilir, sol ve alt kenarlıklarını belirlemek için border-left ve border-bottom(sağ ve üst ksımlarda zaten olduğu için buralara kenarlık ataması yapmadık) stillerini ve içerik metini ile arasında boşluk bırakmak için margin-left stillerini kullanıyoruz...</p> . . .
</div>

Macit
06-05-2012, 22:19
Ufak bir ekleme , float özelliğini sitenizde sağa yazla sola yasla şeklinde yani birden fazla sütunlu çalışma yapmak istiyorsunuz,

örenğin;

css dosyası


<style type="text/css">
.float {
background-color: #999;
float: left;
height: 100px;
width: 100px;
margin-right: 5px;
margin-left: 5px;
padding: 25px;
}
</style>




içeriği


<div class="float"> birinci sütun</div>
<div class="float">ikinci sütun</div>
<div class="float"> üçüncü sütun</div>


ekran görüntüsü

833