Html ve Css İle Resimli Div Oluşturma

   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 KODLARI
  <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>

.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 olacaktır.

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>
Yani şu şekilde görünecek:

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>Bu yöntemi ul tagı ile oluşturduğunuz listelerde ve istediğiniz herhangi bir yerde sorunsuz bir şekilde kullanabilirsiniz.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!

SHARE

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.

• 
• 
• 
• 
•