nicht angemeldet
Rahmen über- und nebeneinander positionieren und dann alle zusammen nach Fenstergröße skalieren?
Der MartinRahmen über- und nebeneinander positionieren und dann alle zusammen nach Fenstergröße skalieren?
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:
-
Meine Lösung wird aus einer Datenbank errechnet. Und ich möchte zunächst "wirkliche" Millimeterwerte als width und height verwenden.
-
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!
-
Hallo,
ohne sinnvollen Inhalt ist wohl nicht nachvollziehbar was du überhaupt willst.
Ich sehe in der Anordnung keinen Sinn. Auf "position: absolute" solltest du verzichten. Gleiches gilt für das massenhafte "z-index".
Und was ist für dich der Internet-Explorer von Windows 7? Im Gegensatz zu älteren Windows-Versionen wird der IE automatisch aktualisiert. Von daher ist der IE von Windows 7 im allgemeinen der IE 11.
Gruss
MrMurphy
-
Moin, MrMurphy1,
ohne sinnvollen Inhalt ist wohl nicht nachvollziehbar was du überhaupt willst.
ich möchte Fliesen auf einem Grundriß so anordnen, daß man sieht, wie die Fugen laufen und wo Fliesen geschnitten werden müssen.
Ich sehe in der Anordnung keinen Sinn. Auf "position: absolute" solltest du verzichten. Gleiches gilt für das massenhafte "z-index".
Genau das ist mein Ziel: Nur ein style für die immer gleichgroße Fliese, also auch nur 1 z-index.
Und was ist für dich der Internet-Explorer von Windows 7?
…
In meinem Fall wird die Engine des Internet Explorers in FileMaker 10 für den Web Viewer verwendet. Und die wird anscheinend für FileMaker nicht aktualisiert. Das schlußfolgere ich aus der Beobachtung, daß SVG immer noch nicht dargestellt wird. IE11 könnte mWn SVG. Leider bin ich aus anderen Gründen an FileMaker 10 gekettet. :-) Nun hoffe ich auf xhtml und andere Lösungen. Das Erstaunliche: Meine Aufgabenstellung läuft auf Mac seit 10 Jahren mit SVG. Nun muß ich schauen, ob es für Windows auch eine Lösung gibt.
Danke für Deine Beschäftigung mit meiner Aufgabe.
-
Hi,
Und was ist für dich der Internet-Explorer von Windows 7?
eine sehr berechtigte Frage. Windows 7 kommt ursprünglich mit IE8, "der Internet-Explorer von Windows 7" kann also von 8 bis derzeit 11 alles sein.
Im Gegensatz zu älteren Windows-Versionen wird der IE automatisch aktualisiert.
Das stimmt nicht ganz. Ein Upgrade des IE von einer Hauptversion zur nächsthöheren wird AFAIK nicht automatisch durchgeführt, sondern nur nach ausdrücklicher Zustimmung des Nutzers - die aber vermutlich die meisten Nutzer geben werden.
Von daher ist der IE von Windows 7 im allgemeinen der IE 11.
Die Wahrscheinlichkeit ist groß, aber definitiv <1.
Ciao,
Martin-
Moin, Martin,
meine Frage gilt denjenigen Internet Explorern, die SVG noch nicht können. Weil ich noch nicht weiß, wo und wie die Version eines Windows-Programms nachgeschaut werden kann, eben meine Angabe über Windows 7. Über Eigenschaften finde ich bisher keine Programmversion. Windows-newbie/greenhorn.
Nun ist meine Aufgabe, die Anordnung vieler Objekte ohne SVG hinzubekommen. :-) Mal sehen …
Norbert
-
-
-
Vielen Dank für kritische Fragen und Anregungen.
Die Internet-Explorer-Engine in FileMaker Pro 10 ist nicht die von Windows 7; sie kann aside nicht.
Meine Lösung liegt darin, daß ich auf jede Skalierung verzichtet habe und meine großen Millimeterangaben auf 1/10 px umgerechnet habe. Die Darstellung am Bildschirm ist klein und doch genügend aussagekräftig.
Die Einzelobjekte (Rechtecke) erzeugte ich mit div und als Text.
Im css ist position: absolute notiert und nur die style-Angaben, die bei den meisten Objekten gleich sind. Die unterschiedlichen Positionen left und top sind im body bei den div notiert.
Dadurch wurde der Code sehr übersichtlich und knapp. Wenig mehr als je eine Zeile für die Objekte.
Wenn erstmal das Lernpensum geschafft ist, ist FileMaker Pro in Verbindung mit Internetsprache HTML css eine nützliche Sache, auch für graphische 2D-Darstellung.