Ergebnis 1 bis 5 von 5
Thema: Mehere canvases anordnen
-
30-01-2018, 10:12 #1
Mehere canvases anordnen
Hi, dieses css treibt mich noch in den Wahnsinn.
Habe mehrere canvas, die in den div's dargestellt werden sollen wie im HTML Dom.
Code:<!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> #rahmen{ width: 100% height: 100% } #mainVolume{ margin: 5px; } #leftBank{ float: left; border: 1px solid black; width: 350px; height: 1000px; } #rightBank{ float: right; border: 1px solid black; width: 350px; height: 1000px; } #center_LFE{ width: 650px; height: auto; margin: 0 auto; } #centerBank{ border: 1px solid black; width: 100%; height: 161px; } #left{ margin-left: 8px; float: left; } #right{ margin-right: 8px; float: right; } #center{ margin-left: 5px; float: right; } #LFE{ float: left; margin-right: 5px; } #leftSourroundBack{ margin-left: 8px; float: left; } #rightSourroundBack{ margin-right: 8px; float: right; } #leftSourround{ margin-left: 8px; float: left; } #rightSourround{ margin-right: 8px; float: right; } </style> </head> <body onload="run()"> <div id="rahmen"> <div id="centerBank"> <div id="center_LFE"> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="LFE" width="320" height="160"></canvas> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="center" width="320" height="160"></canvas> </div> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="left" width="320" height="160"></canvas> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="right" width="320" height="160"></canvas> </div> <div id="leftBank"> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="leftSourroundBack" width="320" height="160"></canvas> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="rightSourround" width="320" height="160"></canvas> </div> <div id="rightBank"> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160" id="rightSourroundBack" width="320" height="160"></canvas> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="rightSourround" width="320" height="160"></canvas> </div> <div class="block center"> <div id="mainVolume">Volume Here</div> </div> </div> </body> </html>
<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="left" width="320" height="160"></canvas>
<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="right" width="320" height="160"></canvas>
sind alle außerhalb von <div id="centerBank">
Und dadurch kommt alles durcheinander. canvas "left" soll in <div id="centerBank"> links steh und canvas "right", rechts.
*die canvases werden später dynamisch erzeugt deswegen das unhübsche inline css.
-
30-01-2018, 18:10 #2
AW: Mehere canvases anordnen
Wenn du sowieso bei den Breiten und Höhen schon mit absoluten Pixelzahlen arbeitest, warum positionierst du die canvas dann nicht einfach mit position: absolute;?
-
30-01-2018, 19:01 #3
AW: Mehere canvases anordnen
Ich kann die Position auf "absolute" stellen aber daran ändert sich nichts.
Welche absoluten Pixelzahlen meinst du konkret, die css Angaben widht, height, habe ich aus Verzweiflung da stehen.
Css angaben weg und..es hat sich nichts verändert. Kann's auch mal irwo Hosten..
Ok, das das Problem ist dieses
HTML-Code:<div id="centerBank"> <div id="center_LFE"> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="LFE" width="320" height="160"></canvas> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="center" width="320" height="160"></canvas> </div> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="left" width="320" height="160"></canvas> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="right" width="320" height="160"></canvas> </div>
HTML-Code:<div id="centerBank"> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="left" width="320" height="160"></canvas> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="right" width="320" height="160"></canvas> <div id="center_LFE"> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="LFE" width="320" height="160"></canvas> <canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160;" id="center" width="320" height="160"></canvas> </div> </div>
Aber die dynamisch Erstellung passiert nun mal nicht unbedingt in der Reihenfolge. Oder muss ich dann prepend nutzen?
Code:function generateCanvas(chStr){ //<canvas style="background-color: rgba(51, 51, 51, 0.4); width=320; height=160; id="'+chStr.trim()+'" width="320" height="160" let canvas = $("<canvas></canvas>").css({ backgroundColor: "rgba(51, 51, 51, 0.4)", width : 320, height: 160 }).attr({ id: chStr, width : 320, height: 160 }); switch(chStr){ case "right"://channel 1 right channel $("#centerBank").append(canvas); break; case "center": //channel 2 center channel $("#center_LFE").append(canvas); break; case "LFE": //channel 3 LFE channel $("#center_LFE").append(canvas); break; case "leftSourroundBack": //channel 4 links hinten $("#leftBank").append(canvas); break; case "rightSourroundBack"://channel 5 rechts hinten $("#rightBank").append(canvas); break; case "leftSourround"://channel 6 links mitte $("#leftBank").append(canvas); break; case "rightSourround"://channel 7 rechts mitte $("#rightBank").append(canvas); break; //channel 0 left channel default: $("#centerBank").append(canvas); } }
Geändert von xorg1990 (30-01-2018 um 19:19 Uhr)
-
30-01-2018, 20:30 #4
AW: Mehere canvases anordnen
Wenn du absolute Positionierung verwendest, musst du natürlich mit top, left, right oder bottom sagen, wo du es haben willst.
prepend() klingt nach einer guten Idee, wenn du damit dein CSS gelöst bekommst.
-
31-01-2018, 10:30 #5
Ähnliche Themen
-
[FRAGE] mehere IDs selektieren
Von Ciatronical im Forum JavaScriptAntworten: 3Letzter Beitrag: 27-03-2015, 15:26 -
Mehere Id's einlesen
Von DeltaC im Forum JavaScriptAntworten: 2Letzter Beitrag: 27-04-2011, 11:14 -
Mehere Submit
Von Hans_James im Forum JavaScriptAntworten: 5Letzter Beitrag: 12-08-2009, 12:40 -
Mehere Operanden mit || vergleichen
Von Borsti93 im Forum JavaScriptAntworten: 2Letzter Beitrag: 07-01-2009, 17:07 -
mehere Forumlare auswerten
Von Snake87 im Forum JavaScriptAntworten: 2Letzter Beitrag: 16-02-2008, 14:20
Lesezeichen