Bilder und text Overlays

[shatter]

**** nochmal ****

Hallo!

für ein Projektchen benötige ich die Möglichkeit, ein vorgegebenes JPG mit Texten zu überlagern - oder eine alternative Lösung.
Es handelt sich um ein Rechteck, dass fünf "Reiter" oben und Links vom Rechteckfeld besitzt. Alle sechs Flächen sind mit MAPs aktiviert.

Das Ganze ist Teil einer Tabelle mit 10 x 10 solcher Rechtecke
Bsp:
      <td width=145>
         <img id="Bild1-1" height=100 width=145 src="./assets/images/Button_p_i_n_s_fb.jpg" border=0 alt="Button_p_i_n_s_fb"
                         title="Prozess 1-1" usemap="#map1-1">
         <map name="map1-1">
            <area shape=rect alt="Prozess 1-1"       coords="0,30,119,100"   href="./html/seite_m_1-1.html" title="Prozess 1-1"      >
            <area shape=rect alt="Profile"           coords="7,0,50,32"      href="./html/seite_p_1-1.html" title="Profile"          >
            <area shape=rect alt="Informationen"     coords="49,0,96,30"     href="./html/seite_i_1-1.html" title="Informationen"    >
            <area shape=rect alt="Nützliches"        coords="94,0,138,31"    href="./html/seite_n_1-1.html" title="Nützliches"       >
            <area shape=rect alt="Schnittstellen"    coords="117,19,145,55"  href="./html/seite_s_1-1.html" title="Schnittstellen"   >
            <area shape=rect alt="Funktionsbereiche" coords="119,55,145,100" href="./html/seite_f_1-1.html" title="Funktionsbereiche">
         </map>
<!--     die Textzeilen sollen im Rechteckbereich des JPG's stehen -->
         <x1>Zeile 1</x1><br>
         <x2>Zeile 2</x2><br>
         <x3><a href="./html/seite_m_1-1.html">Zeile 3</a></x3><br>
      </td>

Mein Versuch: relative Verschiebung des Textes durch StyleSheet. x1, x2 und x3 sind im css-File definiert:

x1 {
   position:relative;
   top:-63px;
   left:8px;
   color:black;
   font-family:Helvetica,sans-serif,bold;
   font-size:12px;
   font-weight:bold;
}

x2 {
   position:relative;
   top:-60px;
   left:8px;
   color:black;
   font-family:Helvetica,sans-serif;
   font-size:12px;
}

x3 {
   position:relative;
   top:-58px;
   left:8px;
   color:black;
   font-family:Helvetica,sans-serif;
   font-size:12px;
}

Siehe auch auf obiger Web-Page.

Wie man sieht, funktionert das auch soweit, aber die nächste Tabellenzeile wird dadurch drei Textzeilen weit nach unten verschoben, und der Abstand für eine angenehme Optik zu groß.

Der ganze Code (bzw die Lösung) muss möglichst simpel bleiben; er soll später per Servlet aus Datrenbankdaten generiert werden.

Irgentwelche Ideen / Tips?

Joachim

********************************************************************
Die qualifizierteste, aber leider lösungsfreie Antwort stammt von MudGuard:

Hi,

<x1>Zeile 1</x1><br>

Was bitte soll x1 sein?
Du hast als Themenbereich HTML gewählt. HTML kennt kein Element namens x1. (Genausowenig wie x2 oder x3)

Wie man sieht, funktionert das auch soweit, aber die nächste Tabellenzeile wird dadurch drei Textzeilen weit nach unten verschoben,

So ist relative Positionierung definiert. Der Platz wird dort reserviert, wo das Element ohne die relative Positionierung erscheinen würde.

cu,
Andreas

Hallo Andreas,

mir persönlcih ist es völlig gleichgültig, ob X1 ein HTML Tag ist oder nicht; der FireFox frisst es, und das reicht für meine Zwecke.
Leider kann ich trotz deiner Analyse die Spaltenhöhe nicht beeinflussen; hast du da vielleicht einen - auch pragmatischen - Tip?

Viele Grüße,

Joachim

[wahsaga]

hi,

Wie man sieht, funktionert das auch soweit, aber die nächste Tabellenzeile wird dadurch drei Textzeilen weit nach unten verschoben, und der Abstand für eine angenehme Optik zu groß.

Ja - dass relative Positionierung _exakt so_ definiert ist - nämlich das der ursprüngliche Platz des Elementes reserviert bleibt - hatte dir Andreas, den du ja weiter unten damit noch mal ausdrücklich zitierst, doch bereits gesagt.
Es gibt ja aber auch noch andere Arten der Positionierung, die diesen Effekt nicht haben - hast du dich mit denen schon beschäftigt, um zu sehen, ob diese für dein Problem eine Lösung bieten könnten?

mir persönlcih ist es völlig gleichgültig, ob X1 ein HTML Tag ist oder nicht; der FireFox frisst es, und das reicht für meine Zwecke.

Wenn du nicht mal ansatzweise bemüht bist, korrektes HTML zu erstellen, darfst du hier bei der Fehlersuche aber nicht auf besonders viel Unterstützung hoffen. Ursachen von "Problemen" zu suchen, die du vielleicht durch Einsatz solcher Pseudo-Tags selbst erst verursacht hast, damit dürften die meisten hier ihre Zeit vermutlich nicht verschwenden wollen.

Leider kann ich trotz deiner Analyse die Spaltenhöhe nicht beeinflussen; hast du da vielleicht einen - auch pragmatischen - Tip?

Ich kann an hand deiner Problembeschreibung leider nicht erkennen, an welcher Stelle du ein Problem mit einer "Spaltenhöhe" haben könntest (nein, obiges mit der relativen Positionierung ist kein solches, du hältst es nur offenbar dafür).

gruß,
wahsaga

[shatter]

Hallo wahsaga,

vielen Dank für deine Antwort. Du schreibst:
"Es gibt ja aber auch noch andere Arten der Positionierung, die diesen Effekt nicht haben - hast du dich mit denen schon beschäftigt, um zu sehen, ob diese für dein Problem eine Lösung bieten könnten?"
Nein, da ich - noch - nicht weiss, welche das sind. Ein Hinweis wäre nett.

Freundliche Grüße,

Joachim

[wahsaga]

hi,

vielen Dank für deine Antwort. Du schreibst:

Ich weiß, was ich schrieb. Und wenn du die normale Zitatmöglichkeit hier nutzen würdest (wie sie im Antwortfeld schon vorgegeben ist), würde es sich sogar optisch abheben.

"Es gibt ja aber auch noch andere Arten der Positionierung, die diesen Effekt nicht haben - hast du dich mit denen schon beschäftigt, um zu sehen, ob diese für dein Problem eine Lösung bieten könnten?"
Nein, da ich - noch - nicht weiss, welche das sind.

Aber du weißt, wo du hier bist - im Forum zu xyz. Also solltest du auch wissen, dass du sowas in xyz nachschlagen kannst.

Ein Hinweis wäre nett.

Na gut: xyz im vorherigen Satz steht für selfhtml.

gruß,
wahsaga

[shatter]

Eine weitere ausführliche und informative Antwort.

Herzlichen Dank,

Joachim