ページ番号ナビリンク
これは次のようにして作ります。
HTML
<div class="archive_navi">
<ul>
<li>1</li>
<li><a href="〜〜.php?p=2&id=123">2</a></li>
<li><a href="〜〜.php?p=3&id=123">3</a></li>
</ul>
<p>1〜5件を表示(12件中)</p>
</div>
<ul>
<li>1</li>
<li><a href="〜〜.php?p=2&id=123">2</a></li>
<li><a href="〜〜.php?p=3&id=123">3</a></li>
</ul>
<p>1〜5件を表示(12件中)</p>
</div>
CSS
ulに左カッコを付ける手法はMacIEでは使えません。
隣接要素セレクタを使って先頭のliのみに左カッコを付ける手法はWinIE6以下では使えません。
そこでMacIEのバグを使って切り分けています。
またIE5.xではインライン要素には padding を指定することができないので、 height:1px を指定して回避しています。
IE5とスタイルシートを分けることができるのであれば分けたほうがいいでしょう。
width:1px でも回避できますが white-space: nowrap; を指定し、IE5.0とIE5.5でCSSを分ける必要があります。
[参考記事] CSSのブラウザ振り分け
[参考記事] インライン要素にpaddingが効かない
[参考記事] CSS辞典 white-space
このページの例です。W3CのCSS Validator に通ります。
[参考記事] CSSをW3C準拠かチェックする
http://kikky.net/pc/css/sp/archive_navi.css
@import url("archive_navi2.css");
/* for Win IE5.x */
@media tty {
i{content:"¥";/*" "*/}} @import 'archive_navi3.css'; /*";}
}/* */
/* for Win IE5.x */
@media tty {
i{content:"¥";/*" "*/}} @import 'archive_navi3.css'; /*";}
}/* */
http://kikky.net/pc/css/sp/archive_navi2.css
div.archive_navi {
text-align:right;
}
div.archive_navi ul{
list-style-type:none;
display:inline;
}
div.archive_navi ul{
list-style-type:none;
display:inline;
/* ¥*/
padding-left:7px;
background:url(archive_left.gif) left center no-repeat;
/* */
}
/* ¥*//*/
div.archive_navi ul li{
padding-left:7px;
background:url(archive_left.gif) left center no-repeat;
}
div.archive_navi li+li{
padding-left:0;
background-image:none;
}
/* */
div.archive_navi ul li{
display:inline;
font-weight:bold;
}
div.archive_navi ul li a{
font-weight:normal;
}
div.archive_navi p{
padding-left:7px;
background:url(archive_right.gif) left center no-repeat;
display:inline;
}
text-align:right;
}
div.archive_navi ul{
list-style-type:none;
display:inline;
}
div.archive_navi ul{
list-style-type:none;
display:inline;
/* ¥*/
padding-left:7px;
background:url(archive_left.gif) left center no-repeat;
/* */
}
/* ¥*//*/
div.archive_navi ul li{
padding-left:7px;
background:url(archive_left.gif) left center no-repeat;
}
div.archive_navi li+li{
padding-left:0;
background-image:none;
}
/* */
div.archive_navi ul li{
display:inline;
font-weight:bold;
}
div.archive_navi ul li a{
font-weight:normal;
}
div.archive_navi p{
padding-left:7px;
background:url(archive_right.gif) left center no-repeat;
display:inline;
}
http://kikky.net/pc/css/sp/archive_navi3.css
div.archive_navi ul{
height:1px;
}
height:1px;
}
PHP
すごくPHPっぽく
function ArchiveNavi($all,$lim,$allow_arr,$sid_add=1){
$p=get_value("p",1);
$p_max=intval($all/$lim);
if($all>$p_max*$lim){
$p_max++;
}
if($p<1 || $p_max<$p)$p=1;
$get_v=SelfGet($allow_arr,$sid_add);
if($get_v!="" || $sid_add==1)$get_v="&".$get_v;
$r_s=($p-1)*$lim+1;
$r_e=$p*$lim;
if($r_e>$all)$r_e=$all;
?>
<div class="archive_navi">
<ul>
<?for($i=1;$i<=$p_max;$i++){
if($p==$i){?>
<li><?=$i?></li>
<?}else{?>
<li><a href="<?=$_SERVER['PHP_SELF']?>?p=<?=$i?><?=$get_v?>"><?=$i?></a></li>
<?
}
}
?>
</ul>
<p><?=$r_s?>〜<?=$r_e?>件を表示(<?=$all?>件中)</p>
</div>
<?
}
$p=get_value("p",1);
$p_max=intval($all/$lim);
if($all>$p_max*$lim){
$p_max++;
}
if($p<1 || $p_max<$p)$p=1;
$get_v=SelfGet($allow_arr,$sid_add);
if($get_v!="" || $sid_add==1)$get_v="&".$get_v;
$r_s=($p-1)*$lim+1;
$r_e=$p*$lim;
if($r_e>$all)$r_e=$all;
?>
<div class="archive_navi">
<ul>
<?for($i=1;$i<=$p_max;$i++){
if($p==$i){?>
<li><?=$i?></li>
<?}else{?>
<li><a href="<?=$_SERVER['PHP_SELF']?>?p=<?=$i?><?=$get_v?>"><?=$i?></a></li>
<?
}
}
?>
</ul>
<p><?=$r_s?>〜<?=$r_e?>件を表示(<?=$all?>件中)</p>
</div>
<?
}
