diff options
| author | Bryan Berry <bryan@olenepal.org> | 2009-10-22 21:12:46 (GMT) |
|---|---|---|
| committer | Bryan Berry <bryan@olenepal.org> | 2009-10-22 21:12:46 (GMT) |
| commit | 4b2b0d29035d29d30efc036d467954e05972a2ed (patch) | |
| tree | 8dbcb49b790da44bf9358eb172e72231708c73ed | |
| parent | ace7c60a4db72b05fb24fc79af74d9b9ce0f348c (diff) | |
layout is finally sane. Now need to properly align text.
| -rwxr-xr-x | examples/quadrilaterals/css/lesson.css | 70 | ||||
| -rwxr-xr-x | examples/quadrilaterals/index.html | 80 |
2 files changed, 76 insertions, 74 deletions
diff --git a/examples/quadrilaterals/css/lesson.css b/examples/quadrilaterals/css/lesson.css index f37eb8c..5163336 100755 --- a/examples/quadrilaterals/css/lesson.css +++ b/examples/quadrilaterals/css/lesson.css @@ -5,37 +5,61 @@ height: 400px; } -#Karma -{ - position: relative; +#leftArea { + width: 60%; + display: inline; + float: left; + height: 100%; } -#canvasDrawing -{ - position: absolute; - top: 0px; - left: 0px; +#rightArea { + width: 40%; + display: inline; + float: left; + height: 100%; } -#canvasTmp -{ - position: absolute; - top: 0px; - left: 0px; +#leftTop { + height: 20%; +} + +#leftMiddle { + height: 60%; } -#btnerase +#leftBottom { + height: 20%; + float: left; +} + + +#rightTop { + height: 30%; +} + +#rightMiddle { + height: 40%; +} + +#rightBottom { + height: 30%; +} + + + + + + +#Karma { - position: absolute; - top: 270px; - left: 130px; + position: relative; } -#btn +.canvas { position: absolute; - top: 180px; - left: 400px; + top: 0px; + left: 0px; } #left @@ -44,7 +68,7 @@ width: 350px; } -#right -{ - margin-left: 350px; +.left { + float:left; } + diff --git a/examples/quadrilaterals/index.html b/examples/quadrilaterals/index.html index 68f840e..95dc4fd 100755 --- a/examples/quadrilaterals/index.html +++ b/examples/quadrilaterals/index.html @@ -13,63 +13,41 @@ <script type="text/javascript" src="../../js/jquery.jgrowl_minimized.js"></script> <script type="text/javascript" src="js/lesson.js"></script> </head> - -<!-- <body> - - <noscript> - Man, you need to enable JavaScript. - </noscript> - - <div id="main"> - - Construct a quadrilateral by moving the given straight lines to appropriate places - Make quadrilaterals on geo-board - - - - <div id="Karma" class="kanimation"> - - <img id="imgBg" src="images/bg.png" - <img id="imgPrev" src="images/previous.png" /> - <img id="imgNext" src="images/next.png" /> - <img id="btnErase" src="images/erase.png" /> - <canvas id="canvas" width="550" height="400"></canvas> - <canvas id="canvasDrawing" width="550" height="400"></canvas> - <canvas id="canvasTmp" width="550" height="400"></canvas> - </div> -</body> ---> - -<body> - <noscript> Man, you need to enable JavaScript. </noscript> <div id="main"> - <div id="left"> - Construct a quadrilateral by moving the given straight lines to appropriate places - </div> - <div id="right"> - Make quadrilaterals on geo-board - </div> - - <div id="Karma"> - <canvas id="canvas" width="550" height="400"></canvas> - <canvas id="canvasDrawing" width="550" height="400"></canvas> - <canvas id="canvasTmp" width="550" height="400"></canvas> - </div> - <div id="btn"> - <img id="imgPrev" src="images/previous.png" /> - <img id="imgNext" src="images/next.png" /> - </div> - <div id="erase"> - <img id="btnErase" src="images/erase.png" /> - </div> - - - + <div id="leftArea"> + <div id="leftTop"> + <div id="instruction" class="left bottom"> Construct a quadrilateral by moving + the given straight lines to appropriate places </div> + </div> + <div id="leftMiddle"> + <div id="Karma"> + <canvas id="canvas" class="canvas" width="550" height="400"></canvas> + <canvas id="canvasDrawing" class="canvas" width="550" height="400"></canvas> + <canvas id="canvasTmp" class="canvas" width="550" height="400"></canvas> + </div> + </div> + <div id="leftBottom"> + <img id="btnErase" src="images/erase.png" /> + </div> + </div> + <div id="rightArea" class="left"> + <div id="rightTop"> + </div> + <div id="rightMiddle"> + <div id="textExample">Make quadrilaterals on geo-board</div> + </div> + <div id="rightBottom"> + <div id="btn"> + <img id="imgPrev" src="images/previous.png" /> + <img id="imgNext" src="images/next.png" /> + </div> + </div> + </div> </div> </body> |