Text über einem Bild passgenau plazieren

[nobbi]

Hallo,

ich habe eine Tabelle mit Bildern darin.
Nun sollen über manche Bilder Text plaziert werden, die genau x,y- Pixel von der linken, oberen Bildecke, plaziert werden.

Dazu brauche ich wohl eine Box, die genau der Umhüllung des Textes entspricht und deren linke, obere Ecke ich relativ zur Ecke des Bildes, bzw. der Tabelle plazieren kann.

Wie realisiere ich das?

Danke schonmal
Nobbi

[Beat]

... Tabelle mit Bildern darin.
... Bilder Text plaziert werden, ...
Dazu brauche ich wohl eine Box, die genau der Umhüllung des Textes entspricht und deren linke, obere Ecke ich relativ zur Ecke des Bildes, bzw. der Tabelle plazieren kann.

Du kannst nicht relativ zu einem <img> platzieren. da ein <img> Element keine Children haben kann.

Wie realisiere ich das?

allgemein:

<td class="textoverimage"><p>Text</p><img ... ></td>

.textoverimage {
    position:relative;
    text-align:left;
    vertical-align:top;
}
.textoverimage p {
    position:absolute;
    top:0px;
    left:0px;
}
Die Krux besteht nun darin, wie die Dimensionen der Zellen bei verschiedenen Bildgrössen berechnet werden.
Mit den align Werten hast du auf jeden Fall einen linken oberen Bezugspunkt zur Content-Box des td Element

PS: es muss eventuell für deine Bedürfnisse gar keine Tabelle sein.

mfg Beat

[nobbi]

Wie realisiere ich das?

allgemein:

<td class="textoverimage"><p>Text</p><img ... ></td>

.textoverimage {
    position:relative;
    text-align:left;
    vertical-align:top;
}
.textoverimage p {
    position:absolute;
    top:0px;
    left:0px;
}

Hallo Beat,

erst mal vielen Dank.
Aber irgendwie klappt da was nicht.

