HTML: Text über bestimmter Position auf Grafik anzeigen

[T.E.]

Moin Moin!
Also ich habe ein klitze kleines Problem, was mich im moment nahezu zum verzweifeln bringt.
Und zwar möchte ich gerne einen Counterstand über einer bestimmten Grafik (siehe ANhang) anzeigen, und zwar so, das die Counterzahl immer genau in der Mitte der Grafik ist.

Zur Zeit verusche ich das so:
CSS Code

Code:

#counter{
height:100%; 
z-index:1;
}
#counter_text{
font-size:1.5em; 
font-weight:bold; 
color:#1860A8;
height:100%;
z-index:2;
}

und der Code in der Wiedergabeseite:

Code:

<div id="counter">[img]images/counter.gif[/img]</div>
<div id="counter_text">
<?php   
//COUNTERSTAND ERMITTELN
echo $counter;
?>
</div>

leider ist das derzeitige ergebnis nur, das der Stand unterhalb der Grafik angezeigt wird (siehe Screenshot)!

Kann mir da vllt mal jemand sagen, wie ich das am besten löse?

EDIT: Diverse Suchanfragen bei Google haben mich auch nicht weiter gebracht...

[Mr_G]

Ich würde es so machen: Setz das Bild einfach mit CSS als Hintergrund für das <div>:

Code:

#counter{
  ...
  background: #FFFFFF url(images/counter.gif) no-repeat left top;
}

Nun musst du nur den Text in das <div> schreiben und ihn mittels CSS formatieren.

[T.E.]

Okay ich habe das mal so gemacht wie vorgeschlagen; das Ergebniss sieht folgender maßen aus:
Der untere Teil der Grafik wird einfach abgeschitten -> siehe Screenshot.

[jfheins]

1. Du musst die Box auch so groß machen, wie das Bild (mit css und height, width)

2. Du musst den Text dann horizontal und vertikal zentrieren

[T.E.]

bis auf die vertikale Zentrierung habe ich das aber bei der vertikalen komme ich nicht weiter sry.

[Mr_G]

Einfach mit:

Code:

vertical-align: middle;

Selfhtml hat auch ne CSS-Referenz

EDIT: Mir fällt ein es könnte auch valign sein...

[T.E.]

Okay Vielen Dank!

[BullsEye]

es heißt

Zitat:

valign: middle;

Nur zur klarstellung

[Thorben77]

Nope, die CSS-Eigenschaft heißt vertical-align, das veraltete HTML-Attribut hieß valign

[BullsEye]

Zitat von Thorben77:

Nope, die CSS-Eigenschaft heißt vertical-align, das veraltete HTML-Attribut hieß valign

Ok, wieder was dazugelernt, danke