8月
05
2010
CSSでリストをメニューにする（画像）
投稿者: admin, カテゴリ: HTML・CSS, tags: HTML・CSS, ブラウザ投稿日: 2010.08.05 - 02:20
更新日: 2011.09.18 - 01:02
▲このような結果になりました。３ブラウザで表示できたので良しとしてみた。
スポンサードリンク
<style type="text/css">
<!--
#header_menu ul{
clear:both;
font-size:30px;
}
#header_menu li {
font-weight: normal;
text-decoration: none;
text-align:center;
list-style:none;
float:left;
border-width:0px;
}
.btA{
width:512px;
padding-top : 120px;
padding-bottom : 160px;
text-decoration : none;
background-image : url("./bt_dark_yellow.jpg");
background-repeat : no-repeat;
background-position : center center;
display : block;
}
.btB{
width:512px;
padding-top : 120px;
padding-bottom : 160px;
text-decoration : none;
background-image : url("./bt_dark_yellow.jpg");
background-repeat : no-repeat;
background-position : center center;
display : block;
}
-->
</style>
<body>
<div id="header_menu">
<ul>
<li> <a class="btA" href="#">画像上の文字</a></li>
<li> <a class="btB" href="#">文字B</a></li>
</ul>
</div>
<div style="clear:both;"></div>
テスト文字列テスト文字列テスト文字列テスト文字列テスト文字列
</body>
関連記事
- CSSで画像の上にテキストを配置する
- [CSS] リストをメニューにする（テキスト）
- CSSでDIV３カラム（難あり・・・）
- CSSでDIV２カラム、クロスブラウザ対応
- Geeklog テーマを少しいじる
- 記事の量が多くても少なくても画面下にコピーライト（フッタ）を表示するには？
- geeklog の全てのページにお知らせを入れる
スポンサードリンク
エントリ (RSS)