AllesMeins: Grafik großflächig über Inhalt legen

SELF-Forum

Grafik großflächig über Inhalt legen

AllesMeins
– Informationen zu den Bewertungsregeln

Hi,

folgendes Problem. Ich bastele gerade an einem kleinen Projekt, dessen Layout eine (ziemlich kindisch-bunt dargestellte) Unterwasserwelt ist. Nun kam mir eine schöne Idee, deren Umsetzung sich allerdings nicht ganz einfach gestaltet.
Und zwar gibt es in eben dieser Unterwasserwelt im Hintergrund kleine Luftbläßchen. Nun würde es natürlich einen schönen Effekt ergeben, wenn ich einige dieser Blasen (als halb transüparente PNGs) auch vor den Inhalt packen könnte. Für den IE würde ich, mangels Transparenzunterstützung, selbige natürlich ausblenden. Die Blasen sollten nach Möglichkeit mit der Seite mitscrollen und nicht "fixed" sein.

Mein naiver Ansatz war: Ich nehme einen Layer über die ganze breite und Höhe der Seite und gebe diesem einen Recht hohen z-index. Dieser Layer enthält als Hintergrund die "Blasengrafik". Dann setze ich per CSS den z-index von Schriften und Links noch höher, damit diese trotzdem markier- bzw. anklickbar sind.
Andere Elemente der Seite bekommen keinen hohen z-index, so dass die transparenten Blasen vor diesen Elementen sind und so einen ganz hübschen effekt ergeben.

Soweit die Theorie. In der Praxis stellt mich dies aber vor einige Probleme:
0.) Ist dieser naive Ansatz überhaupt sinnvoll? Wenn nein, gibt es einen sinnvolleren Ansatz oder kann ich die Idee gleich vergessen.

1.) Wie bekomme ich einen Layer auf die volle Seiten höhe ohne die Layer zu schachteln? Wenn ich einfach den Inhaltslayer in den Blasenlayer packe, damit dieser den Blasenlayer auf die volle Höhe zieht, so erhält der Inhaltslayer auch automatisch einen höheren z-index.

2.) Wie bekomme ich für alle Schriften und Links einen hohen z-index ohne sie aus dem restlichen Inhaltselementfluß rauslösen zu müssen?

Viele Grüße

Marc

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Grafik großflächig über Inhalt legen

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Marc,

    1.) Wie bekomme ich einen Layer auf die volle Seiten höhe ohne die Layer zu schachteln? Wenn ich einfach den Inhaltslayer in den Blasenlayer packe, damit dieser den Blasenlayer auf die volle Höhe zieht, so erhält der Inhaltslayer auch automatisch einen höheren z-index.

    Dein DIV-Layer hätte dann also 100% der Weite und Breite des BODY-Elements, ohne dass dieser selbst etwas anderes zu enthält als meinetwegen ein  , damit der Validator nicht über leere "Trimming-Elemente" meckert.

    Dem BODY-Element verpasst du seinerseits 100% Weite und Breite des HTML-Elements, das seinersits 100% Weite und Breite des Viewports hat, jeweils mit Margin und Padding auf "0" gestzt.

    2.) Wie bekomme ich für alle Schriften und Links einen hohen z-index ohne sie aus dem restlichen Inhaltselementfluß rauslösen zu müssen?

    Eigentlich müssen ja nur die Links diesen höheren Z-Index haben. Also gib den A-Elementen position:relative und einen höheren Z-Index als dem Layer mit den gekachelten Wasserblasen.

    Ganz sicher bin ich mir allerdings nicht, ob das funktioniert. Möglicherweise orientieren sich relativ-positionierte Elemente mit ihrem Z-Index nur an ihren Eltern und haben deshalb nur einen höheren Z-Index als ihre Geschwister, nicht aber einen höheren als diejenigen, die sich als Nicht-Geschister auf andere Eltern-Elemente mit höherem Z-Index als das eigene Elternelement beziehen.

    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Grafik großflächig über Inhalt legen

      AllesMeins
      – Informationen zu den Bewertungsregeln

      Hi,

      Dein DIV-Layer hätte dann also 100% der Weite und Breite des BODY-Elements, ohne dass dieser selbst etwas anderes zu enthält als meinetwegen ein  , damit der Validator nicht über leere "Trimming-Elemente" meckert.

      Dem BODY-Element verpasst du seinerseits 100% Weite und Breite des HTML-Elements, das seinersits 100% Weite und Breite des Viewports hat, jeweils mit Margin und Padding auf "0" gestzt.

      Hmm, das gestaltet sich leider nicht ganz so einfach... Ich hab mir mal eine Test-Seite gebaut in der ich versucht habe das umzusetzen. Das ganze sieht folgendermaßen aus:

        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
<link rel="stylesheet" type="text/css" href="css/page.css" />  
 <title></title>  
</head>  
<body style="width:100%;height:100%;margin:0; padding:0">  
  
