BAYRAĞIM


Ey mavi göklerin beyaz ve kızıl süsü

Kızkardeşimin gelinliği, şehidimin son örtüsü.

Işık ışık, dalga dalga bayrağım,

Senin destanını okudum, senin destanını yazacağım.



Sana benim gözümle bakmayanın

Mezarını kazacağım.

Seni selamlamadan uçan kuşun

Yuvasını bozacağım.



Dalgalandığın yerde ne korku ne keder...

Gölgende bana da, bana da yer ver!

Sabah olmasın, günler doğmasın ne çıkar!

Yurda, ay-yıldızının ışığı yeter.



Savaş bizi karlı dağlara götürdüğü gün

Kızıllığında ısındık;

Dağlardan çöllere düşürdüğü gün

Gölgene sığındık.



Ey şimdi süzgün, rüzgarlarda dalgalı;

Barışın güvercini, savaşın kartalı...

Yüksek yerlerde açan çiçeğim;

Senin altında doğdum,

Senin dibinde öleceğim.


Tarihim, şerefim, şiirim, herşeyim;

Yer yüzünde yer beğen:

Nereye dikilmek istersen

Söyle seni oraya dikeyim!

 


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

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 :

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!

Yorum Gönder Blogger

 
Top