Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Schrift auf Grafik

Empfohlene Antworten

Veröffentlicht

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. :(

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.

  • Autor

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.

<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,...

  • Autor

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]

evtl. klappts mit

<td valign="top">

?

  • Autor

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. :rolleyes:

Wie haltet Ihr das?

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...

ö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 :)

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>

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.