Cuma , 20 Ekim 2017
Anasayfa » WEB » CSS » Resmin Yanına Yazı Yazma

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.

css-float

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.

css-float2

 

 

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

CSS

ÇIKTI

screenshot_3

 

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

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

CSS

ÇIKTI

screenshot_3

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

CSS

ÇIKTI

screenshot_2

 

 

 

Hakkında Hayri

İlginizi Çekebilir

CSS Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız. İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir