So, habe es mal ausprobiert, aber irgendwie komme ich nicht wirklich weiter.
habe es jetzt einmal an einem Link ausprobiert:
..:: Feger-Kühlung GmbH - Kälte-Klima-Kompetenz - Seit 1950 ::..
HTML-Code:
<ul id="navigation">
<li id="home"><a href="index.php"><strong>Home<span></span></strong></a></li>
<li><a href="index.php" id="ueber_uns"></a></li>
<li><a href="index.php" id="service"></a></li>
<li><a href="index.php" id="dienstleistungen"></a></li>
<li><a href="index.php" id="referenzen"></a></li>
<li><a href="index.php" id="kontakt"></a></li>
<li><a href="index.php" id="impressum"></a></li>
</ul>
Das dazugehörige css:
HTML-Code:
#navigation
{
padding: 0 0 0 14px;
}
#navigation li
{
float: left;
list-style-type: none;
}
#navigation a, #navigation strong
{
display: block;
height: 40px;
width: 100%;
position: relative;
}
#navigation span
{
position: absolute;
width: 100px;
height: 40px;
top: 0;
left: 0;
background: url(../images/nav.png);
}
#navigation #home a span
{
display: block;
background: url(../images/nav-home.png);
background-position: 0 0;
width: 83px;
height: 40px;
float: left;
}
#navigation #home a:hover span,
#navigation #home strong span
{
background: url(../images/nav-home.png);
background-position: -83px 0;
float: left;
}
Folgendes Problem habe ich aber noch:
Das normale Bild wird nicht angezeigt, immer nur das für hover.
Das mit dem Link bei angeschalteter Grafik funzt...
Ich blicke bei der ganzen Sache noch nicht so wirklich durch, daher sehe ich nicht was ich falsch gemacht habe...kann mir das jemand von euch sagen?
Besten dank
Michael