0
ナビゲーションバー内のナビゲーションボタンに画像を使用する必要があります。今は、私はそれを色として設定し、上に乗ったときに色が変わります。CSS/HTMLのナビゲーションバーにあるボタンの画像を追加する
しかし、色の代わりに、私はイメージが必要です。私は私のCSSの中にそれを設定したように、正確な高さと幅にボタンイメージのサイズを決めました。
ulのそれぞれについて：私について、写真編集、ビデオ編集、書き込み、ボタンが必要です。私はイメージを持っており、その幅と高さは正しいです。ここで
は私のHTMLコードです：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHANGE ME!</title>
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="all">
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!--Start Container for Whole Site-->
<div id="container">
<!--Start Header Content-->
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" width="350" height="80" alt="My
Logo" border="0" /></a></div>
</div><!--End Header Content-->
<!--Start Navigation ontainer-->
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">About Me</a>
</li>
</ul>
<ul>
<li><a href="#">Photo Edits</a>
</li>
</ul>
<ul>
<li><a href="#">Video Edits</a>
</li>
</ul>
<ul>
<li><a href="#">Writing</a>
<ul>
<li><a href="#">Samples</a></li>
<li><a href="#">Recognition</a></li>
</ul> <!--end inner UL-->
</ul><!--End main ul-->
<br class="clearFloat" />
</div> <!--End Navigation Container-->
</div> <!--End wrapper div-->
<!--Start Media Area-->
<div id="media">
<h1>Images/Rich Media</h1>
<p>(470 x 550)</div>
<div id="text">
<h1>Main Body Text</h1>
<p>(470 x 400)</p>
</div><!--End Text Area Here-->
<!--Start Footer Here-->
<div id="footer">
<h1>Footer (50 x 1024)</h1>
<p>
<a href="http://voo2do.com/pub/module_6_Evan_Higgins">Voo2Do Public Task List</a>
<a href="http://students.cpcc.edu/~ehiggin1/web_140/images/sitemap_original.png">Sitemap Public Image</a>
<a href="http://www.gliffy.com/go/publish/9966553">Wireframe Public Image</a>
</p>
</div> <!--End Footer Here-->
</div><!--End Container for whole site-->
<div id="w3"><!--Start HTML 5 Validation Button Here-->
<p>
<a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif" alt="Valid HTML 5" height="31" width="88" style="border:0px;" /></a></p></div><!--End HTML 5 Validation Button Here-->
</body>
</html>
そしてここでは、ナビゲーションバーのための私のCSSコードです：
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin: 0;
padding:0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding:0;
list-style:none;
float: left;
position: relative;
background-color: #C0C0C0;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 35px;
width: 254px;
display:block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility: hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background: #09f;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navmenu a:hover {
color:#000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
私は＃内のURL（画像/ navbutton.jpg）を入れて試してみましたnavMenuとその動作しませんでした。どのような選択をしても画像が表示されなくても何も起こりません。そして、その上に、自分の背景イメージとは違うボタンのためのロールオーバーイメージを持たなければなりません。だから私は2つの画像を持っています。 1つのイメージがボタンになり、2つ目のイメージが上に乗ったときに表示されます。私は十字架についています。誰か助けてくれますか？ note私はJSまたはJQを使用していません。