CSS position

[bleumi85]

Hallo,

ich arbeite weiterhin an meiner ersten kleinen Homepage und habe mir jetzt eine Seite gebastelt bei der ich diverse Rezepte hinterlegen will (also zum kochen). Jedem Rezept gebe ich einen eigenen Listenpunkt mit 3 Einträge undzwar

1. dem Rezeptnamen
2. dem Rezeptbild
3. einem Fragezeichenbild

Das ganze sieht dann bei mir wie folgt aus:

<li>
  <a id="Rezept01" href="#">
    <span><b>Rezept Nr. 1</b><br>Königsberger Klopse mit Kartoffeln</span>
    <span><img src="pics/koenigsberger.jpg" alt="koenigsberger"></span>
    <span><img src="pics/Fragezeichen.png" alt="Fragezeichen"></span>
  </a>
</li>

Jetzt hab ich mir folgendes vorgestellt: Jeder Listenpunkt soll 150 x 600 Pixel sein, rechtsbündig liegt das Menübild (150 x 300), auf der linken Seite steht das Bild von dem Fragezeichen (zentriert in dem linken Bereich 150 x 300) und der Name des Rezeptes steht unter dem Menübild und wird sichtbar wenn man über das Menübild hovert weil dieses dann nach links wandert (widerum über das Fragezeichen). Mit dem z-Index komme ich klar. Hovern funktioniert problemlos nur ich bekomm die 3 spans nicht ansatzweise an die Position wo ich sie gerne hätte.

position:absolute;
top:0;

funktioniert nicht, da sich dann bei mehreren Rezepten alle Bilder an den oberen Rand setzen und

position:relative;
top:0;

funktioniert genau so wenig, da die 3 spans dann irgendwie alle komisch aufeinander reagieren.

Hat jemand eine Lösung für mich? Ist der Ansatz mit span unklug gewählt oder wie kann ich das hinbekommen?