added some css to actually show how to customize the panPanel and zoomPanel example look and feel

git-svn-id: http://svn.openlayers.org/trunk/openlayers@9737 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2009-10-09 14:02:47 +00:00
parent 13c5f5ac4c
commit 5b3f6f68d3
1 changed files with 35 additions and 0 deletions
--- a/examples/pan-zoom-panels.html
+++ b/examples/pan-zoom-panels.html
@@ -40,6 +40,41 @@
        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    }
    </script>
+    <style type="text/css">
+        .olControlPanPanel {
+             width: 100%;
+             height: 100%;
+             left: 0;
+             top: 0;
+        }
+        .olControlPanPanel .olControlPanNorthItemInactive {
+             left: 50%;
+             margin-left: -9px;
+             top: 0;
+        }
+        .olControlPanPanel .olControlPanSouthItemInactive {
+             left: 50%;
+             margin-left: -9px;
+             top: auto;
+             bottom: 0;
+        }
+        .olControlPanPanel .olControlPanWestItemInactive {
+             top: 50%;
+             margin-top: -9px;
+             left: 0;
+        }
+        .olControlPanPanel .olControlPanEastItemInactive {
+             top: 50%;
+             margin-top: -9px;
+             left: auto;
+             right: 0;
+        }
+       .olControlZoomPanel {
+             left: auto;
+             right: 23px;
+             top: 8px;
+       } 
+    </style>
 </head>
 <body onload='init();'>
    <h1 id="title">Pan and Zoom Panels</h1>