Platzhalter für eine Div-Box

ba-zi schrieb am 31.03.2012 um 18:19 Uhr

Ich möchte gerne über ein Foto Text platzieren und dazu eine Div-Box nutzen. Eine Div-Box soll genutzt werden, weil ich aufgrund der Textmenge einen Scrollbalken benötige.

Der WD akzeptiert das Bild einfach nicht und nutzt die Farbe hinter dem Bild.

Hat Jemand eine Idee?

 

Vielen Dank im Voraus.

 

 

Kommentare

BeRo schrieb am 31.03.2012 um 20:25 Uhr

[...] Ich möchte gerne über ein Foto Text platzieren [...]

So, wie Du es beschreibst, nehmen ich an, dass Du den Text auf dem Foto sehen möchtest und nicht weiter oben, also darüber.

Ist das richtig?

[...] Ich möchte [...]  dazu eine Div-Box nutzen [...]

Wenn der Text auf dem Foto zu sehen sein soll, geht das mit einer div-Box nur, wenn Du beide Objekte da hineinbringst.
Konkret heißt das, dass die div-Box nicht transparent sein kann, der Hintergrund, in Deinem Fall das Bild, also nicht durchscheinen kann.

Du könntest z. B., eine Webseite "bauen" die so angelegt wird, dass sie genau die Breite des Fotos hat, das Du überdecken möchtest.
Dann definierst Du das Foto als Hintergrund der Seite und legst den Text auf das Foto. Die Seite (also Foto mit darauf liegendem Text)  kann dann mit einer div-Box auf der Hauptseite dargestellt werden.

Wenn Du möchtest, kann in dem Fall der Hintergrund (das Foto) auch fixiert werden, so dass der Text dann auf dem Foto gescrollt werden kann.

Vielleicht löst das DeinProblem.

 

Zuletzt geändert von BeRo am 14.03.2013, 14:41, 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... 🤓

ba-zi schrieb am 31.03.2012 um 20:56 Uhr

Vielen Dank, das habe ich verstanden.

 

Ja, es ist richtig, daß sich die Schrift auf  dem Bild befinden soll. Ja, ein großes Foto / Bild und da drauf die Schrift.

In meinem Fall ist es nun so, daß sich auf dem blauen Hintergrund ein Rahmen befindet.

Dieser Rahmen wird komplett mit dem Foto ausgefüllt und drauf soll der Text zu sehen sein. Um den Text besser sehen zu können, wollte ich eine helle, durchsichtige Fläche ziehen, so daß das Bild etwas in den Hintergrund rutscht und die Schrift leichter zu lesen ist.

Wie kann ich den Hintergrund, d.h. Foto mit der hellen, milchigen Fläche darüber zu einem Hintergrund werden lassen?

Gibt es da eine Möglichkeit?

Vielen Dank für Deine Hilfe!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

 

 

 

BeRo schrieb am 01.04.2012 um 00:49 Uhr

[...] Dieser Rahmen wird komplett mit dem Foto ausgefüllt und drauf soll der Text zu sehen sein. [...] Gibt es da eine Möglichkeit? [...]

(Fast) nichts ist unmöglich...

Klick mal hier, da siehst Du die online Demo einer Lösung für Dein Problem.

Wenn das in etwa dem entspricht, was Du Dir vorgestellt hast, dann kannst Du Dir hier die kompletten Projektdateien- inkl. dem Hintergrundbild als ZIP Archiv herunterladen und eigene Experimente damit anstellen.

Wie Du die Datei herunterladen- und "auspacken" kannst, hatte ich Dir ja schon in einem anderen Thread erklärt.

Für die Realisierung der Lösung sind folgende Schritte nötig:

  • Auf der Seite, die das Foto als Hintergrund zeigen soll, einen Platzhalter (Rahmen) in der gewünschten Größe anlegen.
  • Dem Platzhalter einen iframe Code zuweisen (s. u.) der die Seite bestimmt, die im Rahmen angezeigt werden soll.



     
  • So sieht der iframe Code aus, wenn wir davon ausgehen, dass die anzuzeigende Seite "start.htm" heißt:

    ----------------------------------
    <iframe src="index_htm_files/start.htm" style="border:0px #FFFFFF none;" name="test" scrolling="auto" frameborder="0" align=aus marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe>
    ----------------------------------
     
  • Projekt speichern, z. B. unter dem Namen "siteinsite.web". Dieses Projekt generiert später die Hauptseite und gilt ab jetzt als Hauptprojekt.
  • Projekt exportieren, z. B. nach C:/Temp. Damit wird automatisch die Datei "index.htm" angelegt und das Verzeichnis "index_htm_files"
     
  • Neues Projekt im WD anlegen, mit dem die Unterseite definiert wird, die später auf der Hauptseite im Platzhalter angezeigt wird. Dieses Projekt gilt ab jetzt als Unterprojekt, es erzeugt die Unterseite
  • Im Projekt eine Seite in der Breite anlegen, die randlos in den Platzhalter Rahmen der Hauptseite passt. In unserem Beispiel hat die Seite eine Breite von 910 px. Die Höhe kann frei bestimmt werden, sie ist nur vom Inhalt abhängig und wird automatisch mit einem Scrollbalken versehen, wenn sie länger als der Platzhalter-Rahmen auf der Hauptseite ist.
  • Die Seite z. B. mit dem Namen "start" benennen
  • Die Seite mit dem gewünschten Inhalt füllen (Text-, Bilder-, Grafiken).
  • Wenn die Seite schon eine Ebene "Page background" hat, diese Ebene jetzt löschen.
  • Das Projekt exportieren, z. B. nach C:/Temp. Damit wird automatisch die Datei "start.htm" angelegt und das Verzeichnis "start_htm_files"
  • Das als Hintergrund gewünschte Bild mindestens so groß machen, dass es den Platzhalter Rahmen komplett ausfüllt. In unserem Beispiel ist der Rahmen 950 x 443 px groß.
  • Das Bild mit dem Namen "backgr.jpg" speichern, im vorhin exportierten Verzeichnis "start_htm_files"
  • Im WD Editor die Website Eigenschaften öffnen und im Kartenreiter "Website" das Dialogfenster "HTML Code (head)" öffnen.
  • Hier den folgenden Code eintragen, der dafür sorgt, dass das Hintergrund Bild fixiert wird, es also nicht gescrollt wird, wenn der darauf liegende Seiteninhalt gescrollt wird:
    -------------------------------
    <style type="text/css">
    html, body {
    background-color: #000000;
    padding: 0px;
    margin: 0px;
    background-attachment: fixed;
    background-image: url(start_htm_files/backgr.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }
    </style>

    ------------------------------
  • Das Projekt wieder exportieren und speichern. Als Name habe ich in der Demo "backgr.web" verwendet.
  • Nun im Verzeichnis C:/Temp die Datei "start.htm"- und das Verzeichnis "start_htm_files"  in das Verzeichnis "index_htm_files" kopieren.
  • Ergebnis mit einem Doppelklick auf die "index.htm" Datei testen.
  • Wenn alles in Ordnung ist, kann jetzt das Hauptprojekt veröffentlicht werden und alles sollte online funktionieren (s. Screenshot)

Viel Erfolg

 

Zuletzt geändert von BeRo am 01.04.2012, 01:04, insgesamt 4-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... 🤓

ba-zi schrieb am 02.04.2012 um 18:51 Uhr

Wahnsinn, vielen, vielen Dank für diese SEHR ausführliche Antwort, die mir sehr geholfen hat.

 

Jetzt habe ich nur noch ein Problem, denn im Internet Explorer erscheint beim Aufrufen meiner neuen Seite im Netz eine Sicherheitswarnung:

Das Zulassen aktiver Inhalte, wie z.B. ActiveX-Steuerelemente und Skripts, kann nützlich sein.

Aktive Inhalte können auf dem Computer jedoch auch Schäden anrichten.

Möchten Sie die Ausführung aktiver Inhalte für diese Datei wirklich zulassen? Ja / Nein

Kann man diesen Hinweis ausschalten, so daß er nicht angezeigt wird?

Die Frage habe ich getrennt eingestellt und es wäre wirklich super, wenn Du dazu auch eine Idee hättest.

 

Ganz vielen Dank im Voraus.

 

 

BeRo schrieb am 02.04.2012 um 19:21 Uhr

[...] im Internet Explorer erscheint beim Aufrufen meiner neuen Seite im Netz eine Sicherheitswarnung [...]

Du hattest ja dankenswerterweise zu dem Thema einen neuen Thread aufgemacht.

Die Antwort findest Du ebenfalls dort...

 

Zuletzt geändert von BeRo am 02.04.2012, 19:21, 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... 🤓