İndir Demo

Bloğunuzda yazıları listelerken yazıyla ilgili bir resim koymak ziyaretçilerin dikkatini daha fazla çekecektir. Bu yazımızda resimli div oluşturmaya çalışacağız.

HTML

<div class="image-div clearfix">
 <div class="image">
     <img class="fl" src="img/sample.gif" alt="">
 </div>
 <div class="image-div-content">
     Buraya içerik gelecek
 </div>
</div>

CSS

.clearfix:before,.clearfix:after{content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}

.fl{float:left;} .fr{float:right;} 

.image-div{margin: 0 0 10px 0;padding: 10px 10px;position: relative;color:#222;background-color:#fff;border:1px solid #000;} 
    .image-div .image{position:relative;} 
       .image-div .image img{position:relative;background:none repeat scroll 0 0 transparent;padding: 2px;border: 1px solid #ccc;margin: 0 0 0 0;} 
    .image-div .image-div-content{position: relative;} 
        .image-div .image-div-content .row{margin: 0 0 0 0;padding: 0 0 4px 0;position: relative;}

Bu Kodları uyguladığımız zaman şu şekilde bir çıktı alıyoruz.

Gördüğünüz gibi resmin bitiminde içerik en sola dayanarak devam etmiş. Fakat biz içeriğin sola dayanarak değil de üsttekilerle aynı yerden devam etmesini istiyoruz. Bunun için image-div-content adlı classımıza 'margin-left:235px' style değerini vereceğiz. Bir sonraki ekran görüntüsüne bakınca ne demek istediğimi anlayacaksınız.

Html kodumuzu aşağıdaki gibi değiştiriyoruz.

<div class="image-div clearfix">
 <div class="image">
     <img class="fl" src="img/sample.gif" alt="">
 </div>
 <div class="image-div-content" style="margin-left:235px;">
     Buraya içerik gelecek
 </div>
</div>

Burada soldan 235px margin vererek daha güzel bir görünüme sahip oldu. Ben resmimin büyüklüğüne göre 235px verdim bu sizin resminizin boyutuna göre değişebilir.

Resmi Sağa Dayalı Yapalım

Resmi sola dayalı yaptığımızda resmimize "fl" classımızı atamıştık. Sağa dayalı yapmak için "fr" classımızı atayacağız. Aynı zamanda image-div-content classına sahip dive sağdan 235px margin vereceğiz.

Yeni htm kodumuz :

<div class="image-div clearfix">
 <div class="image">
     <img class="fr" src="img/sample.gif" alt="">
 </div>
 <div class="image-div-content" style="margin-right:235px;">
     Buraya içerik gelecek
 </div>
</div>

Burada dikkatinizi çekmek istediğim nokta clearfix adlı classımızdır. Bu class ile ilgili internette bir çok yöntem ve açıklama mevcut. Özellikle float özelliğinin kullanıldığı yerlerde çok işe yarıyor. Bizim bu metodu kullanmamızın sebebi Şöyle bir görüntü almamak içindi. 

SONUÇ

Bu yöntem ile bütün tarayıcılarda sorunsuz bir şekilde çalışan resimli div yapmış olduk.(hatta ie6 da bile :)).

Bu yöntemi ul tagı ile oluşturduğunuz listelerde ve istediğiniz herhangi bir yerde sorunsuz bir şekilde kullanabilirsiniz. 

Bu yöntemi bol bol kullandığım şu sitenin kaynak kodlarını inceleyerek farklı kullanımları görebilirsiniz.

Herkese iyi çalışmalar.

İndir Demo