a:hover span: Positionierung geht vom falschen Element aus!

[Crizzo]

a:hover span:*gelöst* --> neues Problem *gelöst*

Hi,
in meinem Redesign will ich Bilder einfügen, diese sollen per "a:hover span" Text einblenden, der rechts neben dem Bild beginnt.

Der Code dafür:
CSS:

.bilder a:hover span {
position:absolute;
display:block;
z-index:99;
left:120px;
bottom:90px;
width:20em;
background:#903;
color:#FFF;
padding:2px;
font:bold normal 1em/1.2 "times new roman";
}

HTML:

<div class="bilder">
        <a href="menueklein.jpg"><img src="menueklein.jpg" alt="Menü R6 Vegas"/><span>Das Menü von Rainbow Six Vegas wirkt sehr schön.</span></a>
      
       </div>

Komplette Dateien online: http://blackhawk-zone.de/redesign/test/

Komischerweise orientiert sich das left und bottom nicht am Elternelement "div.bilder" sondern am Browserfenster.

Wie bekomme ich es jetzt hin, dass der eingeblendete Text auf gleicher Höhe wie die Grafik und um deren Breite, also 120px nach rechts versetzt wird?

Vielleicht ist es nur ein kleiner Fehler, aber irgendwie steh ich aufm Schlauch.



Danke

Gruß

Edit: Das Elternelement, von welchem ausgegangen werden soll, benötigt "position" "relative", "fixed" oder "absolute". Was ein Fehler....

Edit2: Dann bleibt noch der Fehler, wieso <div class="bilder"> nicht unter #brotkrumen beginnt.
Edit3:
Gut, ich habs:

div.bilder  {position:relative;
float:left;
width:100%;
height:95px;
margin:auto;
text-align:center;
}

und alles geht.