<div style="width:100%;height:100%;background-color:#ff0;">&nbsp;</div>  
a<br />  
a<br />  
a<br />  
a<br />  
a<br />  
</body></html>

      Eigentlich müsste doch jetzt der Layer mit der gelben Hintergrundfarbe über die ganze Höhe gehen. Tut er aber leider nicht sondern er wird nur eine Zeile hoch. habe ich dich falsch verstanden?

      Eigentlich müssen ja nur die Links diesen höheren Z-Index haben. Also gib den A-Elementen position:relative und einen höheren Z-Index als dem Layer mit den gekachelten Wasserblasen.

      Naja, aber es kann ja auch mal nötig sein das jemand zum beispiel Text markieren und kopieren will. Und das dürfte ja nicht klappen, wenn da noch ein Grafiklayer drüber liegt...

      Marc

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Grafik großflächig über Inhalt legen

        Gernot Back Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo AllesMeins,

        Dem BODY-Element verpasst du seinerseits 100% Weite und Breite des HTML-Elements, das seinersits 100% Weite und Breite des Viewports hat, jeweils mit Margin und Padding auf "0" gestzt.

        Eigentlich müsste doch jetzt der Layer mit der gelben Hintergrundfarbe über die ganze Höhe gehen. Tut er aber leider nicht sondern er wird nur eine Zeile hoch. habe ich dich falsch verstanden?

        Du hast vergessen, auch dem HTML-Element eine Höhe von 100% zu spendieren.

        Probier es auch mal im Quirksmode, wenn es im Standards-Mode nicht geht!

        Gruß Gernot

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Grafik großflächig über Inhalt legen

          AllesMeins
          – Informationen zu den Bewertungsregeln

          Hi,

          hmm... Damit erreiche ich jetzt 100% des Fensters (also sprich bei mir etwa 1000px) aber nicht die komplette Seitenhöhe. Also sprich sobald mein Inhalt länger als die Bildschirmhöhe ist enden die elemente mit height:100%...

          Grüße

          Marc

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Grafik großflächig über Inhalt legen

            Frank
            – Informationen zu den Bewertungsregeln

            Hi,

            Also sprich sobald mein Inhalt länger als die Bildschirmhöhe ist enden die elemente mit height:100%...

            Ja stimmt,
            aber Du könntest den ganzen Layer per Javascript mitscrollen lassen.

            if (document.all)
            window.onscroll = laufmit;
            else
            setInterval ('laufmit()', 50);

            function laufmit () {
            if (document.all) {
            document.all.layer.style.pixelTop = document.body.scrollTop;
            }
            else if (document.layers) {
            window.document.layer.top = window.pageYOffset;
            }
            else if (document.getElementById) {
            document.getElementById('layer').style.top = window.pageYOffset + 'px';
            }
            }

            Ist schon ein wenig älter, aber so Pi mal Daumen müsste es gehen ...
            Gruss, Frank

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Grafik großflächig über Inhalt legen

              AllesMeins
              – Informationen zu den Bewertungsregeln

              Hi,

              da es sowieso nur in neueren Browsern Sinn macht transparente Grafiken drüber zu legen könnte ich es auch mit einem position:fixed lösen. Ich hätte es aber gerne nicht fix sondern einfach über die komplette Höhe der Seite. Das muss doch möglich sein...

              Marc

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Grafik großflächig über Inhalt legen

                Frank
                – Informationen zu den Bewertungsregeln

                Hi,

                Ich hätte es aber gerne nicht fix sondern einfach über die komplette Höhe der Seite. Das muss doch möglich sein...

                Vielleicht hilft Dir ja:
                http://forum.de.selfhtml.org/archiv/2006/5/t130077/

                Gruss, Frank

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Grafik großflächig über Inhalt legen

                  AllesMeins
                  – Informationen zu den Bewertungsregeln

                  Hi,

                  JS ist doof ;)
                  Danke für den Link, aber ich würde es schon gerne mit CSS+HTML lösen. javaScript für die Seitengestaltung einzusetzen ist nicht so mein Ding...

                  Grüße

                  Marc

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

  2. Grafik großflächig über Inhalt legen

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    2.) Wie bekomme ich für alle Schriften und Links einen hohen z-index ohne sie aus dem restlichen Inhaltselementfluß rauslösen zu müssen?

    Eben.

    Mein Ansatz wäre, nicht die eigentlich wichtigen Elemente später wieder per z-index bedienbar zu machen zu versuchen, sondern lieber _einzelne_ Luftblasenbilder per position:absolute; top:[y]; left:[x] im Vordergrund der Seite zu plazieren. Das könnte man so geschickt machen, dass sie keine Bedienelemente überdecken. Wenn die Bilder ganz am Ende des Quelltextes stehen, musst Du noch nicht mal mit dem z-index herummachen.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Grafik großflächig über Inhalt legen

      AllesMeins
      – Informationen zu den Bewertungsregeln

      Hi,

      Das könnte man so geschickt machen, dass sie keine Bedienelemente überdecken. Wenn die Bilder ganz am Ende des Quelltextes stehen, musst Du noch nicht mal mit dem z-index herummachen.

      Keine Chance, wenn man - wie ich es plane - mit dynamischen Inhalten arbeiten will, da hier weder beim Layoutentwurf bekannt ist wo genau die "wichtigen" Elmente liegen werden noch wie lange die seite ist (wieviele Blasen also gebraucht werden).

      Im übrigen wäre dein Ansatz auch bei Standard-Seiten problematisch, da ich als Designer keinen Einfluß darauf habe wie die Seite im Endeffekt beim Benutzer angezeigt wird (hat er irgend eine Schriftart nicht, nutzt er Optionen um den Text zu vergößern, nutzt er Plugins die vielleicht Grafiken entfernen oder sonst den Inhalt manipulieren usw...)

      Grüße

      Marc

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln