Ich brauche ein Bild für meine Navigationsschaltflächen in meiner Navigationsleiste. Im Moment habe ich es als Farbe eingestellt, und wenn es überlagert ist, ändert es seine Farbe.Hinzufügen eines Bilds für Schaltfläche in einer Navigationsleiste in CSS/HTML
Allerdings brauche ich statt einer Farbe ein Bild. Ich habe das Knopfbild auf die genaue Höhe und Breite so bemessen, wie ich es in meinem CSS eingestellt habe.
Für jede der ul: Über mich, Fotobearbeitung, Video Edits, Schreiben, muss ich einen Knopf haben. Ich habe das Bild und es stimmt auf seine Breite und Höhe.
Hier ist mein HTML-Code:
<!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>
Und hier ist mein CSS-Code für die Navigationsleiste:
#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;
}
ich versucht habe, url (images/navbutton.jpg) innerhalb legte # NavMenu und das hat nicht funktioniert. Egal, für welche Auswahl ich das Bild verwende, es passiert nichts. Und dann muss ich noch ein Rollover-Bild für meine Buttons haben, das sich von meinem Hintergrundbild unterscheidet. Also habe ich zwei Bilder. Ein Bild wird die Schaltfläche sein, und das zweite Bild wird angezeigt, wenn es überlagert ist. Ich werde schielen, ugh. Kann mir bitte jemand helfen? Hinweis Ich verwende nicht JS oder JQ.