Tweet

Ana Sayfa   Forum   Html - Dhtml - JS
Yeni Başlık Cevap Ekle
white_bullet Sayfa Numaralandırma (01/08/2008 09:54)
profil M.Akif
 offline OFFLINE
 Coder

Sayfalama yapılan scriptlerde sayfa numaralarını CSS ile değiştirerek farklı görüntüler elde edebilirsiniz.

[IMG SRC="http://img295.imageshack.us/img295/1546/democsssayfalamademoai8ay9.gif" ALIGN="http://img295.imageshack.us/img295/1546/democsssayfalamademoai8ay9.gif"]Resim,Html,MicroRam[/IMG]

Yukarıdaki resimdeki gibi bir sitil için tümünü indeleyiniz (:

Temanızın <head></head> kodları arasına şu stil şablonunu ekleyin:

CODE:

<style>
body {
font-size: 100%;
color: #333;
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
}
#sayfalar {
padding: 3px;
}
#sayfalar ul {
list-style-type: none;
}
#sayfalar li {
float: left;
display: inline;
margin: 0 5px 0 0;
display: block;
}
#sayfalar li a {
color: #88af3f;
padding: 4px;
border: 1px solid #ddd;
text-decoration: none;
float: left;
}
#sayfalar li a:hover {
color: #638425;
background: #f1ffd6;
border: 1px solid #85bd1e;
}
#sayfalar li.linksiz {
color: #CCC;
border: 1px solid #F3F3F3;
padding: 4px;
}
#sayfalar li.aktif {
color: #FFF;
border: 1px solid #b2e05d;
padding: 4px;
background: #b2e05d;
}

</style>


Şimdide HTML kodumuza gelelim...

CODE:
<div id="sayfalar">
<ul>
<li class="linksiz">« Önceki Sayfa</li>
<li class="aktif">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">Sonraki Sayfa »</a></li>
</ul>
</div>

"#" buraya yazarak işlemi uygulayabilrsiniz... (:
Not:Elimden geldiğince bi kaç kaynaktan ve arşivdeki bilgileirmle yardımcı olmaya çalıştım.Umarım yararlo olmuştur.

[IMG SRC="http://sdu.ictp.it/os/img/ubuntu_logo.jpg" ALIGN="CENTER"]M.Akif[/IMG]
Destekleneler :
Yazıyok Blog
M-Akif.net




What is a problem ?

Üye Profili
 
1 /
 
Ana Sayfa   Forum   Html - Dhtml - JS
Yeni Başlık Cevap Ekle
 

MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg