Css Float ile Resim Metin yanyana Ders 15
Merhaba,
Bu dersimizde tasarımlarınız esnasında karşılaşabileceğiniz bir problem olan herhangi bir resim ile yazdığımız bir metin dosyasının yan yana güzel bir şekilde görünmesi, metnin resimin hemen bitiminden sonra başlaması için gerekli olan float özelliğini işleyeceğiz.
Bunun için yapmamız gereken işlem ise çok basit. Örn;
1 2 3 |
<p> burada da birşeyler yazıyor olsun </p> <p> <img src = “deneme.gif” width : auto heigth:auto> |
Buraya biraz yazı yazarsınız. Şimdi yazacak birşey gelmiyor aklıma o yüzden az sonra burayı kopyala yapıştır ile çoğaltacağım sonra ne yapıyor bu adam diye sormayın J Buraya biraz yazı yazarsınız. Şimdi yazacak birşey gelmiyor aklıma o yüzden az sonra burayı kopyala yapıştır ile çoğaltacağım sonra ne yapıyor bu adam diye sormayın J Buraya biraz yazı yazarsınız. Şimdi yazacak birşey gelmiyor aklıma o yüzden az sonra burayı kopyala yapıştır ile çoğaltacağım sonra ne yapıyor bu adam diye sormayın J Buraya biraz yazı yazarsınız. Şimdi yazacak birşey gelmiyor aklıma o yüzden az sonra burayı kopyala yapıştır ile çoğaltacağım sonra ne yapıyor bu adam diye sormayın J Buraya biraz yazı yazarsınız. Şimdi yazacak birşey gelmiyor aklıma o yüzden az sonra burayı kopyala yapıştır ile çoğaltacağım sonra ne yapıyor bu adam diye sormayın J Buraya biraz yazı yazarsınız. Şimdi yazacak birşey gelmiyor aklıma o yüzden az sonra burayı kopyala yapıştır ile çoğaltacağım sonra ne yapıyor bu adam diye sormayın J
</p>
Yukarıda paragraf içerisine bir resim ve uzunca bir yazı ekledim. Eğer paragrafı bu şekilde eklersek resim dosyası gelecek bitecek resim dosyasının en altındanda satır benim yazım ile devam edecek bu durumda da resim dosyasının yüksekliği boyunca bir boşluk sayfanın eni boyunca oluşacak buda görsellik açısından kötü bir durum. Şimdi çok kısa bir kod ile bu sorunun önüne geçeceğiz.
1 2 3 4 5 6 7 |
img { Float:left; } |
Bu kod ile resmimizi sola yasladık ve resmin en tepesinden olacak şekilde metnimizi yazdırdık. Dilersek burada img ye daha önceki derslerde öğrendiğimiz üzere bir padding tanımlayıp görselliği daha da üst seviyeye taşıyabiliriz.
1 2 3 4 5 6 7 |
img { float: left; padding-right:10px; } |
Umarım bu bilgi işinize yarar,
İyi Günler Dilerim,
elinize sağlık güzel bir blog, güzel bir paylaşım.