Hey,
ich bin im Webdesign nicht zu Hause und seit etlichen Stunden am verzweifeln.
Leider muss ich mein Problem gerade beschreiben ohne Code einstellen zu können.
Ich möchte ein Layout erstellen, dass oben einen Schriftzug und ein paar Funktionsbuttons enthält, dann kommt ein Hauptfeld, dass ein quadratisches Canvas (genaugenommen mehrere übereinander mittels position:absolute und z-index) darstellen soll, darunter kommen ein paar Schieberegler und ganz unten nochmal Funktionsbuttons.
Nun geht es mir darum, dass das Canvas jederzeit maximal groß, jedoch das Ganze ohne Scrollleisten dargestellt wird. Die Seitenränder des Canvas sollen auch gleichzeig die seitlichen Grenzen des Layouts darstellen, soweit dadurch keine Inhalte verloren gehen.
Im ersten Versuch habe ich es innerhalb eines Grid-Layouts probiert, die Zeilen auf Auto, nur die Canvas-Zeile auf 1fr. Im Canvas-Bereich befindet sich ein DIV, welche ich per Prozentangabe auf maximale Höhe gebracht habe, Seitenverhältnis dann per Aspect-Ratio gesetzt. Dann einfach die Canvas-Elemente mit prozentualen Werten in das DIV maximiert.
Zum Einen habe ich da das Problem, dass das Ganze nur mit mit Höhenänderung wie gedacht funktioniert, sobald der Viewport zu schmal wird, wird das Canvas abgeschnitten, da das ganze ja von der zur Verfügung stehenden Höhe abhängt. Dazu kommt noch, dass sich das restliche Grid bei großem Canvas nicht an seine Grenzen anpasst. Ich habe mit dem ganzen Kram keine Erfahrung aber ich nehme mal an das liegt an der absoluten Position.
Seit dem Versuch habe ich vieles ausprobiert, auch per JS, und bin immer wieder irgendwo gescheitert. Aber vielleicht sehe ich ja auch den Wald vor lauter Bäumen nicht mehr. Habt ihr einen Lösungsansatz?
Danke
Chris
ich bin im Webdesign nicht zu Hause und seit etlichen Stunden am verzweifeln.
Leider muss ich mein Problem gerade beschreiben ohne Code einstellen zu können.
Ich möchte ein Layout erstellen, dass oben einen Schriftzug und ein paar Funktionsbuttons enthält, dann kommt ein Hauptfeld, dass ein quadratisches Canvas (genaugenommen mehrere übereinander mittels position:absolute und z-index) darstellen soll, darunter kommen ein paar Schieberegler und ganz unten nochmal Funktionsbuttons.
Nun geht es mir darum, dass das Canvas jederzeit maximal groß, jedoch das Ganze ohne Scrollleisten dargestellt wird. Die Seitenränder des Canvas sollen auch gleichzeig die seitlichen Grenzen des Layouts darstellen, soweit dadurch keine Inhalte verloren gehen.
Im ersten Versuch habe ich es innerhalb eines Grid-Layouts probiert, die Zeilen auf Auto, nur die Canvas-Zeile auf 1fr. Im Canvas-Bereich befindet sich ein DIV, welche ich per Prozentangabe auf maximale Höhe gebracht habe, Seitenverhältnis dann per Aspect-Ratio gesetzt. Dann einfach die Canvas-Elemente mit prozentualen Werten in das DIV maximiert.
Zum Einen habe ich da das Problem, dass das Ganze nur mit mit Höhenänderung wie gedacht funktioniert, sobald der Viewport zu schmal wird, wird das Canvas abgeschnitten, da das ganze ja von der zur Verfügung stehenden Höhe abhängt. Dazu kommt noch, dass sich das restliche Grid bei großem Canvas nicht an seine Grenzen anpasst. Ich habe mit dem ganzen Kram keine Erfahrung aber ich nehme mal an das liegt an der absoluten Position.
Seit dem Versuch habe ich vieles ausprobiert, auch per JS, und bin immer wieder irgendwo gescheitert. Aber vielleicht sehe ich ja auch den Wald vor lauter Bäumen nicht mehr. Habt ihr einen Lösungsansatz?
Danke
Chris
