Lars: Überlappung verhindern

Hallo,

ich habe einige Elemente(Grafiken) mit CSS positioniert(position:absolute). Nun ist alles zwar toll, aber beim zusammenschieben des Browser überlappen sich die Elemente.

Wie kann ich denn die Überlappung verhindern? Das muß doch eigentlich ja nun ganz einfach sein, aber ich fand nichts hierzu.

Danke im Voraus:-)
Lars

  1. hallo,

    ich habe einige Elemente(Grafiken) mit CSS positioniert(position:absolute). Nun ist alles zwar toll

    Nö, ist es nach deiner eigenen Beschreibung nicht.

    Wie kann ich denn die Überlappung verhindern?

    Indem du keine absolute Positionierung verwendest. Für tiefergehende Problemdiskussion solltest du bitte einen Link zu deiner Seite mit diesen Grafiken angeben, damit man es sich genau anschauen kann.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. Wie kann ich denn die Überlappung verhindern?

      Indem du keine absolute Positionierung verwendest. Für tiefergehende Problemdiskussion solltest du bitte einen Link zu deiner Seite mit diesen Grafiken angeben, damit man es sich genau anschauen kann.

      Hallo,

      es ist ganz einfach, ich habe eine Grafik mit

      one {position:absolute; top:0px; leftt:0px;}

      und die Andere mit

      two { position:absolute; bottom:0px; right:0px;}

      positioniert. Das funktioniert ja auch. Nur wenn ich das Browserfenster verkleinere, kommt es zu irggendwann zu Überlappungen, und das möchte ich verhindern.

      Danke für die Antwort :-)
      Lars

      1. Hello out there!

        Christoph sagte nicht umsonst „einen Link zu deiner Seite […] angeben“, damit man sich ein Bild machen kann, was du anstelle der absoluten Positionierung verwenden könntest.

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        1. Hello out there!

          Christoph sagte nicht umsonst „einen Link zu deiner Seite […] angeben“, damit man sich ein Bild machen kann, was du anstelle der absoluten Positionierung verwenden könntest.

          See ya up the road,
          Gunnar

          Hallo,

          ich habe noch keine Seite mit diesem Beispiel. Und ich weiß, was ich machen kann, was auch bestens funktioniert; Und zwar  Tabellen nutzen.

          Meine Anforderung ist nun primitivst:Die Elemente sollen sich einfach nicht überlappen, ansonsten bis zu ihrer eigentlichen Größe ja variebel ausgerichtet sein.

          Scheinbar hat man ja bei CSS wohl einiges an einfachsten Atrributen vrergessen einzuflechten, da ich nämlich zunächst dachte, meine Frage wäre eher peinlich , überhaupt nach so was zu fragen ;-)

          Trotzdem lieben dank für die Mühe :-)

          1. hallo,

            Scheinbar hat man ja bei CSS wohl einiges an einfachsten Atrributen vrergessen einzuflechten

            Nö. In CSS gibt es eigentlich alles, und darunter auch manches, was heute noch kein Browser und auch kein anderes Gerät (Handy, Braille-Reader usw.) versteht bzw. implementiert hat.

            da ich nämlich zunächst dachte, meine Frage wäre eher peinlich , überhaupt nach so was zu fragen ;-)

            An deiner Frage ist nichts peinlich. Du empfindest etwas als Problem und fragst halt nach, ob dir jemand bei der Problemlösung helfen kann. Das ist ok, dafür ist das Forum da. Nur mußt du verstehen, daß wir bei manchen sehr einfach scheinenden Fragen uns des Eindrucks nicht ganz erwehren können, daß das _eigentliche_ Problem an ganz anderer Stelle liegen könnte, als es das _beschriebene_ Problem darstellt.

            Und bei "position:absolute" mußt du beispielsweise verstehen, an welchen Stellen des Seitenkontext diese "absolute" Positionierung festgemacht mird. Wie es aussieht, hast du bereits erfahren. Jetzt mußt du noch verstehen lernen, warum das so ist und wie du damit umgehen kannst.

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. Nö. In CSS gibt es eigentlich alles, und darunter auch manches, was heute noch kein Browser und auch kein anderes Gerät (Handy, Braille-Reader usw.) versteht bzw. implementiert hat.

              Hallo, ich danke dir für die Antwort, allerdings haben wir doch eben festgestellt, daß CSS unzureichend ist. Ich habe auch wenig Lust eine ganze Nacht an solchen Lapallien zu verbringen. Ein Braille-Reader mag ja ethisch sein, aber mehr auch nicht. Insbesondere, wenn es sich um Optik handelt.

              Und bei "position:absolute" mußt du beispielsweise verstehen, an welchen Stellen des Seitenkontext diese "absolute" Positionierung festgemacht mird. Wie es aussieht, hast du bereits erfahren. Jetzt mußt du noch verstehen lernen, warum das so ist und wie du damit umgehen kannst.

              Nun vielleicht sollte sich CSS an die Bedürfnisse des Nutzers anpassen und nicht andersherum? Bevor ich hier fragte, habe ich natürlich das "halbe" Netz abgesucht und anscheinend bin ich nicht der 1., der sich mit diesem Problem beschäftigt.

              CSS sucks :-o

              Gruß

              1. Hi,

                allerdings haben wir doch eben festgestellt, daß CSS unzureichend ist.

                ich würde eher sagen die Umsetzung in einigen Browsern ist unzureichend.

                Nun vielleicht sollte sich CSS an die Bedürfnisse des Nutzers anpassen und nicht andersherum?

                Wieso? position:absolute ist so definiert, dass ein Element aus dem Fluß genommen wird und andere Elemente nicht beeinflußt, gerade damit Überlappungen möglich werden. Du willst das aber nicht und hast daher lediglich eine unpassende Eigenschaft verwendet.

                freundliche Grüße
                Ingo

                1. Du willst das aber nicht und hast daher lediglich eine unpassende Eigenschaft verwendet.

                  dann mir bitte die passende Eigenschaft. Das war doch meine urprüngliche Frage.

                  Gruß

                  1. Hi,

                    dann mir bitte die passende Eigenschaft. Das war doch meine urprüngliche Frage.

                    das hängt von der konkreten Anforderung in der Seite ab. Nach Deiner dürftigen Beschreibung könnte es die display-Eigenschaft sein mit einem Wert, den der IE allerdings noch nicht kennt. ;-)

                    freundliche Grüße
                    Ingo

          2. was auch bestens funktioniert; Und zwar  Tabellen nutzen.

            Autsch! Damit ist Dein Markup aber nichbt mehr semantisch...

            Ich könnte mir vorstellen, dass Du bei Deinen Bildern ziemlich große Gafiken verwendet hast, denn prinzipiell müssen sich ja zwei Grafiken irgendwann einmal überlappen, wenn eine links oben und die andere rechts unten positioniert sind, und das Browserfenster auf ein entsprechendes Minimum verkleinert wird!

            Was sollte denn "nicht überlappen" bedeuten? Scrollbalken? Denkst Du daher an eine Tabelle? Hmm. Und wenn Du nun Deiner Grafik rechts unten einen Margin verpasst, der die Maße der oberen Graifk hat, entsteht dann immer noch eine Überlappung, oder hast Du dann Deine Scrollbalken?

            Liebe Grüße aus Ellwangen,

            Felix Riesterer.

            1. Hallo,

              was auch bestens funktioniert; Und zwar  Tabellen nutzen.

              Autsch! Damit ist Dein Markup aber nichbt mehr semantisch...

              Nun, die Welt wird sich trotzdem weiterdrehen.

              Was sollte denn "nicht überlappen" bedeuten? Scrollbalken? Denkst Du daher an eine Tabelle? Hmm. Und wenn Du nun Deiner Grafik rechts unten einen Margin verpasst, der die Maße der oberen Graifk hat, entsteht dann immer noch eine Überlappung, oder hast Du dann Deine Scrollbalken?

              Bitte, so schwierig ist es nicht zu verstehen was er meint:

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

              <html>
              <head>
               <title>Untitled</title>
               <style type="text/css">
                #one { position:absolute; left:0px; top:0px; width:200px; height:200px; background-color:silver; }
                #two { position:absolute; bottom:0px; right:0px; width:200px; height:200px; background-color:gray; }
               </style>
              </head>

              <body>

              <div id="one">one</div>
              <div id="two">two</div>

              </body>
              </html>

              und jetzt verkleinere man das Browserfesnter.

              Grüße
              Thomas

          3. Und ich weiß, was ich machen kann, was auch bestens funktioniert; Und zwar  Tabellen nutzen.

            Das halte ich auch für die beste/einfachste/sinnvollste Lösung in dieser Situation.

            Viele Grüße!
            _ds

            --
            5. [zensiert]
            Top 5-Blog, 5 Gründe gegen Zensur
      2. Hallo Lars!

        Du solltest Deinem Dokument eventuell eine Mindestbreite geben.

        Schönen Gruß

  2. Hallo Lars

    ich habe einige Elemente(Grafiken) mit CSS positioniert(position:absolute). ...

    Wozu das? Absolute Positionierung ist für wenig Fortgeschrittene absolut nicht geeignet (vermutlich kommt daher die Bezeichnung ;-)).

    Wie kann ich denn die Überlappung verhindern? Das muß doch eigentlich ja nun ganz einfach sein, aber ich fand nichts hierzu.

    Ich frage mich, warum immer als erstes versucht wird, position:absolute zu verwenden. Dadurch wird das entsprechende Element aus dem Fluss genommen und ohne Rücksicht auf Verluste (Überlappungen) an der angegeben Position eingefügt bzw. drübergeklebt (Aufklebereffekt).
    Wenn ich dies nicht will, dann ist position:absolute die falsche Eigenschaft.

    Je nachdem, wie deine Seite aufgebaut ist könnten margin oder/und float eventuell in Verbindung mit min-height (und height für IE) richtig angewand das von dir gewünschte Aussehen erreichen.
    Ohne deine Seite zu kennen, düfte es aber kaum möglich sein, dir wirklich zu helfen.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!