Hallo,
möchte den einzelnen navigationspunkte jeweils ein bild zu ordnen beim hover soll sich das bild änder... geht aber net . Die navigation befindet sich in einem weiterm container. innerhalb des container liegt neben der navigation liegt ein bild.
<div id="content">
<img src="images/titel2.gif" width="310" height="100" alt="Highlands" longdesc="images/titel2.gif" />
<div id="navi">
<ul>
<li><a class="home " href=?home.html?></a></li>
<li><a class="service " href=?kontakt.html?></a></li>
<li><a class="blog " href=?blog.html?> </a></li>
<li><a class="contact " href=?contact.html?></a></li>
</ul>
</div>
</div>
#content img{float:left; padding:30px;}
#navi {
width:580px;
height:180px;
border:2px dotted #ffffff;
position:relative;
float: left;
}
#navi ul {
list-style-type:none;
}
#navi li {
height:auto;
width:auto;
display: inline;
padding: 50px;
position:relative;
top: 70px;
}
#navi a.home {
background:url(images/HOME.png) no-repeat;
}
#navi a.home:hover, a.home:active {
background:url(images/HOME2.png) no-repeat;
}
möchte den einzelnen navigationspunkte jeweils ein bild zu ordnen beim hover soll sich das bild änder... geht aber net . Die navigation befindet sich in einem weiterm container. innerhalb des container liegt neben der navigation liegt ein bild.
<div id="content">
<img src="images/titel2.gif" width="310" height="100" alt="Highlands" longdesc="images/titel2.gif" />
<div id="navi">
<ul>
<li><a class="home " href=?home.html?></a></li>
<li><a class="service " href=?kontakt.html?></a></li>
<li><a class="blog " href=?blog.html?> </a></li>
<li><a class="contact " href=?contact.html?></a></li>
</ul>
</div>
</div>
#content img{float:left; padding:30px;}
#navi {
width:580px;
height:180px;
border:2px dotted #ffffff;
position:relative;
float: left;
}
#navi ul {
list-style-type:none;
}
#navi li {
height:auto;
width:auto;
display: inline;
padding: 50px;
position:relative;
top: 70px;
}
#navi a.home {
background:url(images/HOME.png) no-repeat;
}
#navi a.home:hover, a.home:active {
background:url(images/HOME2.png) no-repeat;
}