Gunther: Fluid-Layer mit festem Abstand zu allen Seiten

Hallo zusammen,

wahrscheinlich bin ich mittlerweile vor lauter Überlegen, Probierei, und Tüfftelei total 'mit Brettern vernagelt' ;-)

Mein Ziel:
Ich möchte einen größen-variablen Layer so platzieren, dass er zu allen Seiten jeweils einen festgelegten Abstand hat (sollte in allen neueren Browsern funktionieren).

Hat jemand eine Idee?

Vielen Dank im voraus -

Gruß Gunther

  1. Hi,

    wie wärs mit "margin" (=Aussenabstand)?

    schö stefan

    1. Hi stefan,

      wie wärs mit "margin" (=Aussenabstand)?

      grundsätzlich gut,_aber_du hast die Größen-Bedingung nicht beachtet. Der Layer soll sich ja der Fenstergröße anpassen und dabei bspw. nach oben 90px, nach rechts 30px, nach unten 60px, und nach links 180px Abstand haben. Übrigens auch unabhängig vom Inhalt (also für 'übergroßen' Inhalt overflow:auto).

      Gruß Gunther

      1. Moin!

        Man möge mich berichtigen, wenn ich Unsinn erzähle, aber ich glaube mich zu erinnern,
        dass eine in allen gängigen Browsern funktionierende LAYER-Lösung für dieses Problem
        nicht mit HTML und CSS allein zu verwirklichen ist.
        Also entweder back to table oder JavaScript. Frames lasse ich mal außen vor!

        Gruß

        Der Hans

        1. Moin Hans!

          dass eine in allen gängigen Browsern funktionierende LAYER-Lösung für dieses Problem
          nicht mit HTML und CSS allein zu verwirklichen ist.

          Ja, dank dem 'tollen' Modell des W3C scheint das tatsächlich nicht zu gehen. Ich habe gestern den ganzen Tag über im Netz alle möglichen CSS-Seiten durchforstet, und auch nichts passendes gefunden. Die Höhe ist immer das Problem.

          Also entweder back to table oder JavaScript. Frames lasse ich mal außen vor!

          Dann also doch mit Javascript - tschüss ihr User ohne Javascriptunterstützung!
          Jedenfalls vielen Dank Hans, für die Bestätigung meiner Befürchtung ;-)

          Gruß Gunther

          1. Hallo Gunther,

            Ja, dank dem 'tollen' Modell des W3C scheint das tatsächlich nicht zu gehen.

            Das muß ich hier in Schutz nehmen. Das Problem ist nicht das W3C, sondern
            die Browserimplementierung. Hier funktioniert es beispielsweise problemlos.

            http://www.fractatulum.de/fraccss/sample/layout9.htm

            Wie, das steht hier

            http://www.fractatulum.de/fraccss/sample/layout4format.htm

            Dummerweise beherrschen das nicht alle Browser.

            Eine Lösungsmöglichkeit, die ich mir noch vorstellen kann, ist die Nutzung
            von position:absolute mit expliziten Angaben für alle vier Seiten (top, right
            bottom, left); allerdings dürfte die noch problembehafteter sein.

            • Tim
            --
            Memes don't exist. Tell your friends.
            1. Hallo Tim,

              Ja, dank dem 'tollen' Modell des W3C scheint das tatsächlich nicht zu gehen.

              Das muß ich hier in Schutz nehmen. Das Problem ist nicht das W3C, sondern
              die Browserimplementierung.

              sorry, aber es liegt schon am Modell. Es ist mit dem derzeitigen Modell auch in einem Browser, der es 100% korrekt umsetzt, nicht möglich.

              Hier funktioniert es beispielsweise problemlos.

              http://www.fractatulum.de/fraccss/sample/layout9.htm

              Hab' ich mir angeguckt. Das liegt zwar schon nahe an dem, was ich gerne erreichen möchte,_aber_auch dort ist es nicht genau das, und zwar hat das DIV-Element eine Höhe von 95%. Somit also keine 'festen' Abstände nach oben und unten (denn ansonsten würde es eben nicht funktionieren). Außerdem 'umgeht' man das 'Problem' (welches aus dem Box Model herrührt) mit den seitlichen Abständen durch ein Padding des Body-Elementes (womit man ja noch leben könnte). Das ist aber IMHO auch nicht im eigentlichen Sinne des Erfinders, denn was macht man bspw. wenn man mehrere DIV's mit unterschiedlichen Abständen hat?

              Ich möchte auch kurz auf [pref:t=42450&m=232160] verweisen.

              Aber vielen Dank für den Tipp.

              Gruß Gunther

              1. Hallo Gunther,

                sorry, aber es liegt schon am Modell. Es ist mit dem derzeitigen Modell auch
                in einem Browser, der es 100% korrekt umsetzt, nicht möglich.

                Kannst Du vielleicht mal etwas genauer spezifiezieren, was Du genau meinst?
                Ich habe das Gefühl, wir reden aneinander vorbei.

                Das ist aber IMHO auch nicht im eigentlichen Sinne des Erfinders, denn was
                macht man bspw. wenn man mehrere DIV's mit unterschiedlichen Abständen hat?

                Fix und Fluide positionieren. Ich habe für Dich mal dieses hier aus der
                Mottenkiste herausgegraben. Funktioniert in Geckos und Safari.

                http://www.blackshirt.de/code/vierdivs.html

                Ich möchte auch kurz auf [pref:t=42450&m=232160] verweisen.

                Gelesen und ich kann mich Christian Seiler nur anschließen.

                • Tim
                --
                Memes don't exist. Tell your friends.
                1. Hallo Tim,

                  Kannst Du vielleicht mal etwas genauer spezifiezieren, was Du genau meinst?
                  Ich habe das Gefühl, wir reden aneinander vorbei.

                  ich versuch's... ;-)
                  [pref:t=42450&m=233938]

                  Fix und Fluide positionieren. Ich habe für Dich mal dieses hier aus der
                  Mottenkiste herausgegraben. Funktioniert in Geckos und Safari.

                  http://www.blackshirt.de/code/vierdivs.html

                  ja danke, dass ist in der Tat schon 'nah dran'...

                  Gelesen und ich kann mich Christian Seiler nur anschließen.

                  Die Überlegungen des W3C zu CSS3 und dem Box Model belegen doch, dass das jetzige Modell 'Macken' hat. Also wenn du dich Christian anschließst (und auch auf CSS3 wartest), räumst du doch damit auch ein, dass das Modell 'nicht ideal' ist - oder wie soll ich das verstehen? ;-)

                  Gruß Gunther

                  1. Hallo ,

                    Die Überlegungen des W3C zu CSS3 und dem Box Model belegen doch, dass das
                    jetzige Modell 'Macken' hat. Also wenn du dich Christian anschließst (und
                    auch auf CSS3 wartest), räumst du doch damit auch ein, dass das Modell
                    'nicht ideal' ist - oder wie soll ich das verstehen? ;-)

                    Ja, das stimmt. Daneben habe ich noch viele andere Gründe für CSS 3. :-)

                    Weswegen ich mich hier zu Wort gemeldet habe, ist, daß Du Deine Kritik
                    am CSS 2 Box Model auf das Zusammenspiel von 100% und margin-Angaben
                    stellst. Aber CSS 2 bietet mehrere Wege, um einen Effekt zu erreichen, wie
                    bespielsweise position:absolute. Daß Browser damit ihre Probleme haben,
                    ist unbestritten, diskreditiert aber nicht CSS 2, meine ich. Also eher
                    ein Widersprechen um der Theorie willen. ;-)

                    • Tim
                    --
                    Memes don't exist. Tell your friends.
                    1. Hallo Tim,

                      Weswegen ich mich hier zu Wort gemeldet habe, ist, daß Du Deine Kritik
                      am CSS 2 Box Model auf das Zusammenspiel von 100% und margin-Angaben
                      stellst.

                      nicht nur oder ausschließlich, sondern auf den ganzen Ansatz als solches. Das habe ich nur versucht anhand verschiedener Beispiele zu verdeutlichen.

                      Aber CSS 2 bietet mehrere Wege, um einen Effekt zu erreichen, wie
                      bespielsweise position:absolute.

                      Also ich habe weder hier im Forum, noch auf etwa 50 Seiten zum Thema auch nur einen einzigen Weg gesehen/gefunden. Den_kann_es auch nicht geben, denn es ist definitiv schlichtweg nicht möglich nach dem derzeitigen Box Model (selbst wenn es einen Browser geben würde, der den Standard 100%ig umsetzen würde).

                      Daß Browser damit ihre Probleme haben, ist unbestritten,

                      das ist lediglich ein weiteres Problem...

                      diskreditiert aber nicht CSS 2, meine ich.

                      meine ich schon... ;-)

                      Also eher ein Widersprechen um der Theorie willen. ;-)

                      Nein, eher ein Widersprechen um User aufzurütteln, damit wenigstens in CSS3 'nachgebessert' wird. Denn so sicher scheint das ja noch nicht zu sein (laut W3C). Wann es soweit sein wird, und wann & wie die Browser das dann umsetzen, steht natürlich noch auf einem anderen Blatt (darum geht es mir hierbei aber auch gar nicht).

                      Also - schreibt kräftig 'Beschwerde-Mails' an's W3C und verlangt ein 'überarbeitetes' Box Model!

                      Gruß Gunther

                      1. Hallo Gunther,

                        Also - schreibt kräftig 'Beschwerde-Mails' an's W3C und verlangt ein 'überarbeitetes' Box Model!

                        Ich würde das Box Model nicht gänzlich überarbeiten, der Vorschlag "box-width" und "box-height" gefällt mir am besten. Dann kann man nämlich problemlos wählen, ob man dieses oder jenes Box Model will und Rückwärtskompabilität wäre auch gegeben, da box-width und box-height die width/height-Angaben überschreiben sollen.

                        Naja, in ein paar Jahren (ich wurde beim Nennen der Zahl 3 als Optimist bezeichnet ;-)) können wir ja rückblickend noch einmal diskutieren.

                        Viele Grüße,
                        Christian

                        --
                        Hast Du einen Beitrag? Nur her damit!
                        http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
                        SELF-Code: (http://emmanuel.dammerer.at/selfcode.html)
                        sh:) fo:) ch:] rl:( br:> n4:& ie:% mo:) va:) de:] zu:) fl:( js:| ss:) ls:[
                        1. Hallo Christian,

                          Also - schreibt kräftig 'Beschwerde-Mails' an's W3C und verlangt ein 'überarbeitetes' Box Model!

                          Ich würde das Box Model nicht gänzlich überarbeiten,

                          von 'gänzlich' war ja auch nicht die Rede... ;-), aber ein paar Erweiterungen könnte das jetzige Box Model schon vertragen, bzw. wenn keine Erweiterungen, dann müßte man eben das Modell in sich ändern (was allerdings gerade bei der derzeitigen Annäherung der Browser an das Modell unsinnig wäre). Also lieber ein paar neue Eigenschaften (z.B. die im folgenden von dir erwähnten).

                          der Vorschlag "box-width" und "box-height" gefällt mir am besten. Dann kann man nämlich problemlos wählen, ob man dieses oder jenes Box Model will und Rückwärtskompabilität wäre auch gegeben, da box-width und box-height die width/height-Angaben überschreiben sollen.

                          ja, das wären zwei sehr sinnvolle & nützliche Features...!
                          Ich würde es aber auch durchaus begrüßen, wenn die Optionen zur Angabe 'berechneter' Werte (bspw. heigt:100%-2*50px) umgesetzt würden. Eine Vereinfachung des Modells würde IMHO auch dazu führen, dass die 'nervigen' Browserunterschiede (von Bugs mal abgesehen) schneller verschwinden würden, denn scheinbar ist man sich bei den Browserherstellern auch nicht einig darüber, wie manche 'Definitionen' zu verstehen sind. Gerade bei dem Punkt der Höhe und prozentualen Angaben, hat IMHO CSS2 gravierende Schwächen & Lücken (wenn nicht sogar in sich widersprüchliche Aussagen). Naja, aber wie du schon schreibst - vielleicht in (frühestens) drei Jahren - schau'n mer mal!

                          Naja, in ein paar Jahren (ich wurde beim Nennen der Zahl 3 als Optimist bezeichnet ;-)) können wir ja rückblickend noch einmal diskutieren.

                          aber immer doch :-)

                          Gruß Gunther

                          1. Hallo Gunther,

                            Ich würde es aber auch durchaus begrüßen, wenn die Optionen zur Angabe 'berechneter' Werte (bspw. heigt:100%-2*50px) umgesetzt würden.

                            Hmm. Meiner Ansicht nach wäre das nicht rückwärtskompatibel genug. Du kennst ja die Browserhersteller, die Browser können ja bis jetzt noch nicht mal CSS2 vollständig. Lieber diese beiden Eigenschaften noch dazu, das währe IMHO die Ideallösung, mal ein paar Jahre warten... *grummel*

                            Eine Vereinfachung des Modells würde IMHO auch dazu führen, dass die 'nervigen' Browserunterschiede (von Bugs mal abgesehen) schneller verschwinden würden, denn scheinbar ist man sich bei den Browserherstellern auch nicht einig darüber, wie manche 'Definitionen' zu verstehen sind. Gerade bei dem Punkt der Höhe und prozentualen Angaben, hat IMHO CSS2 gravierende Schwächen & Lücken (wenn nicht sogar in sich widersprüchliche Aussagen).

                            Meiner Ansicht nach ist der Standard ziemlich deutlich. Nur die Browser müssen sich halt auch dran halten.

                            Viele Grüße,
                            Christian

                            --
                            Hast Du einen Beitrag? Nur her damit!
                            http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm
                            SELF-Code: (http://emmanuel.dammerer.at/selfcode.html)
                            sh:) fo:) ch:] rl:( br:> n4:& ie:% mo:) va:) de:] zu:) fl:( js:| ss:) ls:[