Der Text wird absolut zum Bildschirmrand (zumindest siehts so aus) aber nicht zu meiner Zelle mit dem Bild positionert. :o(

PS: es muss eventuell für deine Bedürfnisse gar keine Tabelle sein.

Hab ich mir auch schon überlegt.
Aber, wie ich das dann mit der Plazierung der Zellen hinkriege, hat sich mir noch nicht erschlossen.
Ist halt ne klassische Tabellen ánordnung mit Zeilen und Spalten.

[Detlef G.]

Hallo nobbi

erst mal vielen Dank.
Aber irgendwie klappt da was nicht.

Der Text wird absolut zum Bildschirmrand (zumindest siehts so aus) aber nicht zu meiner Zelle mit dem Bild positionert. :o(

Das kann auch nicht funktionieren, weil position:relative nicht auf Tabellenelemente wirkt.

Hab ich mir auch schon überlegt.
Aber, wie ich das dann mit der Plazierung der Zellen hinkriege, hat sich mir noch nicht erschlossen.
Ist halt ne klassische Tabellen ánordnung mit Zeilen und Spalten.

Ist es vom Design so oder von der Art der Daten?
Sind deine Bilder Seiteninhalt, Information oder dienen Sie nur dem Design?

Die Beantwortung dieser Fragen, und noch besser ein Link auf deine Seite oder ein vorübergehendes Testbeispiel könnte uns sehr helfen eine passende Lösung für dich zu finden.

Auf Wiederlesen
Detlef

[nobbi]

Ist es vom Design so oder von der Art der Daten?
Sind deine Bilder Seiteninhalt, Information oder dienen Sie nur dem Design?

Es ist eine Tabelle, die mit Daten (unter anderm Bilder) gefüllt wird.
Mit reinem Design hat das nichts zu tun.

Die Beantwortung dieser Fragen, und noch besser ein Link auf deine Seite oder ein vorübergehendes Testbeispiel könnte uns sehr helfen eine passende Lösung für dich zu finden.

Die Seite läuft auf einem lokalen Webserver und ist somit leider nicht von aussen zu sehen.

Die Tabelle hat immer 5 Spalten und n Zeilen.
In den Zellen der Tabelle sind zum Teil Symbole (png's) und Texte eingefügt.
Die Bilder haben immer die selbe Breite von 80 Pixeln und eine Höhe im Raster von n*40 Pixeln. Die Zellenhöhe richtet sich nach der Höhe der Bilder.
Allerdings stehen Höhe und Breite auch in der Datenbank.
Ebenfalls in der Datenbank steht die Information ob überhaupt und wenn ja, wo ein Text auf das Symbol geschrieben werden soll. Eine Art Kennzeichnung, die von der Applikation berechnet wird.

Die Tabelle befindet sich innerhalb eines Div`s, das wiederum Teil eines YUI Konstrukts ist, das den Bildschirm in Header- Content- und Footerbereich aufteilt.

Das wars so im Groben.

Gruß Nobbi

[Detlef G.]

Hallo nobbi

Es ist eine Tabelle, die mit Daten (unter anderm Bilder) gefüllt wird.
Mit reinem Design hat das nichts zu tun.

Wirklich tabellarische Daten?
Also, wie lauten die Spaltenüberschriften?
Oder werden die Daten, nur fünfspaltig dargestellt und eine Anzeige in ein, zwei oder acht Spalten wäre auch denkbar?
(Ist es eventuell eher eine Auflistung von Daten?)

Sorry, dass ich so darauf herumreite - die Verwendung einer Tabelle benötigt jeweils ein zusätzliches Element.

Die Seite läuft auf einem lokalen Webserver und ist somit leider nicht von aussen zu sehen.

Bedeutet das eine homogene Umgebung, so dass du die Verwendung bestimmter Browser ausschließen kannst?

In den Zellen der Tabelle sind zum Teil Symbole (png's) und Texte eingefügt.

Also sind die Symbole selbst der Inhalt, der eventuell durch Text ergänzt wird.
Damit fällt die einfache Verwendung dieser als Hintergrund weg.

Die Bilder haben immer die selbe Breite von 80 Pixeln und eine Höhe im Raster von n*40 Pixeln. Die Zellenhöhe richtet sich nach der Höhe der Bilder.

Also eine feste Breite und variable Höhe. Entspricht die Bildbreite auch der Spaltenbreite oder sind diese breiter?

Allerdings stehen Höhe und Breite auch in der Datenbank.
Ebenfalls in der Datenbank steht die Information ob überhaupt und wenn ja, wo ein Text auf das Symbol geschrieben werden soll. Eine Art Kennzeichnung, die von der Applikation berechnet wird.

Diese Daten stehen dir zum Generieren des HTML-Dokument alle zur Vefügung?

So, genug der Fragerei.

Eine Tabellenzelle mit Text müsste damit es funktioniert ungefähr so aussehen:
<td><div><p style="left:x;top:y;">Ein Text</p><img …></div></td>
(x und y jeweils die Position mit Einheit - px)

Das zentrale CSS dazu:

td div {  
  position: relative;  
}  
td div p {  
  position: absolute;  
  margin:0;  
  padding:0;  
}  

Auf Wiederlesen
Detlef

[Steel]

Hi!

Warum die Bilder nicht als Hintergrundgrafik der Zellen? Sollte die Seite dynamisch generiert werden (Die Verwendung einer DB laesst darauf schliessen) sollte es kein Problem sein, den Zellen die korrekten Dimensionen zu verschaffen.

Wenn es sich aber um Links handelt (Bildergallerie) gibts ein <a> mit dem man spielen kann.

[nobbi]

Hi!

Warum die Bilder nicht als Hintergrundgrafik der Zellen? Sollte die Seite dynamisch generiert werden (Die Verwendung einer DB laesst darauf schliessen) sollte es kein Problem sein, den Zellen die korrekten Dimensionen zu verschaffen.

Du hast recht, das Dimensionieren der Zelle wäre kein Problem.
Hmmm, als Hintergrundgrafik, wäre denkbar.
Allerdings nachher beim Drucken muss der user das mitdrucken der Hintergrundgrafiken einstellen.

Gruß

[Steel]

Hola!

Du hast recht, das Dimensionieren der Zelle wäre kein Problem.
Hmmm, als Hintergrundgrafik, wäre denkbar.
Allerdings nachher beim Drucken muss der user das mitdrucken der Hintergrundgrafiken einstellen.

Ja. Wenn es gedruckt werden soll... Du sagst ja nicht, was Du da eigentlich machst und laesst uns hier im Dunkeln herumstochern.

[Detlef G.]

Hallo Steel

Warum die Bilder nicht als Hintergrundgrafik der Zellen?

Was meinst du, warum ich erst so viel gefragt habe?

Sind deine Bilder Seiteninhalt, Information oder dienen Sie nur dem Design?

In den Zellen der Tabelle sind zum Teil Symbole (png's) und Texte eingefügt.

Also sind die Symbole selbst der Inhalt, der eventuell durch Text ergänzt wird.
Damit fällt die einfache Verwendung dieser als Hintergrund weg.

Auf Wiederlesen
Detlef