Text auf komplettes Bild schreiben

[Ulf]

Hallo, da mir vorhin schon so nett geholfen wurde hier gleich noch eine Frage. :)

Ich möchte den Rückgabewert eines Counters auf ein Icon schreiben.
Ich dachte mir das muss doch in nem <span> mit der Styleeigenschaft
background-image:url(images/counter.gif);
gehen. Der Text ist im Moment nur eine 30, deswegen habe ich das Problem, dass das Bild nicht komplett angezeigt wird.

Wie schaffe ich es also ein Bild als Hintergrund in nem div oder span komplett anzuzeigen und auf ne bestimmte Position dort Text zu schreiben?

Vielen Dank schonmal!

[Alex]

Hi Ulf

du kannst einfach dein div/span Element so groß machen wie die Grafik ist. Den Text den du darauf schreiben willst, zentrierst du dann mit text-align:center; vertical-align:middle;

Gruß
Alex

[ulf]

ich habe es so gemacht:

<span style="height: 15px; width: 80px; background-image:url(images/counter.gif);">
<span class="countertxt"><?php
include "counterfile.php";
echo "$variable[1]"
?></span></span>

trotzdem funktioniert es absolut nicht, der text erscheint zwar auf dem bild. dieses ist aber immer nur so breit wie der text obwohl es 80px breit ist ... ):

[Alex]

<span style="height: 15px; width: 80px; background-image:url(images/counter.gif);">
<span class="countertxt"><?php
include "counterfile.php";
echo "$variable[1]"
?></span></span>

Wenn du für den "Rahmen" des Hintergrundbildes ein <div> oder ein table-konstrukt anstelle des <span> nimmst, müsste es funktionieren.

[ulf]

das habe ich gemacht:

<table border="0" >
  <tr>
    <td width="80" height="15" style="background-image:url(images/counter.gif); background-repeat: no-repeat;"><span style="margin-top:2px; font:9px Arial, sans-serif;
vertical-align:top;"><?php include "counter.php"; echo "$tbr[1]"?></span></td>
    </tr>

</table>

das funktioniert so auch, problem ist ich möchte es auf dieselbe div zeile wie das hier:

<div style="height:15px; overflow:hidden; ">
<a href="http://validator.w3.org/check?uri=referer"><img src="images/w3c_xhtml10.gif" alt="xhtml 1.0 strict" title="Validate the markup of this site" style="vertical-align: top; width:80px; height: 15px; overflow:hidden" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c_css.gif" alt="css" title="Validate the css of this site" style="vertical-align: top; width:80px; height: 15px; overflow:hidden"  /></a>

schreiben. nur dort funktioniert es nichtmehr... bin echt ratlos...

[Alex]

<div style="height:15px; overflow:hidden; ">
<a href="http://validator.w3.org/check?uri=referer"><img src="images/w3c_xhtml10.gif" alt="xhtml 1.0 strict" title="Validate the markup of this site" style="vertical-align: top; width:80px; height: 15px; overflow:hidden" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c_css.gif" alt="css" title="Validate the css of this site" style="vertical-align: top; width:80px; height: 15px; overflow:hidden"  /></a>

also damit kann ich jetzt nichts mehr anfangen.

hier mal ein beispiel, wie du text auf eine 100px mal 100px bilddatei schreibst:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
  <td style="width:100px; height:100px; background-image:url('100x100.gif'); background-repeat:no-repeat; text-align:center; vertical-align:middle;">text</td>
</tr>
</table>

Gruß
Alex