#contents（ul要素）は、まず、下側画像がちゃんと入り、かつ、本文にかからないように位置とwidthとheightを指定し背景画像を置く。
#contents {
position: absolute;
left: 0;
top: 111px;
width: 249px;
height: 208px;
background-image: url(images/backul.gif);
background-repeat: no-repeat;
}それ以降はもろADP: ADPでのCSSロールオーバーである。いちおう復習。
li要素の中にa要素を入れるわけだが、標準準拠のブラウザではわざとa要素を下側にはみ出させるため、overflow: hiddenを指定する。
#contents li {
position: absolute;
width: 190px;
height: 44px;
background-repeat: no-repeat;
overflow: hidden;
list-style-type: none;
}a要素は、display: blockにし、ここではじめてheightとpaddingを同時指定している。paddingはテキストを配置するために必要である。heightを指定しないと、ブラウザによってはテキストよりも下の部分の背景画像が表示されなくなる。a要素の中身はただのベタテキストであるので、paddingは指定できない。よって、heightもpaddingもここで指定しないとならない。
#contents li a {
display: block;
height: 44px;
padding: 25px 14px 0 0;
background-position: 0 0;
line-height: 1;
font-size: 10px;
letter-spacing: 0.1em;
text-align: right;
}IE6の後方互換モードではブロックの高さは44px分、標準準拠ブラウザでは44px+25pxになり、通常ははまる。が、上から25px、右から14pxという、テキストが配置される場所は同じになるし、背景画像が表示される場所も同じになる。もちろん、ここでwidthを指定していないことも効いている。
さらに、li要素でoverflow: hiddenをしておけば、どちらでも同じ表示、同じ挙動になるわけだ。
a:hoverは、background-positionを使ってa要素の背景画像の下半分を表示させる。画像表示がoffになっているときのために、hover時は違うbackground-colorを指定しておくのが望ましい。
a要素の背景画像例 (190 by 88 pixels, 5.2KB)
#contents li a:link, #contents li a:visited, #contents li a:hover {
background-color: #f0f8ff;
color: #606269;
text-decoration: none;
}
#contents li a:hover {
background-color: #fef0f2;
background-position: 0 44px;
}そのあとで、li要素ごとにどこに配置するか、どの画像を使うかを指定する。
#top {
left: 0;
top: 15px;
}
#top a {
background-image: url(images/backa04.gif);
}#contentsのボタンの数は1個または3個と決まっているので、その下に配置する#navi2（dl要素）もposition: absoluteで指定できる。ボタンの数がバラバラだったらむちゃくちゃ困難になる。
#navi2 {
position: absolute;
left: 13px;
top: 200px;
width: 172px;
}dl要素は重要でないので今回はサボり。ただし、ddも一番最初にmarginとpaddingを消してしまったので、必要に応じて設定する必要があることも忘れないでおく。
出来上がりキャプチャ (600 by 320 pixels, 22.0KB)
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/311
