CSS Kullanarak Sitenin Köşesine Türk Bayrağı Ekleyelim
Merhabalar,
Bu yazımda CSS kullanarak sitenin herhangi bir köşesine nasıl resim eklenebileceğinden bahsedeceğim.
1) Öncelikle XHTML kullanarak sayfa yapımızı oluşturuyoruz.
<html> <head><title>CSS kullanarak köşeye resim yerleştirme</title></head> <body> <div id="bayrak"><a href="#" target="_self"/></div> </body> </html>
2)Mevcut kodumuzun “head” kısmının içinde bir stil tanımlıyoruz
<style type="text/css">
#bayrak a
{
/* Resmin sayfanın üstünde ve kesin bir koordinatta görünmesini istiyoruz */
position:absolute;
/* Resmin bulunacağı koordinatlarını belirliyoruz */
left:0; /* Sağ üst köşede görünmesi için right:0 demelisiniz*/
top:0;
position: fixed;
/*Resmi ekliyoruz*/
background: url(turkbayragi.gif) 0 0 no-repeat;
/* Resmin boyutlarını belirliyoruz*/
width:100px;
height:100px;
/* Eğer taşma olursa, taşan kısmı gizliyoruz*/
overflow:hidden;
}
</style>
Çalışmayı önizlemek için buraya tıklayınız…
Eğer sayfanız yatayda veya dikeyde kayma çubuğu oluşturacak kadar uzunsa, kayma işlemi gerçekleştirdiğinizde Türk bayrağı sayfanın diğer kısmında kaldığından dolayı görünmeyecektir. Eğer Türk bayrağının sayfanızda sabit bir şekilde her zaman görüntülenmesini istiyorsanız, stil koduna aşağıdaki kodu eklemeniz yeterli olacaktır.
position:fixed
Bir başka yazımda görüşmek dileğiyle…
