Bir resmin etrafına metin sarmak için kod mu ihtiyacınız var? Normalde bir HTML sayfası oluşturduğunuzda her şey doğrusal olarak akar, yani bir diğerinin hemen arkasından bir blok gelir. Önceki yayınlarımın tümü bunun bir örneği, yani metin, sonra resim, sonra metin vb.
Bazen resmin altındaki yerine metnin yanını eklemek isteyebilirsiniz. Buna görüntünün etrafına kaydırma metni denir. HTML kullanarak metni kaydırmak aslında oldukça kolaydır. Metni kaydırmak için CSS kullanmanız gerekmediğini unutmayın.
Ancak bu günlerde W3C, bu tür görevler için HTML yerine CSS kullanılmasını önerir. Aşağıdaki iki yöntemden de bahsedeceğim, ancak yanıt verebilirseniz, duyarlı web sitesi tasarımlarına daha uyumlu olduğundan CSS kullanmak daha iyidir.
HTML'yi Kullanarak Metnin Etine Metin Kaydırın
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus ve magnis dis parturient montes, nascetur ridiculus mus. Bir felis vitae augue lobortis dictum alikam. Curabitur molestie posuere laoreet. Ut pellentesque nunc lorem egestas non-imperdiet enim kongresinde.
Metnin görüntünün sağ tarafı boyunca sarılması için, resmi sola doğru hizalamanız gerekir:
Metniniz buraya gidiyor.
Metnin solda ve görüntünün en sağda görünmesini istiyorsanız, sadece hizalama parametresini "sağ" olarak değiştirin.
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus ve magnis dis parturient montes, nascetur ridiculus mus. Bir felis vitae augue lobortis dictum alikam. Curabitur molestie posuere laoreet. Ut pellentesque nunc lorem egestas non-imperdiet enim kongresinde.
Metniniz buraya gidiyor.
Bu kadar! Oldukça kolay değil mi? CSS kullanmak isteyeceğiniz tek zaman, resimlere kenar boşlukları eklemek istiyorsanız, metin ile resim arasında bir miktar boşluk bırakılacak olmanızdır.
Aşağıdaki CSS stil kodunu kullanarak bir resme kenar boşlukları ekleyebilirsiniz:
Metniniz buraya gidiyor.
Yukarıdaki kod, resmin sağ tarafına 10 piksel boşluk eklemek için MARGIN CSS öğesini kullanır. Görüntüyü sola kaydırdığımızdan, boşlukları sağa eklemek istiyoruz.
Temel olarak, dört sayı TOP DOĞRU ALT SOL'u gösterir. Öyleyse, beyaz alanı sağa hizalanmış bir görüntüye eklemek istiyorsanız, bunu yaparsınız:
Metniniz buraya gidiyor.
Bu nedenle, bu görevi gerçekleştirmek için HTML kullanmak oldukça kolaydır, ancak bir kez daha, yanıt veren siteler için iyi çalışmayabilir.
CSS kullanarak Metni Görüntünün Etrafına Kaydır
Bir görüntünün etrafına metin sarmanın en iyi yolu CSS kullanmaktır. Elemanların konumu üzerinde size daha iyi tahıl kontrolü sağlar ve modern kodlama standartlarıyla daha iyi çalışır.
HTML örneğindeki CSS’i doğrudan resim etiketine dahil etmeme rağmen, bunu gerçekten de asla yapmamalısınız. Bunun yerine, tüm CSS kodunuzu tutan bir stil sayfası adlı ayrı bir dosyaya sahip olmalısınız.
IMG etiketinde, etikete bir sınıf atar ve ona bir ad verirsiniz. Örneğimde, soldaki sınıfı seçtim. Stil sayfamda tek yapmam gereken şu kodu eklemek:
.left {float: sol; dolgu maddesi: 0 10px 0 0;} Gördüğünüz gibi, sola hizalı görüntünün sağ tarafına 10 piksel tampon ekledim. Ayrıca float özelliğini, görüntüyü belgenin normal akışından çıkarmak ve ana kabın sol tarafına koymak için de kullandım.
Gördüğünüz gibi, tüm bu kodları IMG etiketine eklemekten çok daha temiz. Ayrıca yönetimi kolaydır ve web sayfanızdaki görünümü özelleştirmek için daha birçok CSS özelliği kullanabilirsiniz. Herhangi bir sorunuz varsa, yorum yapmaktan çekinmeyin. Keyfini çıkarın!
