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
|
1 2 3 4 5 6 7 8 9 10 |
<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
|
1 2 3 4 5 6 7 8 9 10 |
.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
|
1 2 3 4 5 6 7 8 9 10 |
<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
|
1 2 3 4 5 6 7 8 9 10 |
.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.ornek{ width: 900px; margin:auto; } .saga-kaydir{ float:right; padding:0 0 10px 10px; } .sola-kaydir{ float:left; padding:0 10px 10px 0; } |
ÇIKTI
hocam resim sola geldi fakat yazı resmin üstünde kaladı
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure maiores officiis, porro quae repudiandae temporibus? A aliquam aliquid, ea est exercitationem, impedit ipsa, maiores minima nihil recusandae tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem doloribus eveniet iure rem. Assumenda aut autem, cupiditate dolorum facilis fugit inventore magnam minima odit provident quidem, quod temporibus tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium commodi, delectus dolores explicabo laborum magnam quam rem suscipit tempore ullam. Assumenda est facilis itaque magni omnis quibusdam quo tempore ut.
Olduğu gibi kopyalayıp html tagları arasına yapıştırınız. Çalışacaktır.
Kusura bakmayın kodlar çıkmamış.
Olduğu gibi kopyalayıp html tagları arasına yapıştırınız. Çalışacaktır.
Artık vazgeçtim kodları yazamıyorum. Üzgünüm.
olmadı 🙁
[…] Resmin Yanına Yazı Yazma […]