maximailian: Viewport zentrieren bei Fenstergröße < Layoutgröße

Hallo.

Ich habe ein schönes Design mit einer Breite von 1024 Pixeln.
Dieses Design hat einen mittigen Content-Bereich mit einer Breite von 960 Pixeln.

Das Design ist per margin:0px auto zentriert.
D.h. bei einer Auflösung von z.B. 1280*1024, sitzt es mittig.

Aber was ist bei einer Auflösung von z.B. 960*720?
Dann wird das Design weiterhin mittig angezeigt, der Content-Bereich aber nicht.

Es ist also wichtig das der Content-Bereich von 960 Pixeln Breite _immer_zentriert ist. Der Rand an beiden Seiten von jeweils 72 Pixeln muss also irgendwie dadran gepappt werden.
Wie kann ich das per CSS lösen?

Durch normale zentrierung des ganzen erreiche ich das gewünschte Ergebnis nicht! Derzeit floaten die Ränder um den Content-Bereich herum.

Grüße, Maximilian

  1. Hi!

    Ich habe ein schönes Design mit einer Breite von 1024 Pixeln.

    Wenn Du damit ein Webdokument meinst: das ist gelogen!

    off:PP

    --
    "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
    1. Wenn Du damit ein Webdokument meinst: das ist gelogen!

      Nein. Ich meine ein mit Photoshop designtes Layout mit einer festen Breite von 1024 Pixeln.

      1. Hi!

        Wenn Du damit ein Webdokument meinst: das ist gelogen!

        Nein. Ich meine ein mit Photoshop designtes Layout mit einer festen Breite von 1024 Pixeln.

        Das ist fein - dessen Äquivalent wird es im Web nicht geben (können) - was ist dann das Problem?

        Wenn Du für das Web publizierst, dann solltest Du Dich verabschieden  von der Vorstellung absoluter Dimensionen wie cm², DIN A|B|C -  etc.

        off:PP

        --
        "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
        1. Wenn Du für das Web publizierst, dann solltest Du Dich verabschieden  von der Vorstellung absoluter Dimensionen wie cm², DIN A|B|C -  etc.

          Wo liegt bitte dein Problem?

          Pixel sind zwar eine absolute Einheit, aber für ein Screendesign defintiv tauglich - wenngleich auch nicht die beste Lösung, aber ich lese in keinem Wort im Ausgangsposting, dass der OP irgendwelche "Papierbezogenen" Einheiten wie cm oder pt verwendet.

          1. Hi!

            Wenn Du für das Web publizierst, dann solltest Du Dich verabschieden  von der Vorstellung absoluter Dimensionen wie cm², DIN A|B|C -  etc.

            Wo liegt bitte dein Problem?

            Wie kommst Du auf die absurde Idee, ich habe ein solches?

            Pixel sind zwar eine absolute Einheit,

            Langsam: wir reden hier vom Web, oder?

            aber für ein Screendesign defintiv tauglich

            Was haben Webdokumente mit Screendesign zu tun?

            • wenngleich auch nicht die beste Lösung, aber ich lese in keinem Wort im Ausgangsposting, dass der OP irgendwelche "Papierbezogenen" Einheiten wie cm oder pt verwendet.

            OP schrieb:

            Ich habe ein schönes Design mit einer Breite von 1024 Pixeln.

            Dazu schrieb ich:

            Wenn Du damit ein Webdokument meinst: das ist gelogen!

            Wo ist nun Dein Punkt?

            off:PP

            --
            "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
            1. Wie kommst Du auf die absurde Idee, ich habe ein solches?

              Weil du den OP so anfährst, als hätte er persönlich Jesus auf dem gewissen.

              Langsam: wir reden hier vom Web, oder?

              Ja.

              aber für ein Screendesign defintiv tauglich
              Was haben Webdokumente mit Screendesign zu tun?

              Wikipedia sagt: "Im Rahmen des Screendesign werden Layouts geschaffen, die speziell auf die Präsentation von Inhalten auf Monitoren ausgerichtet sind."

              Webseiten werden naturgemäß auf "Monitoren" betrachtet.

              OP schrieb:

              Ich habe ein schönes Design mit einer Breite von 1024 Pixeln.

              Dazu schrieb ich:

              Wenn Du damit ein Webdokument meinst: das ist gelogen!

              Wo ist nun Dein Punkt?

              Du bist ein i-Tüpferl-Reiter und fährst den OP grundlos an.

              Warum kaufst du ihm nicht ab, dass er ein Design mit einer Breite von 1024 Pixeln hat.

              Ein Webdokument ist für mich naturgemäß (heutzutage) ein HTML-Dokuement ergänzt durch die genannte Formatierung mit CSS - und das kann gut und gerne (so unsinnig das auch aus) fest auf 1024px beschränkt sein.

              Ich verstehe deinen Einwand also auch nicht.

              1. Hi suit!

                Sorry für die späte Antwort, aber ich bin aktuell wieder da, wo ich nie mehr sein wollte:

                1.) in einem Webprojekt
                2:) it was _sent-from-hell_:((

                Wie kommst Du auf die absurde Idee, ich habe ein solches?

                Weil du den OP so anfährst, als hätte er persönlich Jesus auf dem gewissen.

                Echt? Das tut mir leid - das war er gewiss nicht!

                Langsam: wir reden hier vom Web, oder?

                Ja.

                Gut.

                aber für ein Screendesign defintiv tauglich
                Was haben Webdokumente mit Screendesign zu tun?

                Wikipedia sagt: "Im Rahmen des Screendesign werden Layouts geschaffen, die speziell auf die Präsentation von Inhalten auf Monitoren ausgerichtet sind."

                Wikipedia? Komm! Das kannste besser!

                Webseiten werden naturgemäß auf "Monitoren" betrachtet.

                Bei Dir vielleicht ja! Mit _Natur_ hat dies nichts zu tun!
                Ich sehe nicht so gut und lasse mir das Forum hier regelmäßig vorlesen: Mit Monitor verbinde ich spntan eine öffentlich-rechtliche Politsendung[*]

                OP schrieb:

                Ich habe ein schönes Design mit einer Breite von 1024 Pixeln.

                Dazu schrieb ich:

                Wenn Du damit ein Webdokument meinst: das ist gelogen!

                Wo ist nun Dein Punkt?

                Du bist ein i-Tüpferl-Reiter

                Aber einer der harmlosen hier - oder?

                und fährst den OP grundlos an.

                Das wollte ich wie gesagt bestimmt nicht und habe das so auch nicht empfunden, aber ich entschuldige mich, falls dies so aufgefasst wurde.

                Warum kaufst du ihm nicht ab, dass er ein Design mit einer Breite von 1024 Pixeln hat.

                Es ging um das Adjektiv im selben Satze - sorry: ich i-tüpfle wieder! - und mit Designern schlage ich mich aktuell zehn bis zwölf Stunden am Tag herum, aber aktuell (noch) nicht diesselben;)

                Ein Webdokument ist für mich naturgemäß (heutzutage) ein HTML-Dokuement ergänzt durch die genannte Formatierung mit CSS - und das kann gut und gerne (so unsinnig das auch aus) fest auf 1024px beschränkt sein.

                Das habe ich nie betritten - von mir aus kann ein Webdokument auch per Frameset 666 weitere Dokumente einbinden und jeweils 4096 Pixel hoch, wie breit sein - ich werde nur diesbezüglich immer verweigern, diese Vorhaben als 'schön' oder ähnlich zu bezeichnen.

                Wanna smoke - plz?

                [*] ich weiß nicht, ob man die in AT kennt, aber die Wiederholung kommt sicher auf 3.SAT;)

                off:PP

                --
                "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
                1. Hi Ingrid!

                  F***! Dreimal die Vorschau benutzt und trotzdem im Subject gepfuscht!

                  off:PP

                  --
                  "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
                2. 2:) it was _sent-from-hell_:((

                  Das sind Webprojekte immer ;)

                  Wikipedia? Komm! Das kannste besser!

                  Ich war zu faul zu suchen - und ernsthaft, wenn ich sage "Mein Designer sagt auch Screendesign dazu" - würde das so viel besser ankommen? ;)

                  Bei Dir vielleicht ja!

                  Einigen wir uns darauf, dass auch das Display eines Mobiltelefons ein "Screen" ist und mein HD-Fernseher ebenfalls ;)

                  Die Braille-Zeile möglicherweise nicht, aber die kennt vermutlich keine Pixel.

                  Mit _Natur_ hat dies nichts zu tun!

                  http://de.wiktionary.org/wiki/Natur@Title=Natur
                  Bedeutungen:
                   [4] die generelle Beschaffenheit einer Sache oder eines Sachverhaltes.

                  Jaja, schon wieder etwas von der Wikimedia Foundation :p

                  Ich sehe nicht so gut und lasse mir das Forum hier regelmäßig vorlesen:

                  Dann dürften dich Scrollbalken ohnehin nicht sonderlich interessieren ;) - so what?

                  Ich sehe glücklicherweise gut, aber auf der Couch in 3 Metern Entfernung ist das Lesen der Forumposts bei Standarddarstellung etwas anstrengen - aber dafür hat Opera ein tolles Zoom-Feature.

                  Mit Monitor verbinde ich spntan eine öffentlich-rechtliche Politsendun [*]

                  Ist mir vom namen bekannt, hab' sie aber noch nicht gesehen.

                  Ich verbinde mit Monitor die Phrase "Who Monitors the Birds?" aus Space: Above and Beyond

                  Es ging um das Adjektiv im selben Satze

                  Das "schön" - wir haben das Design doch beide nicht gesehen, wie willst du das beurteilen? Vielleicht ist es wirklich schön? Ja, mir ist klar, dass das im Auge des Betrachters liegt.

                  Wanna smoke - plz?

                  Nichtraucher ;)

                  1. Hi!

                    2:) it was _sent-from-hell_:((

                    Das sind Webprojekte immer ;)

                    Nein, nein - dieses ist anders: es gibt Direktiven gegen die ich _nicht_ ankomme[*]

                    Wikipedia? Komm! Das kannste besser!

                    Ich war zu faul zu suchen - und ernsthaft, wenn ich sage "Mein Designer sagt auch Screendesign dazu" - würde das so viel besser ankommen? ;)

                    Ja!

                    Bei Dir vielleicht ja!

                    Einigen wir uns darauf, dass auch das Display eines Mobiltelefons ein "Screen" ist und mein HD-Fernseher ebenfalls ;)

                    Kein Probelem - btw: ich liebe unsere beiden ÖR-Sender noch mehr, seit sie HD senden..

                    Die Braille-Zeile möglicherweise nicht, aber die kennt vermutlich keine Pixel.

                    Das meinte ich.

                    Mit _Natur_ hat dies nichts zu tun!

                    http://de.wiktionary.org/wiki/Natur@Title=Natur
                    Bedeutungen:
                    [4] die generelle Beschaffenheit einer Sache oder eines Sachverhaltes.

                    Jaja, schon wieder etwas von der Wikimedia Foundation :p

                    Du kannst es einfach nicht lassen;)

                    Ich sehe nicht so gut und lasse mir das Forum hier regelmäßig vorlesen:

                    Dann dürften dich Scrollbalken ohnehin nicht sonderlich interessieren ;) - so what?

                    Na: eben!

                    Ich sehe glücklicherweise gut, aber auf der Couch in 3 Metern Entfernung ist das Lesen der Forumposts bei Standarddarstellung etwas anstrengen - aber dafür hat Opera ein tolles Zoom-Feature.

                    Pah! Nix gegen meinen blonden Screen-(Arghh!)Reader mit den tollen Kurven - die kann ich fühlen und das ist besser, als sie nur zu sehen;)

                    Mit Monitor verbinde ich spntan eine öffentlich-rechtliche Politsendun [*]

                    Ist mir vom namen bekannt, hab' sie aber noch nicht gesehen.

                    Ist klasse, allerdings geht es da in erster Linie um die Politik der BRDigung!

                    Ich verbinde mit Monitor die Phrase "Who Monitors the Birds?" aus Space: Above and Beyond

                    OK!

                    Es ging um das Adjektiv im selben Satze

                    Das "schön" - wir haben das Design doch beide nicht gesehen, wie willst du das beurteilen?

                    Es gibt da einen sehr 'alten' Grundsatz im /Design/: 'form _follows_ function' - da ich Alliterationen liebe, konnte ich mir das merken.

                    Vielleicht ist es wirklich schön?
                    Ja, mir ist klar, dass das im Auge des Betrachters liegt.

                    ACK!

                    Wanna smoke - plz?

                    Nichtraucher ;)

                    Gut - mir ging es nur um Chanunpa Wakan - aber bei WP bist Du ja Profi;)

                    Bonne nuit!

                    [*] register_globals ist (zwingend) on; Funktionen dürfen nur im Notfall benutzt werden; OOP ist verboten und alles läuft im global PHP-Scope!
                    Der schönste Ausschnitt aus dem HTML-Code ist: <table class"jaja">, weil der Rest eher so aussieht:<center><br><font color="pink">...

                    off:PP

                    --
                    "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
                    1. Wanna smoke - plz?

                      Nichtraucher ;)

                      Gut - mir ging es nur um Chanunpa Wakan - aber bei WP bist Du ja Profi;)

                      War mir klar :p

                      [*] register_globals ist (zwingend) on; Funktionen dürfen nur im Notfall benutzt werden; OOP ist verboten und alles läuft im global PHP-Scope!
                      Der schönste Ausschnitt aus dem HTML-Code ist: <table class"jaja">, weil der Rest eher so aussieht:<center><br><font color="pink">...

                      Mir fehlen die Worte :)

  2. Es ist also wichtig das der Content-Bereich von 960 Pixeln Breite _immer_zentriert ist. Der Rand an beiden Seiten von jeweils 72 Pixeln muss also irgendwie dadran gepappt werden.
    Wie kann ich das per CSS lösen?

    Durch ein (ebenfalls zentriertes, breiteres) Hintergrundbild.

  3. Hi Maximilian!

    Ich hoffe sehr, dass Du nicht wegen meiner Antwort in diesem Thread nicht mehr geantwortet hast - sollte ich in dieser übertrieben haben: es tut mir leid!

    off:PP

    --
    "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)