Ergebnis 1 bis 5 von 5
  1. 30-01-2018, 10:12 #1
    Avatar von xorg1990
    xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    835

    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>
    diese 2 canvas <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.
    DL0RCP.de || lostplace-dokfilm
    Zitieren Zitieren
  2. 30-01-2018, 18:10 #2
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.634

    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;?
    kkapsner.de
    Zitieren Zitieren
  3. 30-01-2018, 19:01 #3
    Avatar von xorg1990
    xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    835

    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>
    geändert nach:
    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>
    Und schon passt es.

    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)
    DL0RCP.de || lostplace-dokfilm
    Zitieren Zitieren
  4. 30-01-2018, 20:30 #4
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.634

    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.
    kkapsner.de
    Zitieren Zitieren
  5. 31-01-2018, 10:30 #5
    Avatar von xorg1990
    xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    835

    AW: Mehere canvases anordnen

    Jo, prepend funktioniert.
    DL0RCP.de || lostplace-dokfilm
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. [FRAGE] mehere IDs selektieren
    Von Ciatronical im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 27-03-2015, 15:26
  2. Mehere Id's einlesen
    Von DeltaC im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 27-04-2011, 11:14
  3. Mehere Submit
    Von Hans_James im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 12-08-2009, 12:40
  4. Mehere Operanden mit || vergleichen
    Von Borsti93 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 07-01-2009, 17:07
  5. mehere Forumlare auswerten
    Von Snake87 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-02-2008, 14:20

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln