Pan and Zoom Panels

http://openlayers.org/dev/examples/pan-zoom-panels.html

HTML

<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
    <h1 id="title">Pan and Zoom Panels</h1>
    <div id="tags">
        panning, zooming, panel, CSS, style
    </div>
    <p id="shortdesc">
    Customizable pan and zoom panels
    </p>
    <div id="map" class="smallmap"></div>
    <p id="docs">
        The pan and zoom panels allow you to use CSS styling to change the
        look and feel of the panels, including changing their position
        and their icons without needing to change any code.
    </p>  
    
  <br />

  <p><a href="http://openlayers.org/dev/examples/pan-zoom-panels.html">Original OpenLayers
  Example</a>.</p>

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;
}

JavaScript

(function($) {

    var map;
    var lon = 5;
    var lat = 40;
    var zoom = 5;

    function init() {
        map = new OpenLayers.Map('map', {
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanPanel(),
                new OpenLayers.Control.ZoomPanel()
                ]
        });

        var wms = new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {
            layers: 'basic'
        });
        map.addLayers([wms]);

        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    }

    init();
})(jQuery);