Bildbeschriftung auf dem Bild, nicht unterhalb

[Kathi]

Ich möchte meine Bilder auf meiner Webseite ausgeben, und den Titel in das Bild schreiben.
Doch ich bekomme den Titel nur unterhalb hin, nicht in das Bild. Auch sollte der Hintergrund des Titels nur padding:3% haben und nicht die Breite des Bildes haben.
Kann mir da jemand auf die Sprünge helfen.

Kathi

  
<li>  
<img  alt="" src="images.jpg" />  
<p>titel</p>  
</li>  

  
li{  
float:left;  
width:32%;  
margin:1% 1% 0 0;  
}  
  
img {  
width:94%;  
padding:3%;  
border: 1px dotted #C0C0C0;  
}	  
  
p {  
text-align: right;  
font-size: 11px;  
color: #17518C;  
background: #c0c0c0;  
font-weight: bold;  
padding:2px;  
}	

[Der Martin]

Hi,

Ich möchte meine Bilder auf meiner Webseite ausgeben, und den Titel in das Bild schreiben.
Doch ich bekomme den Titel nur unterhalb hin, nicht in das Bild.

<li>

<img  alt="" src="images.jpg" />
<p>titel</p>
</li>

  
zwei unterschiedliche Ansätze:  
  
1\. Bild und Bildunterschrift beide innerhalb des li-Containers absolut positionieren.  
  
2\. Bildunterschrift mit negativem margin-top "hochziehen".  
  

> Auch sollte der Hintergrund des Titels nur padding:3% haben und nicht die Breite des Bildes haben.  
  
Das sollte in beiden Fällen leicht möglich sein.  
  
So long,  
 Martin  

-- 
Die letzten Worte des Fallschirmspringers:  
ELENDE SCHEISSMOTTEN!!  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Kathi]

2. Bildunterschrift mit negativem margin-top "hochziehen".

p {
margin-top:-50px;
text-align: right;
font-size: 11px;
color: #17518C;
background: #c0c0c0;
font-weight: bold;
padding:2px;

}

nur wenn ich den Text mit margin-top:-50px;
hochziehe, ist der Text vorn, aber der Hintergrund background: #c0c0c0;
nicht nur hinter dem Titel sondern hinter dem Bild.

Kathi

[JürgenB]

Hallo Kathi,

vielleicht hilft dir das hier http://www.j-berkemeier.de/Test/Bildwechsel-Test.html. Du musst allerdings für dein Problem dann den hover-Fall zum Normalfall machen.

Gruß, Jürgen