nicht angemeldet
Hi zusammen,
hab ein kleines Problem und hoffe hier Hilfe zu bekommen.
Ich habe für eine Seite ein Navi-Menü gemacht und das ganze ist als table angelegt. Jetzt möchte ich bei den a:hover erreichen, dass ein background-image erscheint als optischen Effekt. Das klappt prinzipiell auch schon. Allerdings gibt es ein Problem: Geh ich dann mit der Maus über den Link in der Tabellenspalte, dann erscheint zwar das bg-image, aber die Schrift springt nach oben. (Also ist nach wie vor zentriert, aber nicht mehr vertikal - sie "klebt" beim hovern dann oben an der Tabellenspalte.) Habe schon diverses ausprobiert, aber keine Lösung gefunden. Ich poste mal das html und das css. Habe es versucht auf das nötige zu reduzieren:
<body>
<div id="content">
<div id="navioben">
<table>
<tr>
<td id="tdstartseite"><a href="index.htm" onfocus="blur()">Startseite</a></td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#content {
width: 800px;
padding: 0px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
color: white;
}
#navioben {
width: 800px;
height: 40px;
background-image: url(navioben.png);
margin-bottom: 0px;
}
table {
height: 40px;
border-collapse: collapse;
}
tr {
text-align: center;
color: white;
}
tr a {
display: block;
text-decoration: none;
padding: 0px;
border: 0px;
margin: 0px;
}
#tdstartseite {
width: 112px;
}
a:link {
color: white;
display: block;
}
a:visited {
color: white;
}
#tdstartseite a:hover {
background-image: url(tdstartseite.png);
width: 114px;
height: 40px;
margin: -1px;
}
Das CSS ist auch noch sehr optimierungsbedürftig, aber mir geht's primär erstmal darum, dass das mit den Hovers klappt. Ich hab auch bewusst die restlichen Tabellenspalten im html weggelassen. Also nicht wundern!
Achja, und die Lösung sollte nach Möglichkeit nicht über Javascript laufen... ;)
Danke schon mal im Voraus und viele Grüße
Marc
Gunnar Bittersmann