サイト内検索

...タグ・小技・etc...

リスト

リスト・ロールオーバーで配置

[メモ]

不定の位置に配置するときはposition:absolute; が必要です。

IE6に対応するには、「wrapper」部分に、position:relative;を指定します。

サンプルのソース

[スタイルシート]

.image a{
color: #999999;
display:block;
width:200px;
height:40px;
background-color:#f1d8fa;
line-height:40px;
text-align:center;
}
.image a:hover{
color: #000000;
background:url(../img/sample.gif) no-repeat;
}
.position{
position:relative;/*忘れずに*/
}
#menu{
width: 500px;
height: auto;
clear: both;
position: absolute;
/*この箇所にも指定しておくと「お気に入り」を表示しても配置がズレません。*/
}
#menu li{
list-style: none;
float: none;
width: 500px;
height: 30px;
position: absolute;
}
#menu li#botan1{
top: 20px;
left: 50px;
}
#menu li#botan2{
top: 80px;
left: 250px;
}
#menu li#botan3{
top: 140px;
left: 100px;
}

[bodyの中]

<div id="wrapper" class="position">
<div id="container">
<div id="main">
<ul id="menu" title="メインメニュー">
<li id="botan1">
<div class="image">
<a href="sample/sample1.html" title="sample1"> home</a>
</div>
</li>
<li id="botan2">
<div class="image">
<a href="sample/sample2.html" title="sample2"> HTML・XHTMLmemo</a>
</div>
</li>
<li id="botan3">
<div class="image">
<a href="sample/sample3.html" title="sample3"> タグ・小技集</a>
</div>
</li>
</ul>
</div>
</div>
</div>

Copyright c 2007.10.01 luc All rights reserved.