İçiçe Float Elementlerinin Kullanımı

İçiçe float elementlerinin kullanımı basit bir kodlama ile bize çok güzel imkanlar sağlar. Bir genel float elementinin sağ üstüne bir float element yerleştirelim. Bu kodlama genelde menü ve resim ekleme gibi durumlar için kullanılır.

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

İçerik alanına(#icerikAlani) margin ve kenarlık tanımlası yaptık. Daha sonra menu alanını(#menu) içerik alanının sağ üst kısmına yerleştirmek için float:right, genişliğini belirlemek için width:150px, 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) ve içerik metini ile arasında boşluk bırakmak için margin-left atamlarını yapıyoruz.

<div id="icerikAlani">
    <div id="menu">
    <ul>
        <li><a href="anasayfa.html">Ana Sayfa </a></li>
        <li><a href="haberler.html">Haberler</a></li>
        <li><a href="iletisim.html">İletişim</a></li>
    </ul>
    </div>
    <h1>Lorem Ipsum Dolar </h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  . . .
</div>

Örnek sayfayı görmek için tıklayınız.

Not: Örnek kodlar ie5.0, ff2.0 ve opera9.0 da test edilmiştir.

İlgili Yazılar:

11 Yorum (Yorum Ekle)

ercani diyor ki:

Kasım 4, 2008, 22:09

Benim bir sorum olacak.
Wp temalarda sidebar kaymasında, sidebar’a position:absolute;left:500px; gibi bir değer sidebar’ı kapsayan alanada position:relative , kodunu ekleyince kayma halloluyor. Ama bu seferde footer ın konumlanması sidebara göre değilde içeriğe göre oluyor. Yani kısa yazılarda footer , sidebar’ın üstüne çıkıyor. Sidebar sıralamadan çıktığından footer sidebarı sallamıyor.
Sorum şu: footer ı nasıl sidebar’ın konumuna göre konumlanmasını sağlarız.

Cevapla

fatih.hayrioglu diyor ki:

Mart 21, 2008, 10:54

ekledim

Cevapla

Murat diyor ki:

Mart 21, 2008, 00:01

Bu yazıyı pdf olarak indirebilecek hale getirmeniz mümkün mü?

Cevapla

Çağlayan diyor ki:

Ağustos 28, 2007, 23:39

Bizimle paylaştığın bu bilgiler yeni hazırladığım siteme(http://gommik.blogcu.com) ayrı bir hava kattı. Teşekkürler…

Cevapla

Volkan Altınbaş diyor ki:

Aralık 6, 2006, 15:07

Erhanında deneyip gördüğü gibi position değeri ile verilen konumlandırmalarda position ile konumlandırılan bölümün altında yada üstünde yazı, resim vb. varsa bunlar bu bölümün ya altında kalacak yada üzerine taşıcaktır. Bu tarzda bir uygulama için kullanılacak en doğru yöntem float dur.

Teşekkürler Fatih

Cevapla

Erhan diyor ki:

Aralık 5, 2006, 19:26

şimdi örnek yaptım. float:right kullanmadan da aynı sonucu alabiliyoruz. Fakat arada çok ince bir fark oluşuyormuş :)

float:right kullanıldığında:
http://eburhan.atspace.com/fh/228/fh.gif

position:absolute kullanıldığında:
http://eburhan.atspace.com/fh/228/eb.gif

Bu durumda senin anlattığın yöntem daha sağlıklı fatih.

Cevapla

fatih.hayrioglu diyor ki:

Aralık 5, 2006, 18:46

top değerinde sorun olmazda right değerinde sorun çıkacaktır, eğer float:right kullanmazsan.

Cevapla

Erhan diyor ki:

Aralık 5, 2006, 18:24

#icerikAlani’na position:relative; #menu’ye ise position:absolute verdiğimizi düşünelerim. #menu’ye TOP ve RIGHT değerleriyle konumlandırma yapsak da aynı sonucu alırız. Peki bu ikisi arasındaki farkı bilen var mı? Hangisi daha iyi olur_

Cevapla

fatih.hayrioglu diyor ki:

Aralık 5, 2006, 16:34

Bir çok gölge verme metodunun olduğunu biliyorum ama bu tip olanını görmedim.

Cevapla