Layer Fenster zentriert darstellen


Hier noch zwei weitere Beispiele für das 2. Layer-Beispiel, jedoch zentriert auf der Seite.

Layer erneut laden

Den Einbau nehmt Ihr ebenso vor, wie bei diesem Beispiel hier. Ihr könnt diese Codes natürlich ebenso in die HTML eine Textfeldes einfügen, damit Ihr z.B. mehrere Layer (wie ich hier) auf einer Seite haben könnt.

> Textfeld doppelklicken > Fenster “Text-Eigenschaften” 2. Button “Textfeld” > Button “HTML”

Den leicht veränderten Code (hier als Beispiel meines “Wetter-Layers”) findet Ihr unten. Ich habe hier persönlich, anstelle des Textes “Fenster schließen”, eine kleines Symbol eingesetzt.

Damit der Layer dann auch zentriert auf Eurer Seite erscheint, müsst Ihr genau die Breite Eures Layouts bei width eintragen (hier 890px) und für den Abstand von oben top (hier 220px) die Pixel angeben.

Ebenso gebt Ihr die von Euch gewünschte Größe des iframe-Fensters in Pixeln an sowie die Text-Größe und Farbe (hier schwarz). Der Befehl “margin-top” bewirkt hier einen Abstand von 2px zum Layer-Fenster.

<div id="Wetter" style="position: absolute; top:220px; width:890px; text-align: center;">
<iframe src="../html/layer-wetter.html" frameborder="1" scrolling="no" width="250" height="220"></iframe>
<a href="javascript:;" style="cursor:pointer;" onclick="document.getElementById('Wetter').style.display='none';"><p style="text-align: center; margin-top: 2px;">
<span style="font-size: 10px; color: rgb(0,0,0);">Fenster schließen</span></p></a>
</div>

... hier noch mein “Original-Code” mit dem kleinen Symbol, anstelle des Textes “Fenster schließen”.

<div id="Wetter" style="position: absolute; top:220px; width:890px; text-align: center;">
<iframe src="../html/layer-wetter.html" frameborder="1" scrolling="no" width="250" height="220"></iframe>
<a href="javascript:;" style="cursor:pointer;" onclick="document.getElementById('Wetter').style.display='none';"><p style="text-align: center; margin-top: 2px;">
<img src="../assets/images/Close-Layer.gif" border="0" title="Fenster schließen"></p></a>
</div>

Viel Erfolg!

zurück