Ingo Turski: Zentrieren mit CSS

Beitrag lesen

Hi,

Ich schaue mir in letzter Zeit natürlich viele Webseiten an,
die per CC "gelayoutet" sind. Und dabei fällt mir immer wieder
auf, dass sehr viele Webdesigner entweder doch wieder auf
die feste Breite (also das schmale Handtuch) zurückgreifen,
oder einfach die Textzeilen über die ganze Bildschirmbreite fliessen
lassen.

Beides kann ja nicht im Sinne des Erfinders sein.
Meterlange Textzeilen sind grauenhaft zu lesen
und das Handtuch verschent wieder den gößten Teil des Bilschirms.

Da hast Du zwar recht, aber

Da fand ich meinen Kompromiss, mit fester Breite für den Inhalt
und flexibler Navi eigentlich ganz gut.

ist nicht ganz geeignet, da die Navigation ja nur einen recht geringen Anteil eines gängigen Fensters ausmacht. Bei einem Dreispalter oder weiteren Inhalten in der Navigationsspalte sähe es schon anders aus.

Meine Meinung ist, daß man es nicht jedem Recht machen kann, aber einen möglichst brauchbaren Kompromiß anbieten sollte. Der muß nicht unbedingt auch noch ein 1600px breites Anzeigefenster berücksichtigen (wer solche Breiten nutzt, der kann ruhig sein Fenster mal eben schmaler ziehen), aber die gängigen Breiten bis hinunter zu 800px sollten mindestens berücksichtigt werden.

Eine schöne Möglichkeit bietet max-width, was ich hier mal verwendet habe. Besonders, wenn man die Breite in em angibt, kann man ein ähnlich stabiles Layout wie in print-Medien erzielen.

freundliche Grüße
Ingo

0 162

Zentrieren mit CSS

