bilder link

[Langa]

Hallo ich habe eine frage zu meiner cs datei.

ich hab mir ein menü zusammen gebaut für einen freund von mir der findet das zwar schön aber er will knöpfe und nicht text als hintergrund.

erst mal die seite mit den text links:
http://rcswww.urz.tu-dresden.de/~s8502758/hirsch/

nun hab ich mir das so gedacht ich schreibe das in meine css datei so um das ich bilderals links mache die dann sich ändern wenn man mit der maus drüber geht also hover ist mir schon klar. desweitern will ich dann über die bilder einen text legen damit ich nicht für jeden link einen extra knopf machen muss.

mein quelltext bis jetzt für die bilder:

a.bild{
    position: relative;
    background-image: url(grafik/button.gif);
}

a.bild:hover{
    background-image: url(grafik/buttonh.gif);    
}

und in der html datei sieht es so aus:

<div id="menuoben">
<table  border=1 width="95%" cellpadding=0>
            <tr>
            <td align=center><a class="bild" href="aktuelles.htm"></a></td>
            <td align=center><a class="bild" href="verein.htm"></a></td>
            <td align=center><a class="bild" href="Mannschaften.htm"></a></td>
            <td align=center><a class="bild" href="interaktiv.htm"></a></td>
            <td align=center><a class="bild" href="gallerie.htm"></a></td>
            </tr>
        </table>
</div>

so aber nur zeigt ff keine bilder und keine links an.

Ich weiß das wenn ich die position als absolute mache und jeden einzeln in einer seperaten class ausrichte gehts aber es muss doch auch so gehen das ich das in einer tabel mache und mit nur einer class oder?

wenn das geht klappt es auch mit dem text drüber legen das hab ich schon an einer anderen seite getestet.

ich hoffe mir kann jemand helfen.

danke schon mal

edit: zwei punte im link sind einer zuviel

 

[nichtsgeht]

Probier dies mal aus:

.bild a {
    position: relative;
    background-image: url(grafik/button.gif);
}

.bild a:hover {
    background-image: url(grafik/buttonh.gif);    
}

 

[Langa]

es kommen auch keine bilder:sad:

 

[nichtsgeht]

Kannst du mal dein Link ändern, der von dir angegebene Funktioniert nicht.
Edit: Dies Funktioniert naturlich nur, wenn du ein Text mit angibst.

<a class="bild" href="aktuelles.htm">[COLOR=Red]Text[/COLOR]</a>

 

[Langa]

dann kommt der text aber kein bild im hintergrund

 

[nichtsgeht]

Eigenartig, bei mir gehts:
http://www.schatztruhe.kilu.de/beispiel/verkl_3.htm

Nicht schön, aber war ja auch nur zum ausprobieren
Muß jetzt leider weg, vielleicht kann dir ja ein anderer helfen :(

 

[Langa]

der befehl display block hat gefehlt.
kannst mir ja nich so was vorenthalten jetzt gehts danke

Nun ist bei mir noch das problem das der text der über dem bild liegen soll nicht richtig drauf liegt wie kann ich den etwas hin und her schieben?
hab erst gedacht ich kann in einer neuen id die transparent ist drüber legen um den text da auszurichten aber dann gehen ja die bilder nicht mehr.

kann ich da irgendwie auch anders ne tabelle drüberlegen? weil ich kann ja die bilder auch so zeigen lassen ohne text. oder kann ich den text irgendwie anders so verrücken das es geht mit zeilen um brüchen geht es schon mal nicht

 

[nichtsgeht]

So bin wieder da, ging ein bisschen schneller als gedacht:)
Mit den DISPLAY: BLOCK habe ich nur die Größe an der Grafik angepasst. Ohne müsste es auch klappen, da wird allerdings nicht die gesammte Grfik angezeigt.
Nagut. Jetzt zu deinem neuen Problem.
Mit padding kannt du den Text verschieben.

    a.bild {
      position: relative;
      background-image: url(../bilder/list1s.jpg);
      padding: 4px;
      display: block;
      width: 150px;
      height: 20px;
    }

Hierbei wird rundherum um 4 Pixel verschoben. Du kannst natürlich auch
mit den Werten spielen:

  padding-left: 4 px;
  padding-top: 2 px;

Beispiel wieder unter: Link mit Untergrund