Hintergrund scrollbares Textfeld

corinaba schrieb am 29.08.2016 um 10:34 Uhr
Hallo zusammen Vor längerem habe ich auf meine Webseite mit dem Web Designer erstellt. Dabei habe ich auch einige scrollbare Textfelder (iframe) eingefügt. Bisher war meine Webseite mit einem weissen Hintergrund versehen. Daher war das auch kein Problem. Nun möchte ich aber meine Seite etwas aufpeppe und habe ein Foto als Hintergrund. Dies sieht überall klasse aus, ausser bei den Textfelder, da diese eine Hintergrundfarbe haben. Ist es irgendwie mögliche, diese Transparent zu machen? Dass Schlussentlich sichtbar nur noch der Text gescrollt wird über dem Hintergrundbild. Liebe Grüsse und vielen Dank im.Voraus für eure Hilfe! :-)

Kommentare

BeRo schrieb am 29.08.2016 um 14:02 Uhr

Wenn Du in der schönen Schweiz wohnst, dann hast Du Dir ja heute Morgen schon diese Demo angesehen, in der ich eine Lösung für scrollbaren Text vorgestellt habe.
Da war der Hintergrund der (iframe) Textbox zwar nicht weiß, aber eben auch nicht transparent...

Die bessere Lösung findest Du hier.
In dem Kommentar habe ich eine Lösung vorgestellt, die scrollbare Texte auf einem tranparenten Hintergrund zeigt. Der Seitenhintergrund ist hier dunkelgrau, er könnte aber auch ein Bild oder eine beliebige Grafik zeigen.

Der transparente Hintergrund der Demo Textbox wird durch die u. gelb markierte Ergänzung im iframe Code erzeugt:

--------------------------------
<iframe src="bordinstrumente.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" allowtransparency="true" ><p>Your browser does not support iframes.</p></iframe>
--------------------------------

Damit auch ältere IE Browser damit klar kommen, kannst Du eine weitere Ergänzung im HTML Body des Platzhalters- oder der Seite unterbringen:

--------------------------------
<body style="background-color:transparent;">
--------------------------------

Wenn Du Textboxen als HTML Seiten per iframe einbindest, musst Du natürlich dafür sorgen, dass der WD den Hintergrund dieser Seiten ausblendet (transparent), sonst klappt's nicht mit dem o. a. Tipp.

Lade Dir mal hier die zur Demo gehörende Projektdatei herunter. Damit kannst Du das Gesagte leicht nachstellen und in Dein Projekt übertragen.

Viel Erfolg

Zuletzt geändert von BeRo am 29.08.2016, 14:02, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

corinaba schrieb am 30.08.2016 um 18:53 Uhr

Hallo BeRo
Vielen Dank für deine Hilfe. Habe dies gestern bereits ausprobiert und bin jetzt nochmals ein paar stunden dran gesessen und es funktioniert nicht. Das Textfeld ist immer weiss.
Hab jetzt gerade festgestellt, dass ich beim WD den Hintergrund nicht ausblenden kann. Wenn ich im Farbeditor das weiss Kästchen mit der schwarzen Schaffierung anwähle, erscheint oben bei der "lokalen Füllfarbe" in weisses Kästchen ohne die schwarze Schaffierung. Es ist als würde der WD die Funktion "keine Farbe" statt Transparent in weiss darstellen würde.
Kann man das irgendwie umstellen?
Nochmals vielen Dank für die Hilfe.
Gruss
 

BeRo schrieb am 30.08.2016 um 21:18 Uhr

[...] es funktioniert nicht. Das Textfeld ist immer weiss. [...]

Bist Du sicher?

[...] Hab jetzt gerade festgestellt, dass ich beim WD den Hintergrund nicht ausblenden kann [...]

Das, was Du als Textfeld bezeichnest, ist in der WD Terminologie vermutlich ein Textbereich, der entsteht wenn Du mit dem Textwerkzeug (T) ein Rechteck aufziehst, in das Du danach den gewünschten Text eintippst.
So ein Textbereich ist schon von Haus aus transparent. Das ist der Grund, warum Du ihn nicht noch einmal transparent machen kannst.

Dass Du den Text trotzdem auf einem weißen Hintergrund siehst, liegt wohl daran, dass Du den Seitenhintergrund (Page background Ebene) der Seite auf der der Text liegt nicht transparent gestellt hast.

Wenn Du nochmal einen Blick auf den Screenshot wirfst, den ich meiner ersten Antwort beigelegt habe, siehst Du, dass ich dort genau das gezeigt habe, also die Transparenz Einstellung für den Page background...

Du hast Dir ja gestern Morgen die Projektdatei meiner Demo heruntergeladen. Schau Dir doch mal auf den Textseiten die Einstellungen der Rechtecke in den Page background Ebenen mit dem Farbeditor an. Da siehst Du, dass sie alle die Eigenschaft "transparent" bekommen haben...

Nächster Versuch?

Viel Erfolg

Zuletzt geändert von BeRo am 30.08.2016, 21:18, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

