CSS – İç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.

1. #icerikAlani {
2. margin: 10px;
3. border: 1px solid gray;
4. }
5. #icerikAlani #menu {
6. float: right;
7. width: 150px;
8. border-left: 1px solid gray;
9. border-bottom: 1px solid gray;
10. margin-left: 5px;
11. }

İç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.

1. <div id=”icerikAlani”>
2. <div id=”menu”>
3. <ul>
4. <li><a href=”anasayfa.html”>Ana Sayfa </a></li>
5. <li><a href=”haberler.html”>Haberler</a></li>
6. <li><a href=”iletisim.html”>İletişim</a></li>
7. </ul>
8. </div>
9. <h1>Lorem Ipsum Dolar </h1>
10. <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> . . .
11. </div>

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