xhtml+cssでロールオーバーがうまく動作しない
以下挑戦したのですが、うまくいかないので、
こちらで質問させていただきました。
すいませんが、わかる方教えていただけませんでしょうか。
xhtml+cssでhpコーディングしてみたのですが、ロールオーバーがうまく動作しないのです。
レイアウトもCSS 再度にメニュー項目をCSSで作りました。
以下が htmlの記述です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テストテストテストテスト</title>
<link href="../common/base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>id "header" の内容がここに入ります</h1>
</div>
<div id="contents">
<div id="sidenavi">
<h2 id="sn1"><a href="#"><em>TOP</em></a></h2>
<h2 id="sn2"><a href="#"><em>テスト</em></a></h2>
<h2 id="sn3"><a href="#"><em>テストテスト</em></a></h2>
<h2 id="sn4"><a href="#"><em>リンク集</em></a></h2>
</div>
************
以下は、cssのコードです。
/*ここからサイドナビ指定*/
#contents #sidenavi {
background: #99CC66 url(images/bg_19.jpg) repeat;
margin: 0px;
padding: 15px 0px 0px 5px;
height: 1100px;
width: 190px;
float: left;
}
#contents #sidenavi h2 {
font-size: 9px;
float: left;
margin: 0px;
padding: 0px;
}
#sidenavi h2 a {
text-decoration: none;
display: block;
height: 56px;
width: 182px;
margin: 0px;
padding: 3px 0px 3px 3px;
color: #0000CC;
visibility: hidden;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
}
#sidenavi em {
visibility: hidden;
}
/*サイドナビ1番目*/
#sidenavi h2#sn1 {
background: url(images/navi_06.jpg) no-repeat;
}
#sidenavi h2#sn1 a:hover,#sidenavi h2#sn1 a:active {
background: url(images/navi_ov_06.jpg) no-repeat;
}
/*サイドナビ2番目*/
#sidenavi h2#sn2 {
background: url(images/navi_12.jpg) no-repeat;
}
#sidenavi h2#sn2 a:hover,#sidenavi h2#sn2 a:active {
background: url(images/navi_ov_12.jpg) no-repeat;
}
/*サイドナビ3番目*/
#sidenavi h2#sn3 {
background: url(images/navi_14.jpg) no-repeat;
}
#sidenavi h2#sn3 a:hover,#sidenavi h2#sn3 a:active {
background: url(images/navi_ov_14.jpg) no-repeat;
}
/*サイドナビ4番目*/
#sidenavi h2#sn4 {
background: url(images/navi_16.jpg) no-repeat;
}
#sidenavi h2#sn4 a:hover,#sidenavi h2#sn4 a:active {
background: url(images/navi_ov_16.jpg) no-repeat;
}
/*ここまでサイドナビ指定*/
お礼
ありがとうございます。 ブログは僕も思いついたんです。 ただブログだと他の余分な内容まで見られてしまいますよね。 それに質問に書いた写真のように写真だけの単独のページになるんですかね。 参考になりました。
補足
ブログにアップしたらできました。 写真をクリックしたらちゃんと写真だけの単独のページになりました。 助かりました。 ありがとうございます。 他の皆さんもありがとうございます。