Any suggestions on how to move the layer switcher icon to be relative to the bottom of the map?
On 07/16/2010 05:41 PM, Adrian Popa wrote: > 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 > > _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users