sayfalama bağlantıları css

3 Cevap php

Ben arama sonucu aşağıdaki belleği biçimlendirme hakkında gitmek için nasıl temel bir fikir istiyorum.

Bu çağrı kodu:

  //Create and print the Navigation bar
       $nav="";
       $next = $page+1;
       $prev = $page-1;
       if($page > 1) {
            $nav .= "<div class=\"search_mainpg\"><div class=\"searchpage\" style=\"width:5%;\"><a onclick=\"showPage('','$prev'); return false;\" href=\"$self?page=" . $prev . "&q=" .urlencode($search_result) . "\">< Prev</a></div>";

            $first = "<div class=\"searchpage\" style=\"width:2%;\"><a onclick=\"showPage('','1'); return false;\" href=\"$self?page=1&q=" .urlencode($search_result) . "\"> << </a></div>" ;
        }

        else {
            $nav .= "&nbsp;";
            $first = "&nbsp;";
        }

       for($i = 1 ; $i <= $numpages ; $i++) {
            if($i == $page) {
                $nav .= "<b>$i</b>";
            }else{
                $nav .= "<div class=\"searchpage\" style=\"width:2%;\"><a onclick=\"showPage('',$i); return false;\" href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a></div>";
            }
        }

        if($page < $numpages) {
            $nav .= "<div class=\"searchpage\" style=\"width:5%;\"><a onclick=\"showPage('','$next'); return false;\" href=\"$self?page=" . $next . "&q=" .urlencode($search_result) . "\">Next ></a></div>";

            $last = "<div class=\"searchpage\" style=\"width:2%;\"><a onclick=\"showPage('','$numpages'); return false;\" href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\"> >> </a></div></div>";
        }

        else {

             $nav .= "&nbsp;";
             $last = "&nbsp;";
        }

        echo  $first . $nav . $last;

Şu anda, bu gibi görüntüler:

alt text

3 Cevap

<span> onun yerine <div> etiketleri değiştirmeyi deneyin. span inline ise div, bir blok etikettir. <p></p> karşı <i></i> biri yukarıdaki boşluk koymak için tasarlanmıştır ve nerede gibi düşünün içeriği darbe, diğer sadece görünümünü değiştirir.

Bir başka şey, <b>$i</b> kalın için geçerli birini kullanın olmasıdır. Bu aynı zamanda bir span veya div veya kullandığınız ne olursa olsun olmalı, bu yüzden daha sonra kolayca CSS ile değiştirebilirsiniz.

blok, onlar yatay doldurmaya çalışın anlamı: divs ekranın bir CSS özelliği var

Tüm divlere sol, ya da görüntü: inline Eğer şamandıra deneyin shoudl

İşte sayfalama örnekleri için bir kaynak var LINK

İşte pagination bir fiske türüdür

CSS:

ul{border:0; margin:0; padding:0;}

#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#pagination-flickr .next a,
#pagination-flickr .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-flickr a:link,
#pagination-flickr a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-flickr a:hover{
border:solid 1px #666666;
}

HTML:

<ul id="pagination-flickr">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>

ve bu digg gibi sayfalama olduğunu

CSS:

ul{border:0; margin:0; padding:0;}

#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
#pagination-digg a{
border:solid 1px #9aafe5
margin-right:2px;
}
#pagination-digg .previous-off,
#pagination-digg .next-off {
border:solid 1px #DEDEDE
color:#888888
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
#pagination-digg .next a,
#pagination-digg .previous a {
font-weight:bold;
}
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-digg a:link,
#pagination-digg a:visited {
color:#0e509e
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-digg a:hover{
border:solid 1px #0e509e
}

HTML:

<ul id="pagination-digg">
<li class="previous-off">«Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=2">Next »</a></li>
</ul>

ama ne istediğinizi bir örnek olmadan ne istediğini anlamaya zor.

etiketler