--
--
--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2009
08
06

表の背景にアイコン

表の背景にアイコン。下記のテンプレートに設定をしてあります。(クリックしないと反映しません)
http://manannan.blog84.fc2.com/?template=colorfish2&no=247

背景画像は、「Part4」のページからお借りしています。

Part 1 Part 2 Part 3 Part 4


スタイルシート
/* 表の背景に画像 */
.cap{height:25px;width:75px;background-image:url(http://blog-imgs-32.fc2.com/m/a/n/manannan/cp0.png);
background-repeat: no-repeat; border:none;padding:0;margin:0;
}
.cap a{display:block;height:25px;width:75px;font-size:12px;text-align:center;padding:4px 0 0 0;margin:0;}
.cap a:link{background-image:url(http://blog-imgs-32.fc2.com/m/a/n/manannan/cap1.png);
background-repeat: no-repeat;
color:#ddf;}
.cap a:visited{background-image:url(http://blog-imgs-32.fc2.com/m/a/n/manannan/cap1.png);
background-repeat: no-repeat;
color:#ddf;}
.cap a:hover{background : none !important;
color:#f00;}


HTML
※titleを設定することで、マウスを乗せたときにチップス(小さく解説)が出るようになります。数文字のメニューに解説がつけられると便利かと思ったので、紹介しておきます。
<table>
<tr>
<td class="cap">
<a href="http://www.bittbox.com/freebies/free-vector-web-page-elements-part-1/" title="緑と橙">
Part 1
</a>
</td>
<td class="cap">
<a href="http://www.bittbox.com/freebies/free-vector-web-page-elements-part-2/" title="青とベージュ">
Part 2
</a>
</td>
<td class="cap">
<a href="http://www.bittbox.com/freebies/free-vector-web-page-elements-part-3/" title="暗灰">
Part 3
</a>
</td>
<td class="cap">
<a href="http://www.bittbox.com/freebies/free-vector-web-page-elements-part-4/" title="青と橙・お借りしました">
Part 4
</a>
</td>
</tr>
</table>
スポンサーサイト
Comment
 


管理者にだけ表示を許可する


Trackback
Trackback URL

«  | HOME |  »

Manannan Mac Lir

共有テンプレート


Tree-Recent


Tree-Comment


Tree-TB


カテゴリ


Tree-Arcive


CalendArchive


ブログ管理メニュー(新)


タグリスト(旧


ユーザータグ


テンプレート構造解析


フォーラムリンク


最新コメント


リンク


バナー貼


カテゴリ


画像一覧(月別)


ブログ内検索


プロフィール


Tree-LINK


RSSフィード


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。