Layouts

[Tachu]

Hallo,
ich möchte gerne die Rechtecke im beigefügten Beispiel so positionieren, dass sie prozentuale Anteile der Höhe und Länge des Sichtfensters sind.

Ich habe es mit dem position style versucht aber vermute, dass hier die Werte nur in pixel angegeben werden, ansonsten drohen Überlappungen. CSS grid scheint zu rigide für diese freien Positionen. Und flexbox erlaubt vermutlich nur top, center, bottom, left und right.
Hat jemand eine Idee wie man hier ansetzen könnte, oder ist so ein Layout eher unrealistisch?

Vielen Dank, Tachu.

 

[Sempervivum]

Unrealistisch ist das nicht, nur ein wenig ungewöhnlich. Wahrscheinlich kommt man in diesem speziellen Fall nicht daran vorbei, etwas zu tun, wovon sonst ab geraten wird, nämlich die Rechtecke absolut zu positionieren und dabei Positionen und Abmessungen in Prozentwerten anzugeben. Dann wird es auch nicht zu Überlappungen kommen, weil sich die Container prozentual ändern wenn sich die Größe des Browserfensters ändert.
Ein Problem wird die Schrift darin sein: Sind die Container groß, kann die Schrift ein wenig verloren darin aussehen und, anders herum, sind sie klein, passt sie nicht mehr hinein. Natürlich kann man in gewissen Grenzen auch die Schriftgröße anpassen allerdings darf sie nicht zu klein und unleserlich werden.
Soll die Seite auch auf dem Handy angesehen werden? Dann wirst Du nicht daran vorbei kommen, das Layout für das Hochformat anders zu gestalten, weil es so für ein Querformat ausgelegt ist.

 

[Tachu]

Hallo Sempervivum,
besten Dank für Deine ausführliche Antwort.
Ich merke grade, dass ich mich nicht richtig ausgedrückt habe.
Statt: "ich möchte gerne die Rechtecke im beigefügten Beispiel so positionieren, dass sie prozentuale Anteile der Höhe und Länge des Sichtfensters sind." muss es heissen: "ich möchte gerne die Rechtecke im beigefügten Beispiel so positionieren, dass deren Positionen prozentuale Anteile der Höhe und Länge des Sichtfensters sind. Ihre Abmessungen sollen gleich bleiben."
Wenn eine gewisse minimale Sichtfenstergrösse unterschritten wird, werden ja, glaube ich, Scrolleisten angezeigt.

Mit dieser Voraussetzung kann es dann mit absoluten Positionen in prozentualen Werten realisiert werden?

Für's handy ist es nicht gedacht, aber Danke für den Hinweis!

 

[Sempervivum]

Verstehe. Dann müsstest Du nur die Positionen in Prozentwerten angeben und die Abmessungen fest in px. Wenn Du dem umschließenden Container eine minimale Breite gibst, sollten auch die Scrollbars automatisch eingeblendet werden, wenn das Browserfenster diese unterschreitet.

 

[Tachu]

Vielen Dank für Deine Hilfe!!