neozex.exblog.jp Access Granted Ⅱ
〆_ [提案]ページナビ装飾
ユーザーメニューに任意の画像が適応出来るようなったってことで、今度はページナビだ!
と。。前からちょっとはやっていたが下記の方法が今のところはお手軽かと・・紹介します。
div.nav { position:relative; }
.prepagenav { position:absolute; top:2px; left:35px;}
.nextpagenav { position:absolute; top:2px; left:155px;}

<div class="nav">
<span class="prepagenav"><$prepage type=2$></span>
<img src="http://「前のページ」用画像URL" width="120" height="15" border="0">
<span class="nextpagenav"><$nextpage type=2$></span>
<img src="http://「次のページ」用画像URL" width="120" height="15" border="0">
</div>

ポイントは背景となる(する)画像の上に、文字を乗せ(重ね)て表示させるということです。
全体を括る<div>は、position:relative;。
文字を表示させる<$prepage type=2$>の為の、<span>は、position:absolute;にして位置を指定しています。

当方は<table>タグは使用しておりませんが、使用している方でも<td>の中にほり込んで大丈夫です。
relativeの意味合いは、その領域の基準を左上だとtop:0px left:0pxとすると言うことです。
(右上だとtop:0px right:0pxと言う考え方も出来ます。)
中に入る要素側でposition:absolute;として位置を指定します。
余白が欲しいなら・・。marginで確保します。(当ページのソース参照)

background-image使えば出来るんじゃない?と思ってやってみましたが、文字部分しか背景画像が表示されないのでこの方法を採用しました。

欲を言えば横文字にしたいね。。( ̄ー ̄)
こればかりはtype=2以降の替り球は存在しないようです・・・。ψ(`∇´)ψ
[PR]
by a_Neo-team714 | 2004-11-11 14:56 | Customizing
<< ブックマークレット スク~プ!遂にやってくれたぜ!(笑 >>