Schrift auf Grafik

[CyberDemon]

Hallo,

ich habe eine Tabelle in der eine Grafik mit <img src ...> eingebunden ist.

Über dieser Grafik soll Text angezeigt werden. Doch der Text steht immer unter der Grafik.

<div align="center">

<table border="0">

  <tr>

    <td><img src="Bild.jpg" />

    <div>

    text

    </div>

  </td>

  </tr>

  </table>

</div> [/PHP]

Ich finde einfach den Fehler nicht.

[perdian]

Ich finde einfach den Fehler nicht.

Ein DIV alleine placiert dir den Text nicht automatisch über dem Bild, da fehlt noch die Info, wie das DIV genau orientiert sein soll, etc.

Mehr gibt's hier:

http://de.selfhtml.org/html/text/bereiche.htm#block

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

[U-- °LoneWolf°]

Alternativ kann man für Zellen auch Hintergrundbilder festlegen bzw. du machst dir in diese Zelle eine unter Tabelle die nur eine spalte und eine Zeile hat die Tabelle bekommt als bgimage das Bild und der Text steht ganz normal in der Zelle.

[CyberDemon]

Das Problem ist, das bei verschiedenen Auflösungen die Elemente der Seite verschoben werden, wenn ich die Positionen absolut definiere. Deshalb soll alles so programmiert werden, das es immer in der Mitte ist. Egal ob man 800x600, 1024x768 oder höher eingestellt hat.

@U[[ °LoneWolf°:

So etwa:

<table border="0" width="100%">

  <tr>

    <td align="center">

	<div class="text">

		text

	</div>

	<table width="100%" border="0" background="Bilder/vorlage_4.jpg" align="center">

  <tr>

    <td> </td>

  </tr>

</table>

	</td>

  </tr>

  </table>

[/PHP]

Dabei wird aber die Grafik nicht komplett angezeigt.

[kills]

<div style="background-image: url(Bild.jpg); background-repeat: no-repeat; background-position: center center; text-align: center;">

    text

</div>

[/PHP]

Das ganze aber besser per Class oder Id zuweisen,...

[CyberDemon]

Danke kills!

Dein Beispiel hat mich schon ein Stück weiter gebracht.

Allerdings habe ich immer noch nicht das Ergebnis, welches ich haben möchte.

>> Verdeutlichung

Der innere Rahmen ist eine Tabelle in der Zelle der ersten Tabelle.

<table border="1" width="100%" height="100%" class="backstyle">

  <tr>

    <td align="center">

	<table width="65%" border="1" cellspacing="0" cellpadding="0">

  	<tr>

    <td>

	<div class="text">

		<p><b>Willkommen auf meiner Homepage!</b></p>

		<p>Hier kommt der Inhalt hin.</p>

	</div>

	</td>

  </tr>

</table>

</td>

</tr>

</table> [/PHP]

[forTeesSake]

evtl. klappts mit

<td valign="top">

?

[CyberDemon]

Nachdem ich eine zweite Zeile und darin ein transparentes Bild eingefügt habe, komme ich der Sache schon näher.

Bei 800x600 geht es gerade noch, aber bei einer Einstellung > 1024x768 ist alles verschoben.

Das wäre alles wesentlich einfacher, wenn ich mich auf eine Auflösung (1024x768) festlegen würde. Aber man möchte es ja möglichst vielen recht machen.

Wie haltet Ihr das?

[forTeesSake]

versuchs mit valign="top".

<table border="1" width="100%" height="100%" class="backstyle">

  <tr>

    <td align="center" valign="top">

	<table width="65%" border="1" cellspacing="0" cellpadding="0">

  	<tr>

    <td>

	<div class="text">

		<p><b>Willkommen auf meiner Homepage!</b></p>

		<p>Hier kommt der Inhalt hin.</p>

	</div>

	</td>

  </tr>

</table>

</td>

</tr>

</table> 

</td>

und das klappt dann bei jeder auflösung...

[Manitu71]

öhm über z-index sollte das doch auch klappen?

ich leg die Grafik hiermit unter dem Text und kann sie genau immer in der Mitte anzeigen lassen. Und beim Text die Mitte zu finden geht ja auch.

Oder denke ich da zu einfach

[kills]

ich würd das ganze auch ohne Tabllen machen...

<div style="width:100%;height:100%; border: 1px solid red;text-align:center;vertical-align: top;" class="backstyle">

    <div class="text">

        <p><b>Willkommen auf meiner Homepage!</b></p>

    </div>

    <div class="inhalt">

        <p>Hier kommt der Inhalt hin.</p>

    </div>

</div>