split zoom and menu areas
authorRobert Kaiser <kairo@kairo.at>
Fri, 14 Sep 2012 00:17:49 +0000 (02:17 +0200)
committerRobert Kaiser <kairo@kairo.at>
Fri, 14 Sep 2012 00:17:49 +0000 (02:17 +0200)
index.html
style/lantea.css

index 9ba8e18168b91cd3c9cb40ebeae6fb9d9ebf5a01..7a0753db876a7d5a18afe351b989f5e6bc9c61da 100644 (file)
 <body>
 <h1>Lantea Map</h1>
 
-<div id="overlayArea">
-<input type="button" id="zoomInButton" value="+"
-       onclick="zoomIn();">
-<span id="zoomLevel">Z</span>
-<input type="button" id="zoomOutButton" value="-"
-       onclick="zoomOut();"><br/>
+<div id="menuArea" class="overlayArea">
 <input type="button" id="trackButton" value="Track"
        onclick="toggleTrackArea();"><br/>
 <fieldset id="trackArea"><legend>Track</legend>
@@ -50,6 +45,14 @@ Map style:
 </fieldset>
 </div>
 
+<div id="zoomArea" class="overlayArea">
+<input type="button" id="zoomInButton" value="+"
+       onclick="zoomIn();"><br/>
+<span id="zoomLevel">Z</span><br/>
+<input type="button" id="zoomOutButton" value="-"
+       onclick="zoomOut();">
+</div>
+
 <p id="debug" class="debugHide"></p>
 <p id="copyright"></p>
 
index aa33469a67c01e34a6e85b184552f01a802656c5..b358a1d83deda6d7b510deab2f4c1225863aca74 100644 (file)
@@ -11,7 +11,7 @@ h1 {
   display: none;
 }
 
-#overlayArea {
+#menuArea {
   position: absolute;
   /* width: 30em; */
   left: 1%;
@@ -19,12 +19,20 @@ h1 {
   z-index: 5;
 }
 
-#overlayArea:-moz-system-metric(touch-enabled) {
+#zoomArea {
+  position: absolute;
+  right: 1%;
+  top: 1em;
+  z-index: 5;
+  text-align: center;
+}
+
+.overlayArea:-moz-system-metric(touch-enabled) {
   font-size: 3mozmm;
 }
 
-#overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
-#overlayArea select:-moz-system-metric(touch-enabled) {
+.overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
+.overlayArea select:-moz-system-metric(touch-enabled) {
   font-size: 2.5mozmm;
 }
 
@@ -92,10 +100,14 @@ h1 {
   body {
     font-size: 10px;
   }
-  #overlayArea {
+  #menuArea {
     top: 1px;
     left: 1px;
   }
+  #zoomArea {
+    top: 1px;
+    right: 1px;
+  }
   #copyright {
     bottom: 1px;
     right: 1px;