all px values now in mytest.html

3 files changed, 95 insertions, 91 deletions

diff --git a/examples/adding_up_to_10/css/mytest.css b/examples/adding_up_to_10/css/mytest.css
index 2f27eaa..49ca07a 100755
--- a/examples/adding_up_to_10/css/mytest.css
+++ b/examples/adding_up_to_10/css/mytest.css
@@ -1,14 +1,15 @@
 
 #main {
-height:95%;
+width:800px;
+height:600px;
 position:absolute;
-width:100%;
 }
 #action {
 float:left;
-height:100%;
 position:relative;
-width:80%;
+width: 650px;
+height: 600px;
+
 }
 #sidebar {
 background-image: url(../assets/generic/images/sidebar.png);
@@ -17,31 +18,27 @@ background-image: url(../assets/generic/images/sidebar.png);
 -moz-background-origin:padding;
 background:none none repeat scroll 0 0;
 float:left;
-height:100%;
+height:600px;
 position:relative;
-width:20%;
+width:150px;
 }
 #actionTop {
-height:50%;
+width: 650px;
+height: 300px;
 position:relative;
-width:100%;
 }
 #actionBottom {
 clear:both;
 float:left;
-height:50%;
+width: 650px;
+height: 300px;
 position:relative;
-width:100%;
 }
 #actionTopLeft {
--moz-background-clip:border;
--moz-background-inline-policy:continuous;
--moz-background-origin:padding;
-background:none none repeat scroll 0 0;
 float:left;
-height:100%;
+width: 300px;
+height: 300px;
 position:relative;
-width:45%;
 }
 #actionTopMiddle {
 -moz-background-clip:border;
@@ -49,68 +46,55 @@ width:45%;
 -moz-background-origin:padding;
 background:none none repeat scroll 0 0;
 float:left;
-height:100%;
+width: 50px;
+height: 300px;
 position:relative;
-width:10%;
 }
 #actionTopRight {
--moz-background-clip:border;
--moz-background-inline-policy:continuous;
--moz-background-origin:padding;
-background:none none repeat scroll 0 0;
 float:left;
-height:100%;
+width: 300px;
+height:300px;
 position:relative;
-width:45%;
 }
 #actionTopLeftBox {
 -moz-background-clip:border;
 -moz-background-inline-policy:continuous;
 -moz-background-origin:padding;
 background:none none repeat scroll 0 0;
-height:70%;
-left:30%;
+width: 200px;
+height: 200px;
+left: 75px;
 position:absolute;
-top:20%;
-width:60%;
+top:50px;
 }
 #actionTopLeftCanvas {
 -moz-background-clip:border;
 -moz-background-inline-policy:continuous;
 -moz-background-origin:padding;
 background:none none repeat scroll 0 0;
-height:70%;
-left:30%;
 position:absolute;
-top:20%;
-width:60%;
+top: 50px;
+left: 75px;
 }
 #plussign {
-left:25%;
-position:absolute;
-top:60%;
+display: block;
+margin-left: auto;
+margin-right: auto;
+margin-top: 150px;
 }
 #actionTopRightBox {
--moz-background-clip:border;
--moz-background-inline-policy:continuous;
--moz-background-origin:padding;
 background: none none repeat scroll 0 0;
-height:70%;
+width: 200px;
+height: 200px;
 position:absolute;
-right:30%;
-top:20%;
-width:60%;
+right: 50px;
+top: 50px;
 }
 #actionTopRightCanvas {
--moz-background-clip:border;
--moz-background-inline-policy:continuous;
--moz-background-origin:padding;
 background:none none repeat scroll 0 0;
-height:70%;
 position:absolute;
-right:30%;
-top:20%;
-width:60%;
+right:50px;
+top:50px;
 }
 
 .actionBottom {
@@ -119,38 +103,57 @@ width:60%;
 -moz-background-origin:padding;
 background:none none repeat scroll 0 0;
 float:left;
-height:100%;
+width: 216.5px;
+height: 300px;
 position:relative;
-width:33.3%;
 }
 
 .actionBottomBox {
-left:10%;
-position:absolute;
-width:75%;
-height:75%;
-top:10%;
+    left:25px;
+    position:absolute;
+    width: 200px;
+    height: 200px;
+    top: 20px;
 }
 
-#sidebar section {
+.sidebarItem {
     clear:both;
     float:left;
-    height:33%;
-    position:relative;
-    width:100%;
+    width:150px;
+    height: 200px;
+    position: relative;
 }
 
 #timer {
-display:block;
-height:60%;
-margin:auto;
-width:60%;
+position:absolute;
+width:100px;
+height:150px;
+top:10px;
+left:25px;
 }
+
+#timerCanvas {
+position:absolute;
+width:100px;
+height:150px;
+top:10px;
+left:25px;
+}
+
 #scorebox {
-display:block;
-height:60%;
-margin:auto;
-width:60%;
+position:absolute;
+width:100px;
+height:150px;
+top:10px;
+left:25px;
+}
+
+#scoreboxCanvas {
+position:absolute;
+width:100px;
+height:150px;
+top:10px;
+left:25px;
 }
 
 #chimpDiv {
