css пагинационных ссылок - PullRequest
Новая
       9

css пагинационных ссылок

1 голос
/ 06 мая 2010

Я хотел бы получить базовую идею о том, как отформатировать следующую страницу результатов поиска.

это код подкачки: 

  //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;

В настоящее время это выглядит так:

альтернативный текст http://img227.imageshack.us/img227/2765/paginate.jpg

Ответы [ 3 ]

3 голосов
/ 06 мая 2010

div имеют CSS-свойство display: block, что означает, что они пытаются заполнить горизонтально

Вы должны попробовать плавать: слева на всех ваших div или показать: inline

2 голосов
/ 06 мая 2010

Вот источник примеров нумерации страниц LINK

Вот пагинация типа щелчка

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>

и это digg-like нумерация страниц

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>

но без примера того, что вы хотите, трудно понять, что вы хотите.

1 голос
/ 06 мая 2010

Попробуйте вместо этого изменить теги <div> на <span>. div является тегом блока, тогда как span является встроенным. Подумайте, как <p></p> против <i></i>, где один предназначен для того, чтобы поместить пространство над и взорвать контент, а другой просто изменяет вид.

Еще одна вещь, это то, что вы используете <b>$i</b>, чтобы выделить текущий. Это также должен быть span или div или что-то еще, что вы используете, чтобы позже вы могли легко изменить его с помощью CSS.

...