OpenLayers OpenLayers

Changeset 5951

Show
Ignore:
Timestamp:
01/31/08 12:45:04 (1 year ago)
Author:
enjahova
Message:

Updated nav button positioning

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • sandbox/enjahova/openlayers/theme/FREAC/style.css

    r5788 r5951  
    11/*various layer config stuff*/ 
    22#layers { 
    3    width: 200px; 
    4    border: 1px solid #000000; 
    5    font-size: 10px; 
    6    top: 100px; 
    7    position: absolute; 
     3    width:200px; 
     4    border:1px solid #000000; 
     5    font-size:10px; 
     6    top:100px; 
     7    position:absolute; 
    88} 
    99.l_vis { 
    10    font-size: 11px; 
    11    height: 29px; 
    12    cursor: pointer; 
    13    padding-left: 20px; 
    14    position: relative; 
    15 } 
     10    font-size:11px; 
     11    height:29px; 
     12} 
     13 
    1614.l_vis div { 
    17    position: relative; 
    18    display: block; 
    19    width: 16px; 
    20    height: 16px; 
    21    background-image: url("img/map.png"); 
    22    /*background-repeat: no-repeat;float: left; Float to display horizontally*/ 
    23    margin-top: 2px; 
    24    margin-right: 2px; 
    25    position: absolute; 
    26    top: -2px; 
    27    left: 2px; 
    28 } 
    29 .l_vis input { 
    30    position: relative; 
    31    margin-bottom: 0px; 
    32    height: 16px; 
    33    width: 16px; 
    34  } 
    35 .l_vis_dis { 
    36    font-size: 11px; 
    37    height: 29px; 
    38    cursor: default; 
    39    padding-left: 20px; 
    40    opacity: .5; 
    41 } 
    42 .l_vis_dis div { 
    43    position: relative; 
    44    display: block; 
    45    width: 16px; 
    46    height: 16px; 
    47    background-image: url("img/map.png"); 
    48    /*background-repeat: no-repeat;float: left; Float to display horizontally*/ 
    49    margin-top: 2px; 
    50    margin-right: 2px; 
    51    position: absolute; 
    52    top: -2px; 
    53    left: 2px; 
    54 } 
    55 .l_vis_dis input { 
    56    position: relative; 
    57    margin-bottom: 0px; 
    58    height: 16px; 
    59    width: 16px; 
    60 } 
     15    position:relative; 
     16    display:block; 
     17    width:16px; 
     18    height:16px; 
     19    background-image: url("img/map.png"); 
     20    /*background-repeat: no-repeat; Float to display horizontally*/ 
     21    margin-top:2px; 
     22    margin-right:2px; 
     23    position:absolute; 
     24    top:-2px; 
     25    left:2px; 
     26} 
     27 
    6128.check { 
    62    float: left; 
    63    top: -2px; 
    64 } 
    65 #click_f_Data Layers { 
    66    font-size: 11px; 
    67 } 
    68 .f_open { 
    69    font-size: 14px; 
    70    cursor: pointer; 
    71 } 
    72 .f_closed { 
    73    font-size: 14px; 
    74    font-weight: 200; 
    75    cursor: pointer; 
     29     
     30top:-2px; 
     31} 
     32 
     33#click_f_Data Layers{ 
     34    font-size:11px; 
     35} 
     36.f_open {  
     37    font-size:14px; 
     38    cursor:pointer; 
     39} 
     40.f_closed {  
     41    font-size:14px; 
     42    font-weight:200; 
     43    cursor:pointer;  
    7644} 
    7745.img_f_open { 
    78    margin-right: 10px; 
    79    display: block; 
    80    width: 16px; 
    81    height: 16px; 
    82    float: left; 
    83    background-image: url("img/folder_add.png"); 
     46    margin-right: 10px; 
     47    display:block; 
     48    width:16px; 
     49    height:16px; 
     50     
     51    background-image: url("img/folder_add.png"); 
    8452} 
    8553.img_f_closed { 
    86    margin-right: 10px; 
    87    display: block; 
    88    width: 16px; 
    89    height: 16px; 
    90    float: left; 
    91    background-image: url("img/folder_delete.png"); 
    92 } 
    93 .l_closed div { 
    94    display: none; 
    95  } 
    96 .l_open div { 
    97    display: block; 
    98  } 
    99 .l_closed { 
    100    margin-bottom: 0px; 
    101    margin-top: 0px; 
    102  } 
    103 .l_open { 
    104    margin-bottom: 0px; 
    105    margin-top: 0px; 
    106 } 
    107  
    108 /*set positioning of tools*/ 
     54    margin-right: 10px; 
     55    display:block; 
     56    width:16px; 
     57    height:16px; 
     58     
     59    background-image: url("img/folder_delete.png"); 
     60} 
     61 
     62.l_closed div {display:none;} 
     63.l_open div {display:;} 
     64.l_closed {margin-bottom:0px;margin-top:0px;} 
     65.l_open {margin-bottom:0px;margin-top:0px;} 
     66 
     67.l_vis {cursor:pointer; 
     68        padding-left:20px; 
     69            position:relative;} 
     70.l_vis input {position:relative; 
     71        margin-bottom:0px; 
     72        height:16px;width:16px;}     
     73     
     74.l_vis_dis {cursor:default; 
     75        padding-left:20px; 
     76        opacity:.5;} 
     77.l_vis_dis input {position:relative; 
     78        margin-bottom:0px; 
     79        height:16px;width:16px;} 
     80 
     81 
     82/*set width of tools*/ 
    10983#panelDiv { 
    110    position: absolute; 
    111    top: 75px; 
     84    width:100%; 
    11285} 
    11386/* OpenLayers Styling */ 
    11487div.olMapViewport { 
    115    -moz-user-select: none; 
    116 } 
     88   -moz-user-select: none;  
     89} 
     90 
    11791.olLayerGoogleCopyright { 
    118    left: 2px; 
    119    bottom: 2px; 
     92    left: 2px; 
     93    bottom: 2px;   
    12094} 
    12195.olLayerGooglePoweredBy { 
    122    left: 2px; 
    123    bottom: 15px; 
     96    left: 2px; 
     97    bottom: 15px;    
    12498} 
    12599.olControlAttribution { 
    126    font-size: smaller; 
    127    right: 3px; 
    128    bottom: 4.5em; 
    129    position: absolute; 
    130    display: block; 
     100    font-size: smaller;  
     101    right: 3px;  
     102    bottom: 4.5em;  
     103    position: absolute;  
     104    display: block; 
    131105} 
    132106.olControlScale { 
    133    right: 3px; 
    134    bottom: 3em; 
    135    display: block; 
    136    position: absolute; 
     107    right: 3px; 
     108    bottom: 3em; 
     109    display: block; 
     110    position: absolute; 
    137111} 
    138112.olControlPermalink { 
    139    right: 3px; 
    140    bottom: 1.5em; 
    141    display: block; 
    142    position: absolute; 
    143 } 
     113    right: 3px; 
     114    bottom: 1.5em; 
     115    display: block; 
     116    position: absolute; 
     117}  
     118 
    144119div.olControlMousePosition { 
    145    bottom: 0em; 
    146    right: 3px; 
    147    display: block; 
    148    position: absolute; 
    149    font-family: Arial; 
    150    font-size: smaller; 
    151 } 
     120    bottom: 0em; 
     121    right: 3px; 
     122    display: block; 
     123    position: absolute; 
     124    font-family: Arial; 
     125    font-size: smaller; 
     126} 
     127 
    152128.olControlOverviewMapContainer { 
    153    position: absolute; 
    154    bottom: 0px; 
    155    right: 0px; 
    156 } 
     129    position: absolute; 
     130    bottom: 0px; 
     131    right: 0px; 
     132} 
     133 
    157134.olControlOverviewMapElement { 
    158    padding: 10px 18px 10px 10px; 
    159    background-color: #00008B; 
    160    -moz-border-radius: 1em 0 0 0; 
    161 } 
     135    padding: 10px 18px 10px 10px; 
     136    background-color: #00008B; 
     137    -moz-border-radius: 1em 0 0 0; 
     138} 
     139 
    162140.olControlOverviewMapMinimizeButton { 
    163    right: 0px; 
    164    bottom: 80px; 
    165 } 
     141    right: 0px; 
     142    bottom: 80px; 
     143}     
     144 
    166145.olControlOverviewMapMaximizeButton { 
    167    right: 0px; 
    168    bottom: 80px; 
    169 } 
     146    right: 0px; 
     147    bottom: 80px; 
     148} 
     149 
    170150.olControlOverviewMapExtentRectangle { 
    171151   cursor: move; 
    172    border: 2px dotted red; 
     152    border: 2px dotted red; 
    173153} 
    174154.olLayerGeoRSSDescription { 
    175    float: left; 
    176    width: 100%; 
    177    overflow: auto; 
    178    font-size: 1.0em; 
     155     
     156    width:100%; 
     157    overflow:auto; 
     158    font-size:1.0em; 
    179159} 
    180160.olLayerGeoRSSClose { 
    181    float: right; 
    182    color: gray; 
    183    font-size: 1.2em; 
    184    margin-right: 6px; 
    185    font-family: sans-serif; 
     161     
     162    color:gray; 
     163    font-size:1.2em; 
     164   margin-right:6px; 
     165    font-family:sans-serif; 
    186166} 
    187167.olLayerGeoRSSTitle { 
    188    float: left;font-size: 1.2em; 
    189 } 
     168    font-size:1.2em; 
     169} 
     170 
    190171.olPopupContent { 
    191    padding: 5px; 
    192 } 
    193 .olControlNavToolbar { 
    194    width: 0px; 
    195    height: 0px; 
    196 } 
    197 .olControlNavToolbar div { 
    198   display: block; 
    199   width:  22px; 
    200   height: 22px; 
    201   top: 0px; 
    202   left: 300px; 
    203    position: relative; 
    204 } 
     172    padding:5px; 
     173}     
     174.olControlNavToolbar {  
     175    width:0px; 
     176    height:0px; 
     177}     
     178.olControlNavToolbar div {  
     179  display:block; 
     180  width: 22px ; 
     181  height: 22px ; 
     182  float:left; 
     183  position: relative;/*All these properties are inherited by each tool*/ 
     184} 
     185 
    205186/* we use NavToolbar as the panel for all our tools*/ 
    206 .olControlNavToolbar .olControlNavigationItemActive { 
    207    background-image: url("img/panning-hand-on.png"); 
    208    background-repeat: no-repeat;/*much easier to use position instead of float for IE*/ 
    209    position: absolute; 
    210    left: 0px; 
    211    top: 0px; 
    212    margin-right: 0px; 
    213 } 
    214 .olControlNavToolbar .olControlNavigationItemInactive { 
    215    background-image: url("img/panning-hand-off.png"); 
    216    background-repeat: no-repeat; 
    217    position: absolute; 
    218    left: 0px; 
    219    top: 0px; 
    220    margin-right: 0px; 
    221 } 
    222 .olControlNavToolbar .olControlZoomBoxItemActive { 
    223    background-image: url("img/drag-rectangle-on.png"); 
    224    background-repeat: no-repeat; 
    225    position: absolute; 
    226    left: 22px; 
    227    top: 0px; 
    228 } 
    229 .olControlNavToolbar .olControlZoomBoxItemInactive { 
    230    background-image: url("img/drag-rectangle-off.png"); 
    231    background-repeat: no-repeat; 
    232    float: right; 
    233    position: absolute; 
    234    left: 22px; 
    235    top: 0px; 
    236 } 
    237 .olControlNavToolbar .olControlZoomOutItemActive { 
    238    background-image: url("img/zoom-out-on.png"); 
    239    background-repeat: no-repeat; 
    240    position: absolute; 
    241    left: 44px; 
    242    top: 0px; 
    243 } 
    244 .olControlNavToolbar .olControlZoomOutItemInactive { 
    245    background-image: url("img/zoom-out-off.png"); 
    246    background-repeat: no-repeat; 
    247    position: absolute; 
    248    left: 44px; 
    249    top: 0px; 
    250 } 
    251 .olControlNavToolbar .olControlZoomToMaxExtentItemActive { 
    252    background-image: url("img/zoom-orig-on.png"); 
    253    background-repeat: no-repeat; 
    254    position: absolute; 
    255    left: 66px; 
    256    top: 0px; 
    257 } 
    258 .olControlNavToolbar .olControlZoomToMaxExtentItemInactive { 
    259    background-image: url("img/zoom-orig-off.png"); 
    260    background-repeat: no-repeat; 
    261    position: absolute; 
    262    left: 66px; 
    263    top: 0px; 
    264 } 
    265 .olControlNavToolbar .olControlZoomToLastExtentItemActive { 
    266    background-image: url("img/zoom-last-on.png"); 
    267    background-repeat: no-repeat; 
    268    position: absolute; 
    269    left: 88px; 
    270    top: 0px; 
    271 } 
    272 .olControlNavToolbar .olControlZoomToLastExtentItemInactive { 
    273    background-image: url("img/zoom-last-off.png"); 
    274    background-repeat: no-repeat; 
    275    position: absolute; 
    276    left: 88px; 
    277    top: 0px; 
    278 } 
    279 .olControlNavToolbar .olControlIdentifyItemActive { 
    280    background-image: url("img/identify-on.png"); 
    281    background-repeat: no-repeat; 
    282    position: absolute; 
    283    left: 110px; 
    284    top: 0px; 
    285 } 
    286 .olControlNavToolbar .olControlIdentifyItemInactive { 
    287    background-image: url("img/identify-off.png"); 
    288    background-repeat: no-repeat; 
    289    position: absolute; 
    290    left: 110px; 
    291    top: 0px; 
    292 } 
    293 .olControlNavToolbar .olControlEmailItemActive { 
    294    background-image: url("img/email_on.png"); 
    295    background-repeat: no-repeat; 
    296    position: absolute; 
    297    left: 132px; 
    298    top: 0px; 
    299 } 
    300 .olControlNavToolbar .olControlEmailItemInactive { 
    301    background-image: url("img/email_off.png"); 
    302    background-repeat: no-repeat; 
    303    position: absolute; 
    304    left: 132px; 
    305    top: 0px; 
    306 } 
    307 .olControlNavToolbar .olControlSwitchItemActive { 
    308    background-image: url("img/switch-on.png"); 
    309    background-repeat: no-repeat; 
    310    position: absolute; 
    311    left: 154px; 
    312    top: 0px; 
    313 } 
    314 .olControlNavToolbar .olControlSwitchItemInactive { 
    315    background-image: url("img/switch-off.png"); 
    316    background-repeat: no-repeat; 
    317    position: absolute; 
    318    left: 154px; 
    319    top: 0px; 
    320 } 
     187.olControlNavToolbar .olControlNavigationItemActive {  
     188  background-image: url("img/panning-hand-on.png"); 
     189  background-repeat: no-repeat; 
     190} 
     191.olControlNavToolbar .olControlNavigationItemInactive {  
     192  background-image: url("img/panning-hand-off.png"); 
     193  background-repeat: no-repeat; 
     194} 
     195 
     196.olControlNavToolbar .olControlZoomBoxItemActive {  
     197  background-image: url("img/drag-rectangle-on.png"); 
     198  background-repeat: no-repeat; 
     199} 
     200.olControlNavToolbar .olControlZoomBoxItemInactive {  
     201  background-image: url("img/drag-rectangle-off.png"); 
     202  background-repeat: no-repeat; 
     203} 
     204 
     205.olControlNavToolbar .olControlZoomOutItemActive {  
     206  background-image: url("img/zoom-out-on.png"); 
     207  background-repeat: no-repeat; 
     208} 
     209.olControlNavToolbar .olControlZoomOutItemInactive {  
     210  background-image: url("img/zoom-out-off.png"); 
     211  background-repeat: no-repeat; 
     212} 
     213 
     214.olControlNavToolbar .olControlZoomToMaxExtentItemActive {  
     215  background-image: url("img/zoom-orig-on.png"); 
     216  background-repeat: no-repeat; 
     217 
     218 
     219} 
     220.olControlNavToolbar .olControlZoomToMaxExtentItemInactive {  
     221  background-image: url("img/zoom-orig-off.png"); 
     222  background-repeat: no-repeat; 
     223} 
     224 
     225.olControlNavToolbar .olControlZoomToLastExtentItemActive {  
     226  background-image: url("img/zoom-last-on.png"); 
     227  background-repeat: no-repeat; 
     228} 
     229.olControlNavToolbar .olControlZoomToLastExtentItemInactive {  
     230  background-image: url("img/zoom-last-off.png"); 
     231  background-repeat: no-repeat; 
     232} 
     233 
     234 
     235.olControlNavToolbar .olControlIdentifyItemActive {  
     236  background-image: url("img/identify-on.png"); 
     237  background-repeat: no-repeat; 
     238} 
     239.olControlNavToolbar .olControlIdentifyItemInactive {  
     240  background-image: url("img/identify-off.png"); 
     241  background-repeat: no-repeat; 
     242} 
     243 
     244 
    321245.olControlEditingToolbar  { 
    322    float: right; 
    323    right: 0px; 
    324    height: 30px; 
    325    width: 200px; 
    326 } 
    327 .olControlEditingToolbar div { 
    328    float: right; 
    329    width: 24px; 
    330    height: 24px; 
    331    margin: 5px; 
    332 } 
    333 .olControlEditingToolbar .olControlNavigationItemActive { 
    334    background-image: url("img/pan_on.png"); 
    335    background-repeat: no-repeat; 
    336 } 
    337 .olControlEditingToolbar .olControlNavigationItemInactive { 
    338    background-image: url("img/pan_off.png"); 
    339    background-repeat: no-repeat; 
    340 } 
    341 .olControlEditingToolbar .olControlDrawFeaturePointItemActive { 
    342    background-image: url("img/draw_point_on.png"); 
    343    background-repeat: no-repeat; 
    344 } 
    345 .olControlEditingToolbar .olControlDrawFeaturePointItemInactive { 
    346    background-image: url("img/draw_point_off.png"); 
    347    background-repeat: no-repeat; 
    348 } 
    349 .olControlEditingToolbar .olControlDrawFeaturePathItemInactive { 
    350    background-image: url("img/draw_line_off.png"); 
    351    background-repeat: no-repeat; 
    352 } 
    353 .olControlEditingToolbar .olControlDrawFeaturePathItemActive { 
    354    background-image: url("img/draw_line_on.png"); 
    355    background-repeat: no-repeat; 
    356 } 
    357 .olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive { 
    358    background-image: url("img/draw_polygon_off.png"); 
    359    background-repeat: no-repeat; 
    360 } 
    361 .olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { 
    362    background-image: url("img/draw_polygon_on.png"); 
    363    background-repeat: no-repeat; 
    364 } 
    365  
    366 .olHandlerBoxZoomBox { 
    367     border: 2px solid red; 
    368     position: absolute; 
    369     background-color: white; 
    370     opacity: 0.50; 
    371     font-size: 1px; 
    372     filter: alpha(opacity=50); 
    373 }    
    374  
     246    right: 0px; 
     247    height: 30px;  
     248    width: 200px; 
     249} 
     250.olControlEditingToolbar div {  
     251  width:  24px; 
     252  height: 24px; 
     253  margin: 5px; 
     254} 
     255.olControlEditingToolbar .olControlNavigationItemActive {  
     256  background-image: url("img/pan_on.png"); 
     257  background-repeat: no-repeat; 
     258} 
     259.olControlEditingToolbar .olControlNavigationItemInactive {  
     260  background-image: url("img/pan_off.png"); 
     261  background-repeat: no-repeat; 
     262} 
     263.olControlEditingToolbar .olControlDrawFeaturePointItemActive {  
     264  background-image: url("img/draw_point_on.png"); 
     265  background-repeat: no-repeat; 
     266} 
     267.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {  
     268  background-image: url("img/draw_point_off.png"); 
     269  background-repeat: no-repeat; 
     270} 
     271.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {  
     272  background-image: url("img/draw_line_off.png"); 
     273  background-repeat: no-repeat; 
     274} 
     275.olControlEditingToolbar .olControlDrawFeaturePathItemActive {  
     276  background-image: url("img/draw_line_on.png"); 
     277  background-repeat: no-repeat; 
     278} 
     279.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive {  
     280  background-image: url("img/draw_polygon_off.png"); 
     281  background-repeat: no-repeat; 
     282} 
     283.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {  
     284  background-image: url("img/draw_polygon_on.png"); 
     285  background-repeat: no-repeat; 
     286} 
     287 
     288