I studied CSS extensively the past two days, and I sort of managed to move it, but I still have two problems:
1. I can't position the layer-switcher-maximize button if I want to add an offset measured from the bottom (bottom: 40px). I can only display it if I specify an offset from the top - but my map size is not fixed, and I would like to have it linked to the bottom of the map. The rest of the div and the minimize button are displayed as expected. Here is my CSS override code: <style> .olControlLayerSwitcher { /* position: absolute; top: 25px; right: 0px; */ width: 20em; font-family: sans-serif; font-weight: bold; margin-top: 3px; margin-left: 3px; margin-bottom: 3px; font-size: smaller; color: white; background-color: transparent; position: relative !important; top: 350px !important; right: auto !important; bottom: auto !important; left: 0px !important; /* if I set top: auto !important and bottom: 40px !important, the div is no longer drawn on the screen */ } .olControlLayerSwitcher .layersDiv { padding-top: 5px; padding-left: 0px !important; padding-bottom: 5px; padding-right: 0px !important; background-color: darkblue; width: 100%; height: auto !important; } .olControlLayerSwitcher .layersDiv .baseLbl, .olControlLayerSwitcher .layersDiv .dataLbl { margin-top: 3px; margin-left: 3px; margin-bottom: 3px; } .olControlLayerSwitcher .layersDiv .baseLayersDiv, .olControlLayerSwitcher .layersDiv .dataLayersDiv { padding-left: 10px; } .olControlLayerSwitcher .maximizeDiv, .olControlLayerSwitcher .minimizeDiv { top: auto !important; right: auto !important; position: absolute !important; bottom: 40px !important; left: 0px !important; } 2. It seems that the corner effect in the layer selection div is done by having some spans with variable margins - but the problem is - these margins are designed only to generate the left rounded corner. I need to adapt them to generate the rigth corner with the same margin as the left corner. Question is - since there are no classes or ids, can I do this without changing the OL API? Here is how the current code looks like: <div style="background-color: transparent;"> <span style="background-color: darkblue; display: block; height: 1px; overflow: hidden; font-size: 1px; margin-left: 5px; margin-right: 0px; border-left-width: 0px; border-right-width: 0px; opacity: 0.75;"></span> And here's how it is supposed to look like in order to have rounded corners in the layer selection div on all sides (set the right-margin to the same value as the left-margin): <div style="background-color: transparent;"> <span style="background-color: darkblue; display: block; height: 1px; overflow: hidden; font-size: 1px; margin-left: 5px; margin-right: 5px; border-left-width: 0px; border-right-width: 0px; opacity: 0.75;"></span> I am not quite sure where these divs are set - so that I can override them. Hope somebody can shed light on these problems, Regards, Adrian _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users