MrDynalink: Ausnutzung der gesamten Bildschirmfläche

Hallo,

ich begreife das div-tag nicht. Wie würde man diese Aufgabe lösen:

9 kleine Grafiken sollen auf Bildschirmen mit beliebiger Auflösung folgendermaßen angeordnet werden:

Bild1: oben links
Bild2: oben mitte
Bild3: oben rechts
Bild4: mitte links
Bild5: mitte mitte
Bild6: mitte rechts
Bild7: unten links
Bild8: unten mitte
Bild9: unten rechts

Hätte geglaubt, dass das mit div-Tags ganz einfach ist und ohne java-script und komplizierten Berechnungen mit physikalischen Auslösungen funktioniert.

Bild6 soll immer zentriert auf dem Bildschirm liegen, die anderen Bilder sollen symmetrisch am Bildschirmrand angeordnet werden. Das soll natürlich auch funktionieren, wenn die Fenstergröße verändert wird.

Vielen Dank für Tipps ...

  1. Hi,

    Bild6 soll immer zentriert auf dem Bildschirm liegen, die anderen Bilder sollen symmetrisch am Bildschirmrand angeordnet werden. Das soll natürlich auch funktionieren, wenn die Fenstergröße verändert wird.

    Darf zwischen den Bildern ein Abstand entstehen? Wenn nicht wird es schwierig, da man mit HTML (eigentlich) keine Bilder skalieren kann.

    Gruß,
    Felix

    --
    Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Denn jedermann ist überzeugt, dass er genug davon habe.
    René Descartes
    1. Nein, die Bilder sollen in der Größe nicht verändertert werden, der Abstand soll sich "bewegen".

      1. Nein, die Bilder sollen in der Größe nicht verändertert werden, der Abstand soll sich "bewegen".

        Mein Vorschlag wär der gleiche wie der von Steel: Absolute Positionierung. Auch vertikale Zentrierung kannst du annährend mit top:50% erreichen. Um absolut positionierte Elemente exakt vertikal zu zentrieren musst du Google zu Rate ziehen, da bin ich spontan überfragt.

        Gruß,
        Felix

        --
        Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Denn jedermann ist überzeugt, dass er genug davon habe.
        René Descartes
        1. Hi,

          Nein, die Bilder sollen in der Größe nicht verändertert werden, der Abstand soll sich "bewegen".

          Falls ich das richtig verstanden habe, ginge so z.B.:
          http://www.scherkamp.de/mfg/neunkleinebilderlein/

          Das größere Problem ist halt, das sich die Bilder überlagern bei geringerer Fenstergröße - dafür müsste dann noch ein Container drumrum, mit einer min-height/min-width oder ähnliches.

          Gruß

          Marcel

          1. @Marshall: oh, absolut genial, vielen Dank für die schöne Lösung.

            Meine Haupt-Lücke war, dass ich immer nur mit px-Angaben probiert habe, nicht mit %.

  2. Hi!

    Hast Du bei den Eckbildern schonmal versucht mit position:absolute zu arbeiten? Du legst dann einfach die jeweiligen Punkte fest:
    links oben: left und top 0
    rechts oben: right und top 0
    links unten: left und bottom 0
    rechts unten: right und bottom 0

    zentrieren kannst du mit margin: auto. JEdenfalls funktioniert das horizontal. beim vertikalen zentrieren wirds etwas schwieriger. Da wuesst ich spontan nichts was garantiert funktioniert.

    1. ja, natürlich habe ich es mit position absolute versucht, allein es läuft nicht so, wie ich das möchte ...

      Der Schwierigkeitsgrad bei dieser scheinbar einfachen Aufgabe ist doch sehr hoch ...

      1. Ja wie laeuft es denn?

  3. Hi,

    ich begreife das div-tag nicht.
    9 kleine Grafiken sollen auf Bildschirmen mit beliebiger Auflösung folgendermaßen angeordnet werden:

    Wo ist der Zusammenhang zwischen diesen beiden Sätzen?

    Du willst 9 Bilder positionieren.
    Dazu brauchst Du kein div-tag (brauchst dieses also auch nicht zu begreifen).

    Die Positionierung an Bildschirmgrenzen ist selbstverständlich nicht möglich, der Bildschirmrand ist für CSS unerreichbar.

    Solltest Du mit Bildschirm den Webseitendarstellungsbereich des Browsers (a/k/a Viewport) meinen:

    Bild 1: position:absolute; left:0; top:0;
    Bild 2: position:absolute; left:50%; top:0; margin-left:-20px; /* ersetze 20px durch die halbe Breite des Bildes */
    Bild 3: position:absolute; right:0; top:0;
    Bild 4: position:absolute; left:0; top:50%; margin-top:-20px; /* ersetze 20px durch die halbe Höhe des Bildes */
    Bild 5: position:absolute; left:50%; top:50%; margin-top:-20px; margin-left:20px; /* s.o.*/
    usw.

    Bild5: mitte mitte
    Bild6: mitte rechts
    Bild6 soll immer zentriert auf dem Bildschirm liegen,

    Das ist widersprüchlich. Soll Bild6 zentriert (also über Bild 5) oder rechts auf dem Bildschirm liegen?

    die anderen Bilder sollen symmetrisch am Bildschirmrand angeordnet werden. Das soll natürlich auch funktionieren, wenn die Fenstergröße verändert wird.

    Wenn die Bilder tatsächlich am Bildschirmrand positionierbar wären, wäre eine Fenstergrößenänderung vollkommen wurscht.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.