테스트 사이트 - 개발 중인 베타 버전입니다

페이징 css 팁

paging.png
간단한 팁입니다.

첨부한 이미지처럼 페이징을 만드는 팁입니다.
우선 아래 css를 사용하고 있는 스타일시트 문서에 넣습니다.


#paging-box { text-align:center;background:#fff; }
#paging-box ul { list-style-image:none;list-style-type:none; padding:0;margin:0; }
#paging-box li { float:left; padding:1px 3px;margin:0 2px;font-size:1.0em;background:#69c;border:solid #369 1px; }
#paging-box li:hover { background:#9cf; }
#paging-box li a { display:block;color:#fff; }


적절히 손BoA서 더 멋있게 꾸미셔도 됩니다.

그리고 lib/common.lib.php의 페이징 관련 소스를 아래처럼 수정합니다.
별거 없고 html 부분에 위의 css를 적용하기만 되는거죠.



////// 현재페이지, 총페이지수, 한페이지에 보여줄 행, URL
function get_paging($write_pages, $cur_page, $total_page, $url, $add="")
{
$str = "";
$str = "<div id='paging-box'><ul>";
if ($cur_page > 1) {
$str .= "<li><a href='" . $url . "1{$add}'>처음</a></li>";
//$str .= "[<a href='" . $url . ($cur_page-1) . "'>이전</a>]";
}

$start_page = ( ( (int)( ($cur_page - 1 ) / $write_pages ) ) * $write_pages ) + 1;
$end_page = $start_page + $write_pages - 1;

if ($end_page >= $total_page) $end_page = $total_page;

if ($start_page > 1) $str .= "<li><a href='" . $url . ($start_page-1) . "{$add}'>이전</a></li>";

if ($total_page > 1) {
for ($k=$start_page;$k<=$end_page;$k++) {
if ($cur_page != $k)
$str .= " <li><a href='$url$k{$add}'><span>$k</span></a></li>";
else
$str .= " <li><b>$k</b></li> ";
}
}

if ($total_page > $end_page) $str .= " <li><a href='" . $url . ($end_page+1) . "{$add}'>다음</a></li>";

if ($cur_page < $total_page) {
//$str .= "[<a href='$url" . ($cur_page+1) . "'>다음</a>]";
$str .= " <li><a href='$url$total_page{$add}'>맨끝</a></li>";
}
$str .= "</ul></div>";
$str .= "";

return $str;
}
//////////////여기까지


너무 허접한 팁이지만 초보분들을 위해서....;;


* 질문입니다. 저 페이징을 중앙정렬하려면 어떻게 해야 할까요?

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 7개

div 로 페이징전체 영역설정 후
css 에서
# [아이디] {
margin:0 auto;
}
하면 될듯합니다만~
어떻게 영역잡으셨느지에 따라 달라질듯하네요~
float:left 속성 자체가 그게 불가능하게 만든거 같네요..^^;
margin:0 auto; 는 width의 정의되어있어야 제대로 작동합니다 ^^
두 분이 답변 잘 주셨네요 적당한 wrapper와 적당한 width와 함께 margin: 0 auto
감사합니다^
이거 센타 정렬을 어케하란 말인가요??? 적용은 했는데 고수끼리만 아는 답글로 이렇게 되면 저같은 초보는...

게시글 목록

번호 제목
34706
34693
34563
34536
34521
34480
34479
34466
34437
34436
34435
34406
34398
34387
34382
34375
34364
34336
34294
34293