Ocak 5, 2010 at 18:53 · Kategori: CSS, XHTML
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…
Ocak 2, 2010 at 20:40 · Kategori: JavaScript, Jquery
Merhabalar,
Birçok sitede yazıların devamını okuyabilmek için bir seçenek bulunur ve bu seçenek genellikle konunun tümünün başka bir sayfada açılmasını sağlar. Ancak eğer biz konunun devamını yine aynı sayfada görmek istersek, burada Javascript kütüphanelerinden biri olan Jquery yardımımıza koşuyor. Sözü daha fazla uzatmadan kodumuzu yazmaya başlayalım.
1) Öncelikle xhtml ve css ile basit bir şablon oluşturalım.
<html>
<head><title>Jquery ile Read More Methodu</title>
<style type="text/css">
#mesajKutusu { width:400px; border:2px solid #000; padding:10px} /* En dış çerçeve ( Mesaj Kutusu ) */
#mesajKutusu #mesaj p.baslik { font-weight:bold; font-size:18px; font-decoration:underline; color:red; }
#mesajKutusu #mesaj .m2 { display:none; } /* Varsayılan olarak yazının devamının gösterilmemesi sağlıyoruz */
#mesajKutusu #mesaj p.readMore { font-size:12px; color:#000; } /* "Devamını oku" kısmı için yaptığımız görünüm ayarı */
</style>
</head>
<body>
<div id="mesajKutusu">
<div id="mesaj">
<p class="baslik"> Jquery ile read more methodu </p>
<div class="m1">1923 yılında Trabzon'da ilk resmi lig maçları oynanmaya başlandı. İlk sezon İdmanocağı şampiyon olmuştu. Bunu 1923-24,1924-25 sezonlarında Lise takımının arka arkaya şampiyonlukları izledi. 1925 sezonunda yine İdmanocağı şampiyon olurken, 1929 yılına kadar da önce Lise, arkasından Muallim Mektebi daha sonra da Ticaret Lisesi takımları mutlu sona ulaştılar.</p>
<div class="m2">İdmanocağı ile İdmangücü arasındaki büyük rekabet 1930dan sonra had safhaya ulaştı. 1929-30dan sonra 5 kez arka arkaya İdmanocağı'nın şampiyon olmasından sonra 1934-35 sezonundan itibaren İdmangücü takımı tam 7 yıl arka arkaya şampiyon olarak bu iki takım arasındaki rekabeti büsbütün alevlendirmişti.</div>
<p class="readMore"><a href="#">Devamını Oku...</a></p>
</div></div>
</body>
</html>
2) Jquery kütüphanesini şablonumuza çağıralım.
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
[/html]
Not: Bu kodu "head" tagları arasına ekleyiniz ve eklemeden önce indirdiğiniz Jquery kütüphanesinin sürümünün kullandığım sürüm ile aynı olmasına dikkat ediniz. Eğer indirdiğiniz sürüm farklı ise, ilgili sürümünün adını src kısmında gereken yere yazınız.
Yazının Devamı
Ocak 1, 2010 at 22:40 · Kategori: JavaScript, Jquery
Fare imleci üzerine gelindiği zaman saydamlaşan, imleç kalktığında ise tekrar eski haline dönen bir menü oluştaracağız. Jquery’nin “animation” methodunu ve CSS’nin opacity (saydamlık) özelliğini kullanarak bu işlemi en kolay yoldan gerçekleştirmeye çalışacağız.
İşe menümüzü oluşturmakla başlıyoruz.
1.xhtml ile menümüzü oluşturuyoruz
<html>
<head><title>Jquery ile saydamlaşan menü</title></head>
<body>
<div id="menu">
<ul>
<li><a href="#"> Anasayfa </a></li>
<li><a href="#"> JavaScript </a></li>
<li><a href="#"> Visual Basic </a></li>
<li><a href="#"> C sharp </a></li>
</ul>
</div>
</body>
</html>
2. Css ile menümüzü dizayn ediyoruz
<style type="text/css">
#menu ul { list-style:none; text-align:center }
#menu ul li { float:left; width:100px; background-color:#BBBDE3; border-right:1px solid #FFF; }
#menu ul li a { text-decoration:none; color:#FFF }
</style>
Bu kodları yazdıktan sonra menümüzü elde etmiş olacağız.
Şimdi sıra Jquery ile bu menüyü saydamlaştırmaya geldi. Fare imlecinin bulunduğu menü elemanının saydamlaşmasını sağlayacağız.
Yazının Devamı
