N Lindenthal: Rahmen über- und nebeneinander positionieren und dann alle zusammen nach Fenstergröße skalieren?

Beitrag lesen

SELF-Forum

Rahmen über- und nebeneinander positionieren und dann alle zusammen nach Fenstergröße skalieren?

N Lindenthal (Versionen)
– Informationen zu den Bewertungsregeln

Moin,

eine Lösung konnte mit CSS und mit den Größenangaben vw/vh verwirklicht werden. So weit so gut. Sie muß unbedingt im Internet Explorer von Windows 7 laufen können.

Ich würde gerne zwei Dinge verbessern/vereinfachen:

  1. Meine Lösung wird aus einer Datenbank errechnet. Und ich möchte zunächst "wirkliche" Millimeterwerte als width und height verwenden.

  2. Die Größenangaben würde ich lieber am Objekt im body angeben. Sonst muß nämlich nach meinem Kenntnisstand für jedes gleichgroße Objekt im style/css ein eigenes Element vorgehalten werden.

Hier meine Lösung, die ich verbessern möchte:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mein Versuch z-index</title>
    <style>
      main { position: absolute; } 
      aside { position: absolute; padding: 0; } 
      #element1 { background-color: rgba(255, 200,  20, .6); border: 1vh solid  #C90; width: 90vw; height: 58.5vh; left: 5vw; top: 20vh; z-index: 1; } 
      #element2 { background-color: rgba(200, 200, 200, .4); border: 1px dashed #F00; width: 20vw; height: 20vh; left: 2vw; top: 0vh; z-index: 2; } 
      #element3 { background-color: rgba(200, 200, 200, .4); border: 1px dashed #F00; width: 20vw; height: 20vh; left: 2vw; top: 20vh; z-index: 2; } 
      #element4 { background-color: rgba(200, 255, 200, .4); border: 1px dashed #F00; width: 20vw; height: 20vh; left: 2vw; top: 40vh; z-index: 2; } 
      #element5 { background-color: rgba(200, 200, 200, .4); border: 1px dashed #F00; width: 20vw; height: 20vh; left: 2vw; top: 60vh; z-index: 2; } 
      #element6 { background-color: rgba(200, 200, 200, .4); border: 1px dashed #F00; width: 20vw; height: 20vh; left: 22vw; top: 0vh; z-index: 2; } 
      #element7 { background-color: rgba(200, 200, 200, .4); border: 1px dashed #F00; width: 20vw; height: 20vh; left: 22vw; top: 20vh; z-index: 2; } 
      #element8 { background-color: rgba(200, 200, 200, .4); border: 1px dashed #F00; width: 20vw; height: 20vh; left: 22vw; top: 40vh; z-index: 2; } 
      #element9 { background-color: rgba(200, 200, 200, .4); border: 1px dashed #F00; width: 20vw; height: 20vh; left: 22vw; top: 60vh; z-index: 2; }
    </style>
  </head>
  <body>
    <main role="main">
	<aside id="element1">Grundriß</aside>
	<aside id="element2">2</aside>
	<aside id="element3">3</aside>
	<aside id="element4">4</aside>
	<aside id="element5">5</aside>
	<aside id="element6">6</aside>
	<aside id="element7">7</aside>
	<aside id="element8">8</aside>
	<aside id="element9">9</aside>
    </main>
    <aside id="element" position: absolute; padding: 0; background-color: rgba(255, 0,  0, .6); border: 1vh solid  #C90; width: 90vw; height: 80vh; left: 5vw; top: 20vh; z-index: 3; align: center>huhu</aside>
  </body>
</html>

Die Aufgabe:

Über einer Fläche (Bad-Grundriß/z-index 1) sollen kleine Flächen mit Randüberstand angeordnet werden (Fliesen/z-index 2). Das browser-Fenster soll gut ausgefüllt sein, egal wie groß das browser-Fenster aufgezogen ist.

Über Tips würde ich mich sehr freuen!

Beitrag melden
–
Informationen zu den Bewertungsregeln