Ingo Siemon
  • css
  1. 0
    beza1e1
    1. 0
      Ingo Turski
      1. 0
        Detlef G.
        1. 0
          Ingo Siemon
          1. 0
            Detlef G.
            1. 0
              Ingo Siemon
              1. 0
                Detlef G.
                1. 0
                  Ingo Siemon
                  1. 0
                    Ingo Turski
                    1. 0
                      Ingo Siemon
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Ingo Siemon
                  2. 0
                    Detlef G.
                    1. 0
                      Ingo Siemon
        2. 0
          Ingo Turski
          1. 0
            Ingo Siemon
          2. 0
            Detlef G.
            1. 0
              Ingo Siemon
              1. 0
                Detlef G.
                1. 0
                  Ingo Siemon
                  1. 0
                    Detlef G.
                    1. 0
                      Ingo Siemon
                    2. 0
                      Ingo Siemon
                      1. 0
                        Detlef G.
                        1. 0
                          Ingo Siemon
                          1. 0
                            Detlef G.
                            1. 0
                              Ingo Siemon
                              1. 0
                                Detlef G.
                                1. 0
                                  Ingo Siemon
                              2. 0
                                at
                                1. 0
                                  Ingo Siemon
                                  1. 0
                                    at
                                    1. 0
                                      Ingo Siemon
                                      1. 0
                                        at
                                        1. 0
                                          Ingo Siemon
                                          1. 0
                                            at
                                            1. 0
                                              Ingo Siemon
                                              1. 0
                                                at
                                                1. 0
                                                  Ingo Siemon
                                                  1. 0
                                                    at
                                                    1. 0
                                                      Ingo Siemon
                        2. 0
                          Ingo Turski
                          1. 0
                            Detlef G.
                    3. 0
                      Ingo Siemon
            2. 0
              Ingo Turski
              1. 0
                Detlef G.
                1. 0
                  Ingo Siemon
                  1. 0
                    Detlef G.
                    1. 0
                      Ingo Siemon
              2. 0
                Ingo Siemon
                1. 0
                  Ingo Turski
                  1. 0
                    Ingo Siemon
                    1. 0
                      Ingo Turski
                      1. 0
                        Ingo Siemon
                        1. 0
                          Ingo Turski
                          1. 0
                            Ingo Siemon
    2. 0
      Ingo Siemon
      1. 0
        beza1e1
        1. 0
          Thomas J.S.
          1. 0
            Ingo Siemon
          2. 0
            beza1e1
            1. 0
              Ingo Siemon
              1. 0
                beza1e1
                1. 0
                  Ingo Siemon
                  1. 0
                    beza1e1
                    1. 0
                      Ingo Siemon
                      1. 0
                        at
                        1. 0
                          Ingo Siemon
                          1. 0
                            at
                            1. 0
                              Ingo Siemon
                              1. 0
                                at
                                1. 0
                                  Ingo Siemon
                                  1. 0
                                    at
                                    1. 0
                                      Ingo Siemon
                                      1. 0
                                        at
                                        1. 0
                                          Ingo Siemon
                                          1. 0
                                            at
                  2. 0
                    beza1e1
                    1. 0
                      Detlef G.
                      1. 0
                        Ingo Siemon
                    2. 0
                      Ingo Siemon
                      1. 0
                        beza1e1
                        1. 0
                          Ingo Siemon
                2. 0
                  Detlef G.
                  1. 0
                    beza1e1
                    1. 0
                      Detlef G.
                      1. 0
                        beza1e1
              2. 0
                Gunnar Bittersmann
                1. 0
                  Ingo Siemon
  2. 0
    Thomas J.S.
    1. 0
      Ingo Siemon
      1. 0
        Thomas J.S.
        1. 0
          Ingo Siemon
  3. 1

    neuer Thread?

    Detlef G.
    • meinung
    1. 0
      Ingo Siemon
      1. 0

        Thema ändern

        Detlef G.
        1. 0
          Ingo Siemon
          1. 0

            Threads zusammenfassen

            Detlef G.
            1. 0
              Ingo Siemon
      2. 0
        Tobias Kloth
        1. 0
          Ingo Siemon
    2. 0
      Gunnar Bittersmann
      1. 0
        Detlef G.
  4. 0

    Navigation auslagern ?

    Ingo Siemon
    1. 0
      Detlef G.
      1. 0
        Ingo Siemon
        1. 0
          Detlef G.
          • projektverwaltung
          1. 0
            Ingo Siemon
            1. 0
              Jörg Lorenz
              1. 0
                Ingo Siemon
                1. 0
                  Jörg Lorenz
                  1. 0
                    Ingo Siemon
            2. 0
              Detlef G.
              1. 0
                Ingo Siemon
                1. 0
                  Detlef G.
    2. 0
      Længlich
      1. 0
        Ingo Siemon
        1. 0
          Jörg Lorenz
          1. 0
            Ingo Siemon
            1. 0
              Jörg Lorenz
              1. 0
                Ingo Siemon
                1. 0
                  Jörg Lorenz
                  1. 0
                    Ingo Siemon
                    1. 0
                      Jörg Lorenz
                      1. 0
                        Ingo Siemon
                        1. 0
                          Jörg Lorenz
                          1. 0
                            Ingo Siemon
                            1. 0
                              Jörg Lorenz
                              1. 0
                                Ingo Siemon
                                1. 0
                                  Jörg Lorenz
                                  1. 0
                                    Ingo Siemon
          2. 0
            Ingo Turski
            1. 0
              Jörg Lorenz
              1. 0
                Ingo Turski
            2. 0
              Detlef G.
              1. 0
                Jörg Lorenz
                1. 0
                  Sven Rautenberg
                  1. 0
                    Jörg Lorenz
        2. 0
          Længlich
          • php
          1. 0
            Ingo Siemon
            1. 0
              Længlich
              1. 0
                Ingo Siemon
                1. 0
                  Detlef G.
                  1. 0
                    Ingo Siemon
                    1. 0
                      Detlef G.
  5. 0

    Containerbox 100% Höhe

    Ingo Siemon
    1. 0
      Detlef G.
      1. 0
        Ingo Siemon
        1. 0
          Detlef G.
          1. 0
            Ingo Siemon
            1. 0
              Detlef G.
              1. 0
                Ingo Siemon
        2. 0
          Længlich
          1. 0
            Ingo Siemon
  6. 0
    Ingo Siemon
  7. 0

    3-Pixel-Bug des IE beseitigt

    Ingo Siemon
    1. 0
      Længlich
      1. 0
        Ingo Siemon
  8. 0

    Mal wieder neuen Thread eröffnen ?

    Ingo Siemon
    1. 0
      Detlef G.
      • meinung
      1. 0
        Ingo Siemon