David G.: Text genau neben einer Grafik

Beitrag lesen

Hallo,

ich habe ein CSS-Menü erstellt.
Der Code ist:

<head>
<style type="text/css">
body {background:white;}

div.menu {
 width:110px;
 background:white;
 padding:0;
 margin:0;
 border:1px solid cccccc;
}

div.menu a {
 display:block;
 margin:0;
 width:100%;
 padding:5px;
 font-family:tahoma;
 font-size:10px;
 border:1px solid white
 color:black;
 text-decoration:none;
}

html>body div.menu a {width:auto;}

div.menu a:hover {
 background:rgb(122,187,255);
 color:black;
 border:1px solid rgb(49,106,197)
}

div.menu a:active {
 background:cccccc;
 color:black;
 border:1px solid cccccc
}

</style>
<base target="Hauptframe">
</head>

<div class="menu">
<a href="home.php"><font size="2" face="Tahoma" color="#000000"><img border="0" src="menu/home.gif" width="18" height="18">  
<sup>[ Home ]</sup></font></a>

<a href="bilder"><font size="2" face="Tahoma" color="#000000"><img border="0" src="menu/bilder.gif" width="18" height="18">  
    <sup>[ Bilder ]</sup></font></a>

<a href="forum"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">  
    <sup>[ Forum ]</sup></font></a>

<a href="mp3.htm"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">  
    <sup>[ Hörproben ]</sup></font></a>

<a href="links.htm"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">  
    <sup>[ Links ]</sup></font></a>

<a href="presse.htm"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">  
    <sup>[ Presse ]</sup></font></a>

<a href="chat/chat"><font face="Tahoma" color="#000000" size="2"><img border="0" src="menu/forum.gif" width="18" height="18">  
    <sup>[ Chat ]</sup></font></a>

Wie ihr seht, habe ich den Text dazu gebracht, direkt neben der Grafik zu stehen, indem ich ihn mit <sup> höhergestellt habe. Eine sehr unelegante Lösung.
Die Grafiken soll nun noch grösser werden und dadurch rückt der Text weiter nach unten.
Eine Lösung wäre eine Tabelle innerhalb der Box, aber dann wird der Text nicht mehr als Link angesehen.
Ein ähnliches Problem ist mit dem Bild selber: es ist ebenfalls kein Link.

Für Lösungen wäre ich seeeehr dankbar.
Viele Grüße,
David