Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj22.07.2013, 08:53 (UTC)    
Mesaj konusu: Css ile resimin üzerine yazı yazmak (Full kendi anlatımım)

Merhaba arkadaşlar, bir anlatımım ile daha birlikteyiz.
Bu dersimde sizlere css ile resimin üzerine yazı yazmayı çok kolay bir şekilde anlatacağım.
İlk olarak bir resim seçelim... Bu seçeceğimiz resim sadece bir ayrıntıdır, ister bir ünlünün ister bir hayvanın resimini veya kendi resiminizi vs.. koyabilirsiniz.
Ben önceden belirledim Mustafa Kemal Atatürk'ün resimini koyacağım.

Şimdi kod yazmaya hazır olun kafanızı toparlayın.
Oluşturacağımız css'in konusuna özel bir css oluşturucaz. yani şu şekil ;


#ataturk {
}


Yeşil ile belirttiğim oluşturduğumuz div'in css kodudur.
Bu css kodunun içine şimdi arka plan kodunu size yazıyorum.

background-image: url (buraya resim urlsini yapıştırın.);

Ve resimin genişliğini ve yükseklik için gereken kodu yazıyoruz.

width: 500px;
height: 354px;


Birde son olarak kodun gözükmemesi için div için gerekli kodu yazalım...

<div id="Div ismi buraya">Buraya yazı geliyor..!</div>


Evet arkadaşlar yukarıda kırmızı ile belirttiğim yere yazdığımız css'in adı gelicek bizim yazdığımızın css'in adı ataturk ü yerine u yazmaya dikkat edin yoksa sorun çıkar.
Mavi ile belirttiğim ise resimin üstüne yazılacak yazıdır.


Oluşturduğumuz kod ;

Kod:
#ataturk {
   background-image: url(http://img.webme.com/pic/m/manshess/ataturk.jpg);
   height: 354px;
   width: 500px;
}

<div id="ataturk">Content for  id "ataturk" Goes Here</div>


Bu kısım css kısımına ;

Kod:
#ataturk {
   background-image: url(http://img.webme.com/pic/m/manshess/ataturk.jpg);
   height: 354px;
   width: 500px;
}


Bu kısım istediğiniz her hangi bir sayfaya eklenecektir ;

Kod:
<div id="ataturk">Content for  id "ataturk" Goes Here</div>


Eğer ben böyle uğraşamam direk sayfaya koymak istiyorum derseniz hemen bir aşağıdaki kodu istediğiniz sayfaya ekleyebilirsiniz. ;

Kod:
<style type="text/css">
#ataturk {
   background-image: url(http://img.webme.com/pic/m/manshess/ataturk.jpg);
   height: 354px;
   width: 500px;
}
</style>
<div id="ataturk">Atamın İzindeyiz..!</div>


Eğer bir sorun olursa başlığın altına bildirin nerede hata yaptıysanız onu çözmeye çalışırız. Cool

ANLATIM : BY PROFESÖR
______________
Mesaj25.07.2013, 22:16 (UTC)    
Mesaj konusu:

Yararlı paylaşım Wink


En son clean-deneme tarafından 13.01.2015 17:54:08 tarihinde değiştirildi, toplam 1 kere değiştirildi
Mesaj27.07.2013, 01:53 (UTC)    
Mesaj konusu:

Sağolun.
Biraz basit anlatım ama bunu anlatana kadar bile zorlandım. Razz

______________
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu