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