diff --git a/examples/adding_up_to_10/mytest.html b/examples/adding_up_to_10/mytest.html
index 85ef470..e4a175e 100755
--- a/examples/adding_up_to_10/mytest.html
+++ b/examples/adding_up_to_10/mytest.html
@@ -17,16 +17,16 @@
       <div id="actionTop">
 
 	<div id="actionTopLeft">
-	  <img id="actionTopLeftBox" src="assets/generic/images/yellowBox.png" alt="" />
-	  <canvas id="actionTopLeftCanvas"></canvas>
+	  <img id="actionTopLeftBox" src="assets/generic/images/yellowBox.png" alt="" class="actionTopSide" />
+	  <canvas id="actionTopLeftCanvas" width="200px" height="200px"></canvas>
 
 	</div>
 	<div id="actionTopMiddle">
 	  <img id="plussign" src="assets/generic/images/plussign.png" alt=""/>
 	</div>
-	<div id="actionTopRight">
+	<div id="actionTopRight" class="actionTopSide">
 	  <img id="actionTopRightBox" src="assets/generic/images/yellowBox.png" alt=""/>
-	  <canvas id="actionTopRightCanvas"></canvas>
+	  <canvas id="actionTopRightCanvas" width="200px" height="200px"></canvas>
 	</div>
 
       </div>
@@ -35,37 +35,39 @@
 	<!-- <canvas id="actionBottomCanvas"></canvas> -->
 	<div id="actionBottomLeft" class="actionBottom">
 	  <img class="actionBottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
-	  <canvas class="actionBottomBox"> </canvas>
+	  <canvas id="actionBottomLeftCanvas" class="actionBottomBox" width="200px" height="200px"> </canvas>
 	</div>
 	<div id="actionBottomMiddle" class="actionBottom">
 	  <img class="actionBottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
-	  <canvas class="actionBottomBox"> </canvas>
+	  <canvas id="actionBottomMiddleCanvas" class="actionBottomBox" width="200px" height="200px"> </canvas>
 	</div>
 	<div id="actionBottomRight" class="actionBottom">
 	  <img class="actionBottomBox" src="assets/generic/images/yellowBox.png" alt=""/>
-	  <canvas id="actionBottomRightCanvas" class="actionBottomBox"> </canvas>
+	  <canvas id="actionBottomRightCanvas" class="actionBottomBox" width="200px" height="200px"> </canvas>
 	</div>
 
       </div>
 
     </div>
-    <aside id="sidebar">
-      <section>
-	<img id="timer" class="sidebarItem" src="assets/generic/images/scorebox.png" alt=""/>
+    <div id="sidebar">
+      <div class="sidebarItem">
+	<img id="timer" src="assets/generic/images/scorebox.png" alt=""/>
+	<canvas id="timerCanvas" width="100" height="150" />
 	<img id="banana" src="assets/generic/images/banana.png" alt=""/>
 	<img id="ball" src="assets/generic/images/ball.png" alt=""/>
-      </section>
-      <section>
-	<img id="scorebox" class="sidebarItem" src="assets/generic/images/scorebox.png" alt=""/>
-      </section>
-      <section>
-	<div id="chimpDiv"><img id="chimp" class="sidebarItem" src="assets/generic/images/normalChimp_200x209.png" alt=""/></div>
-      <button id="buttonReset" class="sidebarItem">RESET</button>
+      </div>
+      <div class="sidebarItem">
+	<img id="scorebox" src="assets/generic/images/scorebox.png" alt=""/>
+	<canvas id="scoreboxCanvas" width="100" height="150" />
+      </div>
+      <div class="sidebarItem">
+	<img id="chimp" src="assets/generic/images/normalChimp_200x209.png" alt=""/>
+	<button id="buttonReset">RESET</button> 
 
-      </section>
+      </div>
 
 
-    </aside>
+    </div>
 
 
   </div>
diff --git a/experiments/mytest1.html b/experiments/mytest1.html
index 51f2437..2c45126 100644
--- a/experiments/mytest1.html
+++ b/experiments/mytest1.html
@@ -15,7 +15,7 @@
        var bananaImg = document.getElementById('banana');
 
        ltCtx.drawImage(ballImg, 0, 0, 77, 77);
-       ltCtx.drawImage(ballImg, 77, 100, 77, 77);
+       ltCtx.drawImage(ballImg, 0, 0, 77, 77, 70, 70, 77, 77);
 
 
    }, false);
@@ -45,10 +45,9 @@
 }
 
 .canvas {
-//    width: 300px;
-//    height: 300px;
     position: absolute;
     top: 10%;
+    border: black 2px solid;
 }
 
 /*#image {
@@ -63,7 +62,7 @@
   <div id="main">
     <div class="side">
       <img id="leftBox" src="yellowBox300px.png" alt="" class="boxImg" />
-      <canvas id="leftCanvas" class="canvas"></canvas>
+      <canvas id="leftCanvas" class="canvas" width="300px" height="300px"></canvas>
     </div>
 
     <div class="side">