Resmin Yanına Yazı Yazma – CSS – Web Tasarım & Programlama

HTML sayfamıza eklemiş olduğumuz resmin yanına CSS ile yazı yazma, diğer bir ifadeyle resmin sağına yazı yazma,resmin soluna yazı yazma gibi kullanımları yazının devamında bulabilirsiniz. CSS ile remin yanına yazı yazma ve düzenleme işlemlerini Float özelliğini kullanarak yapabiliriz.

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.

İçindekiler

CSS ile Resmin Yanına (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. sola-kaydir adında class tanımlayıp resim etiketine veriyoruz.

Örneğimize geçiyoruz. Html dosyamızın içeriği:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.yazilimkodlama.com</title>
<link rel="stylesheet" href="stil.css">
</head>
    <body>
        <div class="ornek">
<img src="accom.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>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</head>

<body>

<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>

</body>

</html>

CSS dosyamız:


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

.ornek{

width: 900px;

margin:auto;

}

.sola-kaydir{

float:left;

padding:0 10px 10px 0;

}

Ekran Çıktımız:

CSS Resmin Yanına (Soluna) Yazı Yazma

Şimdi aynı örnek içerisinde CSS dosyamızda yazmış olduğumuz Float:Left bölümünü Float:Right olarak değiştirerek sonucu gözlemleyelim.

CSS Resmin Yanına (Sağına ve Soluna) Yazı Yazma

Şimdi de sayfamıza 2 resim ekleyerek birinin sağa diğerinin sola yaslanmasını ve yazıların bu resimlerin yanına yazılmasını sağlayacak html ve css kodlarına bakalım.

.html içeriği:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.yazilimkodlama.com</title>
<link rel="stylesheet" href="stil.css">
</head>
    <body>
        <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>
    </body>
</html>

<!doctype html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

</head>

<body>

</p>

<p>

</p>

</div>

</body>

</html>

CSS dosyamız:


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

.ornek{

width: 900px;

margin:auto;

}

.saga-kaydir{

float:right;

padding:0 0 10px 10px;

}

.sola-kaydir{

float:left;

padding:0 10px 10px 0;

}

Ekran Çıktımız:

5 Yorum

hüsran dedi ki:

Mayıs 24, 2020, 2:28 am

emeğinize sağlık

Cevapla
Aymina dedi ki:

Mayıs 26, 2019, 10:25 am

Ya hocam şey ben bu kodları denedim ama olmuyor.Başka bir yöntem var mı?

Cevapla
- Ali dedi ki:
  
  Mayıs 28, 2019, 11:36 am
  
  kendi resim dosyanızı gösterin.
  
  Cevapla
irem dedi ki:

Kasım 11, 2018, 10:13 pm

hocam bir şey soracaktım css sayfasında menü yaparken yanına çizgi nasıl konulur

Cevapla
- Ahmet C dedi ki:
  
  Kasım 11, 2018, 10:16 pm
  
  Border özelliği kullanılarak yapılabilir.
  
  Cevapla