Pida: Rollover-Buttons (CSS) - Text darin ausrichten

Beitrag lesen

Hallo!

Ich gestalte eine Seite, deren Navigation über Buttons erfolgen soll. Mittels CSS soll dabei der grade überfahrene Button hervorgehoben werden. Soweit bin ich auch; beim Überfahren der Buttons wird eine andere Grafik angezeigt (Was ihr natürlich nicht seht; leider kann ich die Datei z.Zt. nicht hochladen).
Zusätzlich aber soll innerhalb jedes Buttons ein Text angezeigt werden, und das optimalerweise auch wirklich als Text und nicht innerhalb der Grafik; denn dann wäre pro link ein separater Button erforderlich (Ladezeit!).
Mit unterem Quelltext bin ich so weit gekommen, dass der Text innerhalb des Buttons horizontal zentriert angezeigt wird. Was leider nicht klappt: Den Text am unteren Rand der Grafik auszurichten - jeder Versuch einer vertikalen Ausrichtung schlug bisher fehl. vertical-align, padding, margin - alles ohne Reaktion des Browsers bzw. totales Chaos auf der Seite.

Kann mir vielleicht jemand nen Tip geben, wie ich auch das erledige?

Vielen Dank, Pida

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

<HEAD>

<style>
a { display:block;
    background-image:url(dateien/linkbutton.jpg);
    width:53px; height:98px;
    text-decoration:none;
    text-align:center;
}

a:hover { background-image:url(dateien/aktivbutton.jpg); width:53px; height:98px; }
</style>

</HEAD>
<BODY>

<table border="0" cellpadding="10" cellspacing="0">
<tr>

<td valign="top" width="70px">

<div align="left">
 <a href="index.html">Home</a>
 <p style="margin-top:40px">
        </div>

<div align="left">
        <a href="dateien/artist.html">Artist</a>
 <p style="margin-top:40px">
        </div>

<div align="left">
        <a href="GÄSTEBUCH">Guestbook</a>
 </div>

</td>
</tr>
</table>

</BODY>
</html>