corinaba schrieb am 30.08.2016 um 22:56 Uhr

Hallo Bero

Hab es genau so gemacht wie von dir beschrieben und auch mit deiner Demo verglichen.

Kein Erfolg... Wie bereits beschrieben, kann ich keine "Transparente Farbe" auswählen.
Bei deinem Screenshot ist das kleine Viereckt oben bei "lokale Füllfarbe" weiss mit einer schwarzen Schraffierung.
Wenn ich bei mir die Schaltflächt unten im Farbeditor anwähle, ist das Viereck oben komplett weiss...
Was ich auch noch gesehen hab, bei dir ist der Platzhalter schwarz, bei mir ist dieser weiss dargestellt. Aber egal in welcher Farbe ich diesen anwähle, wenn ich auf die Seitenvorschau gehe, ist der Hintergrund des scrollbaren Textfeldes weiss...

Ich glaube langsam sehe ich den Wald vor lauter Bäumen nicht mehr...
 

 

BeRo schrieb am 30.08.2016 um 23:07 Uhr

[...] Hab es genau so gemacht wie von dir beschrieben [...] Kein Erfolg [...]

Dann spendier' uns doch mal ein paar Screenshots Deiner Arbeit auf denen in der aufgeklappten Seiten- & Ebenen-Galerie erkennbar ist, wo das Objekt liegt, das Du transparent machen möchtest...

Besser noch, Du verpackst die relevante Seite Deines Projekts in eine ZIP Datei, die Du zum Download auf Deinen Webserver legst. Dann können wir sicher schnell feststellen, "wo der Hase im Pfeffer liegt" .

Probier's mal

Zuletzt geändert von BeRo am 30.08.2016, 23:07, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

corinaba schrieb am 31.08.2016 um 10:34 Uhr

Äm…. Ja, jetzt hast du mich erwischt…   bin PC-technisch eine absolute Niete… Man kann von den relevanten Seiten eine ZIP-Datei erstellen und auf den Webserver laden? Habe weder jemals ein ZIP erstellt noch gewusst, was ich da wo aufladen kann….
Kam gestern nicht mehr dazu Screenshots zu machen. Werde dies gerne heute Abend mal probieren….

BeRo schrieb am 31.08.2016 um 17:09 Uhr

[...] Man kann von den relevanten Seiten eine ZIP-Datei erstellen [...]

Man kann.

  • Dazu speicherst Du zunächst das Projekt unter einem neuen Namen, sagen wir "test".
  • Dann löschst Du alle Seiten, mit Ausnahme der Seite(n), die das Transparenzproblem hat.
  • Jetzt kannst Du das Projekt noch einmal speichern und hast ein Projekt "test.web" erzeugt, das die relevante(n) Seite(n) enthält...
  • Um daraus eine ZIP Datei zu erzeugen, benötigst Du ein Tool, einen sogenannten "Packer", der das für Dich erledigt.
    Bewährt hat sich der kostenfreie Packer 7-Zip, den Du hier herunterladen kannst.

[...] und auf den Webserver laden? [...]

Ja, das geht so einfach wie das Verschieben von Dateien mit dem Windows Explorer.

Dazu benutzt Du ein spezielles Programm, einen sogenannten FTP Client. Ein sehr gutes- und obendrein kostenfreies Programm ist FileZilla, das Du u.a. hier herunterladen kannst. Auf der Seite findest Du auch eine bebilderte Anleitung.

Noch mehr Anleitungen gibt es hier im WWW.

Für den Upload wird allerdings nicht zwingend eine ZIP Datei benötigt. Für die Fehleranalyse genügt es völlig, wenn Du die Projektdatei "test.web" auf Deinem Webspace ablegst.

Wenn alles fertig ist, nennst Du uns den Link zur Projektdatei, der z. B. so aussieht: "www.meinesite.de/test.web" und die Lösung Deines Problems wird nicht lange auf sich warten lassen.


Also, an die Arbeit...

Zuletzt geändert von BeRo am 31.08.2016, 17:09, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

corinaba schrieb am 01.09.2016 um 17:36 Uhr

Hallo BeRo

Ich glaube ich gebs jetzt dann auf... Habe nun bestimmt 3h lang probiert eine Verbindung beim FileZilla herzustellen.
Da geht einfach nichts... Nicht mal das krieg ich hin...

Meinen schönen Hintergrund kann ich mir glaube ich echt langsam abschminken...

 

BeRo schrieb am 01.09.2016 um 20:31 Uhr

[...] Ich glaube ich gebs jetzt dann auf. [...]

Warum? Es gibt noch mehr- und vor allen Dingen wirklich einfache Möglichkeiten, eine Datei ins WWW zu bringen

Lade doch die Projektdatei einfach bei einem der File Hoster hoch. Der FileHorst ist einfach zu bedienen und kostenfrei.

