Resmin Yanına Yazı Yazma

Resimlerin soluna yada sağına resim gelmesi için CSS yada HTML ile bir kaç düzenleme yapmamız gerekir. Aşağıda bir kaç örnekle resimlerin soluna ve resimlerin sağına yazıları getireceğiz.

Float

CSS ile resimlerin yanına yazı getirmek için öncelikle float kavramını bilmemiz gerekir.

Float, CSS konumlandırma özelliğidir. Amacını anlamak için aşağıdaki görüntüye bakabilirsiniz. Baskı düzeninde gerektiğinde yazı resimleri sarmalaması gerekebilir.  Bu yaygın kullanım “sarmalama” olarak isimlendirilmektedir.

Resim ve metin normal görünümde sayfaya eklendiğinde resim yazıyı kesecek ve aynı satırda oldukları için resmin alt sınırından yazı gösterilecektir.  Burada yazının resmi sarmalaması için resmin normal akışından dışarı çıkarılıp sola yada sağa doğru hizalanması gerekecektir. İşte bu işlem için CSS float ile resmin yazı içerisinde hangi yöne doğru akacağını belirterek, yazının resmi sarmalamasını sağlayabiliriz.

Resmin Yanına Yazı Yazma( Resmin Sağına Yazı Yazma)

Bu başlığı şu şekilde de ifade edebiliriz. Resmin yazı içinde sol kısımda bulunması.  Bunun için resim etiketine float:left tanımlaması yapmak yeterli olacaktır.  Bu örnekte resmin etrafında da biraz boşluk bıraktım.  sola-kaydir adında class tanımlayıp resim etiketine veriyoruz.

HTML

<div class="ornek">
<img src="img/thumb1.jpg" class="sola-kaydir">
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.</p>
<p> 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
<p>
Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. </p>
</div>

CSS

.ornek{
width: 900px;
margin:auto;
}
.sola-kaydir{
float:left;
padding:0 10px 10px 0;
}

ÇIKTI

Resmin Yanına Yazı Yazma( Resmin Soluna Yazdırma)

Yukarıdaki örneğin sağa hizlanmış şekli
HTML

<div class="ornek">
<img src="img/thumb1.jpg" class="saga-kaydir">
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.</p>
<p> 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
<p>
Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. </p>
</div>

CSS

.ornek{
width: 900px;
margin:auto;
}
.saga-kaydir{
float:right;
padding:0 0 10px 10px;
}

ÇIKTI

Yazının İçinde Resim Hizalama

CSS ile yazının içinde resimleri sağa ve sola hizalı olarak göstermek için gerekli olan html, css kodları ve ekran çıktısı.

HTML

<div class="ornek">
<img src="img/thumb1.jpg" class="saga-kaydir">
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.</p>
<p> 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
<img src="img/thumb1.jpg" class="sola-kaydir">
<p>
Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. </p>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.</p>
<p> 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
</div>

CSS

.ornek{
width: 900px;
margin:auto;
}
.saga-kaydir{
float:right;
padding:0 0 10px 10px;
}

.sola-kaydir{
float:left;
padding:0 10px 10px 0;
}

ÇIKTI