✔ Textbereich Pixelgenau festlegen und externe Datei einlesen

[Joerg66]

Hallo,

ich habe auf meiner Page u.a. eine Grosse Grafik, die eine Tafel zeigt. Jetzt moechte ich Pixelgenau auf dieser Tafel ein Textfeld legen, in das ich dann eine externe .txt Datei einlese und darstelle. Der Zeilenumbruch soll automatisch erfolgen, wenn der Platz nicht reicht oder eben wenn in der Datei einer steht. Es soll bei Bedarf automatisch ein vertikaler Scrollbalken erzeugt werden. Mir steht dazu PHP und css zur Verfuegung, leider habe ich aber keine Idee, wie ich das anstelle. Frames und iFrames kommen bisher auf der Site nicht vor.

Kann mir jemand einen Tip geben?
Gruss Joerg

 

[MonGol1992]

Einfach verschachteln:

<div id="tafel">
<div id="textfeld">
Der ausgelesene Text kommt hier rein....
</div>
</div>

#tafel {
	background:...; /* bitte dementspr. ändern */
	width:...; /* bitte dementspr. ändern */
	height...; /* bitte dementspr. ändern */
}
#textfeld {
	position:relative;
	top:...;  /* bitte dementspr. ändern */
	left:...;/* bitte dementspr. ändern */
	width:...;/* bitte dementspr. ändern */
	height:...;/* bitte dementspr. ändern */
	overflow:scroll;
}

=> http://www.css4you.de/overflow.html

MfG,
Marcel

 

[Joerg66]

So einfach ist das . . . .
hatte einfach nicht das richtige Schlagwort fuer meine Suche.
Vielen Dank!

 

[Joerg66]

Hi,
habs probiert, der Aufbau ist folgender:

<div id="tafel">
      Lade tafel.jpg
      <div id="textfeld">
            Der ausgelesene Text kommt hier rein....
      </div>
</div>

Mit der Textposition "relative" im css klappts allerdings so nicht :-(
Der Text steht dann unter der Grafik, mit "absolute" haut alles hin. Wiso das ? "relative" ist doch logisch und vorallem besser bei AEnderungen.

 

[Maik]

Hi,

hast du die Grafik nicht als Hintergrundbild im DIV #tafel eingebunden?

Ansonsten müsste bei einer relativen Positionierung der Text mit einem negativen top-Wert über das Grafikelement gelegt werden.

 

[Joerg66]

Noe, ich dachte deshalb habe ich die Verschachtelung, gruebel . . . .
Ist das dann nicht doppelt gemoppelt? Positioniere eine Grafik top:100; left:100 und relativ dazu den Text (top:15; left:15) also den Text 15px versetzt. Warum muss ich verschachteln, wenn ich die Grafik als Hintergrund des Textes einbinde (wiso schreibst Du die Tafel muss als Hintergrund der #Tafel eingebunden werden Irgendwie mangelts mir gerade an logischem Durchblick, Sorry
Kannst mir das mal auseinanderklamuesern

 

[Maik]

Ich habe nie behauptet, dass die Grafik als Hintergrundbild eingebunden werden muss.

Wenn sie aber als img-Element eingesetzt und der nachfolgende Text relativ positioniert wird, muss der top-Wert negativ sein, damit der Text nach oben verschoben wird.

 

[Joerg66]

hm, dann war ich mit meiner Denke auf der Falschen Spur. Bei uns im Maschinenbau heisst relativ immer -vom letzten angegebenen Mass. Sprich das Bild steht bei x=100, Y=100. Der Text relativ x=15, y=15, also letztlich absolut bei x=115, Y=115. Deshalb kam ich mit der Positionierung nicht klar. Das mit der img-Einbindung hab ich jetzt auch geblickt.
Thanks

 

[Maik]

Diese Methode funktioniert in CSS nur mit verschachtelten Elementen.

Da im img-Element aber kein weiteres HTML-Element eingebunden werden kann, haut das so, wie du es vom Maschinenbau her kennst, auch nicht hin.