Also:

  1. Link zu den Dateien auf der Festplatte klicken und die Projektdatei (xxxx.web) suchen und auswählen
  2. Checkboxes der Bedingungen aktivieren
  3. "Hochladen" klicken
  4. Wenn die Datei hochgeladen wurde siehst Du mehrere Link Optionen, die Du an uns weitergeben kannst. Am besten wählst Du dazu den "Direktlink"

Probier's nochmal.

Viel Erfolg

Zuletzt geändert von BeRo am 01.09.2016, 20:31, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

corinaba schrieb am 01.09.2016 um 20:44 Uhr

Habs versucht und es hat jetzt hoffentlich geklappt!

Hier der Link:
http://filehorst.de/d/bgJtGcJt

BeRo schrieb am 01.09.2016 um 20:53 Uhr

[...]es hat jetzt hoffentlich geklappt! [...]

Aber ja, warum nicht gleich so...

Ich schau's mir an und melde mich wieder.

Zuletzt geändert von BeRo am 01.09.2016, 20:53, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

corinaba schrieb am 01.09.2016 um 21:09 Uhr

Super, vielen tausend Dank!!!

BeRo schrieb am 01.09.2016 um 21:23 Uhr

Feedback

Die gute Nachricht vorab. Du hast (fast) alles richtig gemacht und die Seite wird, ohne Veränderung an der Projektdatei, korrekt, mit transparentem Text Hintergrund dargestellt, auch wenn der Platzhalter ein wenig zu schmal geraten ist (Text wird links abgeschnitten).

Die schlechte Nachricht ist vermutlich der bei Dir immer noch vorhandene Fehler, der jetzt erst recht nicht zu erklären ist.

Mal abgesehen davon, dass Du bei der Übernahme des Codes aus meiner Demo auch einen Funktionsaufruf ("onload="xr_cpu(6)") übernommen hast, der auf Deiner Site nicht nötig ist, sieht alles andere völlig "normal" aus.

Bei der ersten, flüchtigen Analyse der Projektdatei habe ich gesehen, dass sie scheinbar mit dem WD MX (Ver. 8)  gemacht wurde, obwohl die gemeldete Versionsnr. "8.1.5.31094" auf den WD 11 hindeutet.

Aber die Transparenz Anweisung sollte unabhängig von der Version funktionieren. Entferne trotzdem, sicherheitshalber den o.a. Funktionsaufruf aus dem Code, er liegt im HTML Body der Seite.

Frage: Hast Du den Transparenztest tatsächlich in der Vorschau- und nach dem Export gemacht oder hast Du gehofft, dass die Transparenz schon im Editor sichtbar wird?

Zuletzt geändert von BeRo am 01.09.2016, 21:23, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

corinaba schrieb am 01.09.2016 um 22:02 Uhr

Jetzt bin ich aber baff!!! Es ist transparent bei dir!!!

Einerseits bin ich ja jetzt schon etwas beruhigt, dass ich nicht ganz so doof bin, wie ich mir jetzt vorkam.
Aber andererseits ist das Fragezeichen nun noch grösser! Wieso geht das bei dir und bei mir nicht?

Habe den Code raus genommen, macht aber keinen Unterschied. Der Hindergrund von Textfeld bleibt weiss...
Und ja, auch in der Vorschau nach dem Export ist es weiss....

BeRo schrieb am 01.09.2016 um 22:43 Uhr

[...] Jetzt bin ich aber baff!!! Es ist transparent [...]

Na ja, bei genauerem Hinsehen, habe ich Deiner Projektdatei doch noch ein paar "Leichenteile" gefunden und ein Duplikat der Anweisung <body style="background-color:transparent;">. Die sollte sinnvollerweise nur im HTML Head der Seite stehen, die den transparenten Text enthält.

Außerdem gab es, verschachtelt angelegte Objekte-, darunter verdeckte Bilder, die teilweise im Page background- oder doppelt im pasteboard background lagen.
Der Seiteninhalt ragt (rechts) weit über die eingestellte Seitenbreite (1100px) hinaus, was im Browser zu unschönen Effekten führt, weil die Seite nicht zu zentrieren ist. Usw.

BTW
Die Seite ist für den "normalen" Surfer deutlich zu breit. Hier ist IMHO weniger mehr. Die vom WD als max. Breite vorgegebene Breite von 955px sollte völlig ausreichen. Für größere Bildschirme hast Du ja einen entsprechend eingefärbten Hintergrund eingebaut.

Lade Dir mal hier die "reparierte" Projektdatei herunter. Vielleicht ist Dein Problem dann auch auf Deinem PC gelöst.

Viel Erfolg

Zuletzt geändert von BeRo am 02.09.2016, 00:36, insgesamt 3-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

corinaba schrieb am 02.09.2016 um 22:46 Uhr

Wohooo!!! Es funktioniert! Bei der reparierten Projektdatei ist es nun auch bei mir transparent!
Hoffe ich kann das nun irgendwie in mein bestehendes Projekt übertragen und das es dann endlich alles so anzeigt, wie es sein sollte.

Viel vielen tausend Dank für deine Hilfe und deine Geduld mit mir! :-)