Encoder: Layoutmöglichkeit gesucht

Hallo
Wie es sich für Sonntag gehört, bin ich am Stöbern und ausprobieren :-)

Mein Seitenlayout hat bisher eine zentrierte Spalte max-width und margin: 0 auto;
Soweit alles gut.

Jetzt suche ich eine Möglichkeit um den Platz links und rechts dieser Spalte zugreifbar zu machen.

Ich habe schon etliche 3-columns Layouts und Ideen gefunden, aber keine davon trifft meinen Fall. Bei allen ist eine feste Zahl im Spiel, entweder Prozentangaben oder feste Breite oder sonstiges.

Was ich brauche wäre
Mittlere Spalte: so breit wie verfügbar, aber nicht breiter als x Pixel. Und zentriert.
Linke und rechte Spalte: restlicher Platz.

Würde mich sehr über eine Idee freuen, oder hat das einen bestimmten Namen unter dem ich was hilfreiches finde?

  1. Om nah hoo pez nyeetz, Encoder!

    Was ich brauche wäre
    Mittlere Spalte: so breit wie verfügbar, aber nicht breiter als x Pixel. Und zentriert.
    Linke und rechte Spalte: restlicher Platz.

    Das klingt nach Tabelle, also display: table-*. Flexbox dürfte auch in Frage kommen.

    Würde mich sehr über eine Idee freuen, oder hat das einen bestimmten Namen unter dem ich was hilfreiches finde?

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Tal und Talg.

    1. http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-title=Flexbox dürfte auch in Frage kommen.

      Mit der wollt ich mich schon länger mal befassen. Leider deutet alles was ich finde darauf hin, dass man die nächste Zeit diverse Angaben mehrfach machen muss bis man sich auf standartisierte Namen einigen will.
      Naja und der IE... das alte Thema. Wobei ich den ja sowieso inzwischen mit einer Meldung als veraltet anzeige.

      1. Hallo,

        Flexbox dürfte auch in Frage kommen.
        Mit der wollt ich mich schon länger mal befassen. Leider deutet alles was ich finde darauf hin, dass man die nächste Zeit diverse Angaben mehrfach machen muss bis man sich auf standartisierte Namen einigen will.

        Die jetzigen Namen sind voraussichtlich die finalen. Allerdings unterstützen diese nur neuere Chrome- und Firefox-Versionen (Stable-Releases). Insofern ist es richtig, dass diverse Angaben und Fallbacks nötig sind.

        Naja und der IE... das alte Thema. Wobei ich den ja sowieso inzwischen mit einer Meldung als veraltet anzeige.

        Du zeigst allen IEs eine Veraltet-Meldung? Was rechtfertigt das? Hast du dich genauer mit IE 8, 9, 10 und 11 beschäftigt?

        Übrigens unterstützt IE 10 seit Version 10 Flexbox gemäß einer älteren Spezifikation und ab IE 11 gemäß der aktuellen Spezifikation ohne Präfixe. Zum Vergleich: Firefox unterstützt die Eigenschaften ohne Präfixes seit Juni, Chrome seit August. IE 11 soll noch im Oktober erscheinen.

        Grüße,
        Mathias

        1. Ok, mit mehreren Angaben könnte ich ja leben, sofern die Chance besteht dass die Seite dann in den gängigen Browsern so rüberkommt wie gewünscht.

          Du zeigst allen IEs eine Veraltet-Meldung?

          Nur denen bis einschließlich der letzten XP-Version. Und auch veralteten anderen Browsern zeige ich die Meldung.
          Ich wurde hier auf die Seite http://browser-update.org/ auferksam gemacht, die das merkbar aber trotzdem dezent erledigen kann.

          Eine von mir betreute Seite wird von XP etwa 2,8 mal so oft aufgerufen wie von Windows 7. Alles andere liegt noch weit darunter. Häufigster Browser (ca. das 1,7-fache von Firefox) ist der IE. Da finde ich es schon fair dem User zu sagen dass er nicht das sieht was er sehen soll.

  2. Hallo,

    Mittlere Spalte: so breit wie verfügbar, aber nicht breiter als x Pixel. Und zentriert.
    Linke und rechte Spalte: restlicher Platz.

    Was passiert, wenn der Viewport <= x Pixel groß ist? Verschwinden die Seitenspalten und ihr Inhalt dann völlig?

    Keine Layouttechnik, die ich kenne, unterstützt das von Haus aus – du wirst wahrscheinlich Media Queries brauchen, um diese Logik umzusetzen.

    Ob das Grundlayout dann mit Floats, display: inline-block, display: table, absoluter Positionierung oder Flexbox gelöst wird, scheint mir hier nebensächlich.

    Mathias

    1. Was passiert, wenn der Viewport <= x Pixel groß ist? Verschwinden die Seitenspalten und ihr Inhalt dann völlig?

      Ja.
      Verhalten soll von der Anzeige her genauso sein wie bisher mit zentriertem body-Element mit max-width Angabe.
      Nur dass ich eben auf den Randbereich zugreifen möchte. (body geht dann natürlich nicht mehr)

      1. Om nah hoo pez nyeetz, Encoder!

        Was passiert, wenn der Viewport <= x Pixel groß ist? Verschwinden die Seitenspalten und ihr Inhalt dann völlig?
        Ja.
        Verhalten soll von der Anzeige her genauso sein wie bisher mit zentriertem body-Element mit max-width Angabe.
        Nur dass ich eben auf den Randbereich zugreifen möchte. (body geht dann natürlich nicht mehr)

        Doch body geht, die Randbereiche sind dann fixierte Elemente.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Tang und Tanga.