Tim Tepaße: Absolute Positionierung in CSS-Layouts

Beitrag lesen

Hallo,

Unter einem gefloateten Element mit variablem Inhalt (also Höhe) kann der restliche Seiteninhalt automatisch weiter fliessen - positioniere ich hingegen absolut, habe ich ein Problem, wenn ich dessen Höhe nicht kenne, und "darunter" weitere Inhalte sich "einreihen" sollen.

Ich frage mich gerade, ob meine Perspektive auch etwas daher kommt, dass ich einen bestimmten Webseiten-Typ bevorzuge und selber basteln würde, nämlich die Einspaltige, minimale Webseite mit einer maximal dazugehörigen Marginalienspalte. Ähnlich wie Orlando verstehe ich oft nicht, was an der Mehrspaltigkeit und der Nebeneinander-Darstellung mehrerer Kontexte gewünscht bis gralhaft sein soll.

Bei Webseiten die analog zu den Titelseiten von Tageszeitungen ein Raster oder mehrere Raster aufspannen, in die Inhalte sich einreihen, ist absolute Positionierung natürlich eher unspannend.

Ich persönlich setze absolute Positionierung mit Vorliebe für "kleinere" Seitenelemente ein - also solche, deren Positionierung auf das Grundgerüst des Layouts wenig bis gar keinen Einfluss haben, bzw. deren Maximalhöhe ich in so weit abschätzen kann, dass ich weiss, wie viel "Platz" ich lassen muss, um nachfolgende Elemente wieder im normalen Fluss folgen lassen zu können.

Das harmoniert natürlich mit meinem Umordnungs-Argument zum CSS Naked Day. Gerade klassische Header mit Globalnavigation und Suche und anderen Krempel stören etwas in der Nicht-CSS-Ansicht, wären also besser im Quelltext nach dem Inhalt aufgehoben. In der CSS-Ansicht übersieht das leicht trainierte Auge das sehr viel mehr. Mit absoluter Positionierung kann man sich seinen Header dann halbwegs zusammen basteln.

Klar lässt sich ein klassisches Zwei-Spalten-Layout (oder ggf. auch mehr Spalten) oftmals auch mit absoluter Positionierung umsetzen - mit dem, mitunter recht gravierenden, Nachteil, dass eine Anspassung an den zur Verfügung stehenden Platz in der Breite nicht oder kaum gegeben ist, wie float sie mir bietet - sondern umgekehrt, der Platzbedarf angepasst wird, also bei kleinerem Viewport Scrollbalken entstehen.

min/max-width hilft in Desktop-Browsern sehr.

Tim

0 54

Absolute Positionierung in CSS-Layouts

Tim Tepaße
  • meinung
  1. 0
    Jeena Paradies
    1. 0
      Tom
      1. 0

        Das Leben und so ...

        Jeena Paradies
        • menschelei
        1. 0
          Der Martin
          1. 0
            Stonie
            1. 0
              Der Martin
            2. 0
              Tom
    2. 0
      Tim Tepaße
      1. 0
        Jeena Paradies
        1. 0
          Tim Tepaße
      2. 1
        molily
  2. 0
    ChrisB
    1. 6
      ChrisB
      1. 0
        molily
        1. 0
          ChrisB
      2. 0
        Tim Tepaße
        1. 0
          ChrisB
          1. 0
            Der Martin
            1. 0
              Tom
            2. 0
              molily
              1. 0
                Der Martin
                1. 0
                  molily
                  1. 0
                    Der Martin
                    1. 0
                      molily
                      1. 0
                        Der Martin
                        1. 3
                          molily
                          1. 2
                            ChrisB
                        2. 0
                          Tim Tepaße
                          1. 0
                            Der Martin
                            1. 2
                              molily
                              1. 0
                                Der Martin
                                1. 3
                                  Struppi
                                2. 0
                                  molily
                                3. 0
                                  Gunnar Bittersmann
                2. 0
                  molily
                3. 0
                  Gunnar Bittersmann
                  1. 0
                    Der Martin
                  2. 0
                    molily
            3. 0
              Gunnar Bittersmann
              1. 0
                ChrisB
                1. 0
                  molily
            4. 0
              molily
    2. 0
      molily
      1. 0
        Tim Tepaße
      2. 0
        Gunnar Bittersmann
    3. 0
      Tim Tepaße
      1. 0
        ChrisB
        1. 0
          Beat
  3. 0
    Cyx23
  4. 0
    Klawischnigg
    1. 0
      Tim Tepaße
      1. 0
        Cyx23
      2. 0
        Klawischnigg