Changeset 397


Ignore:
Timestamp:
Nov 22, 2006, 5:11:04 PM (14 years ago)
Author:
David Sheldon
Message:

Use divs rather than tables for the navigation arrows, and put the zoom
to the right rather than below the arrows.

Location:
trunk/npemap.org.uk/static/tiles
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/npemap.org.uk/static/tiles/grid.css

    r396 r397  
    1515        cursor: crosshair;
    1616        background-color: #FFFFFF;
     17  border: 1px solid black;
    1718}
    1819div.marker {
    … …  
    159160}
    160161
    161 #movement {
     162#movement .left {
     163  clear: left;
     164}
     165
     166div#movement {
     167  height: 60px;
     168        width: 60px;
     169        float:left;
    162170  background-color: #EDFFCb;
    163171  border: 1px solid black;
    164172}
    165173
    166 ul.links {
     174#movement img {
     175  cursor: pointer;
     176  float: left;
     177}
     178#zoominout img {
     179  cursor: pointer;
     180}
     181
     182#zoomin_enabled,#zoomin_disabled {
     183  margin-bottom: 20px;
     184  display: block;
     185}
     186
     187.links {
     188        clear: left;
     189}
     190
     191#zoominout {
     192  height: 60px;
     193  width: 20px;
     194  float: left;
     195  margin-left: 20px;
     196  background-color: #EDFFCb;
     197  border: 1px solid black;
     198}
     199
     200#menu ul.links {
    167201  margin-left: 0px;
    168202  padding: 0px;
    169203}
    170204
    171 ul.links li {
     205#menu ul.links li {
    172206  list-style: none;
    173207  margin-left: 0px;
    … …  
    188222}
    189223
    190 div#map {
    191   border: 1px solid black;
    192 }
    193 
    194 
    195 #movement img {
    196   cursor: pointer;
    197 }
     224
     225
    198226
    199227

  • trunk/npemap.org.uk/static/tiles/map.html

    r390 r397  
    2828        <div id='marker' class="marker"><img src="../images/yellow-marker.gif" alt='Your location'/></div>
    2929        <div id="menu" style="float:right">
    30                 <table border="0" id="movement">
    31                         <tr>
    32                                 <td><img src="../images/LeftUp.png" onclick="updateGrid('upleft')" alt="north-west"/></td>
    33                                 <td><img src="../images/Up.png"  onclick="updateGrid('up')" alt="north"/></td>
    34                                 <td><img src="../images/RightUp.png" onclick="updateGrid('upright')" alt="north-east"/></td>
    35                         </tr>
    36                         <tr>
    37                                 <td><img src="../images/Left.png" onclick="updateGrid('left')" alt="west"/></td>
    38                                 <td><img src="../images/Reload.png" onclick="reload_page()" alt="reload"/></td>
    39                                 <td><img src="../images/Right.png" onclick="updateGrid('right')" alt="east"/></td>
    40                         </tr>
    41                         <tr>
    42                                 <td><img src="../images/LeftDown.png" onclick="updateGrid('downleft')" alt="south-west"/></td>
    43                                 <td><img src="../images/Down.png"  onclick="updateGrid('down')" alt="south"/></td>
    44                                 <td><img src="../images/RightDown.png" onclick="updateGrid('downright')" alt="south-east"/></td>
    45                         </tr>
    46                         <tr>
    47                                 <td> <img src="../images/ZoomOut.png" onclick="zoomOut()" alt="Zoom out" /></td>
    48                                 <td></td>
    49                                 <td>
     30          <div id="movement">
     31                  <img src="../images/LeftUp.png" onclick="updateGrid('upleft')" alt="north-west" class="left"/>
     32                        <img src="../images/Up.png"  onclick="updateGrid('up')" alt="north"/>
     33                        <img src="../images/RightUp.png" onclick="updateGrid('upright')" alt="north-east"/>
     34                        <img src="../images/Left.png" onclick="updateGrid('left')" alt="west" class="left"/>
     35                        <img src="../images/Reload.png" onclick="reload_page()" alt="reload"/>
     36                        <img src="../images/Right.png" onclick="updateGrid('right')" alt="east"/>
     37                  <img src="../images/LeftDown.png" onclick="updateGrid('downleft')" alt="south-west" class="left"/>
     38                        <img src="../images/Down.png"  onclick="updateGrid('down')" alt="south"/>
     39                        <img src="../images/RightDown.png" onclick="updateGrid('downright')" alt="south-east"/>
     40          </div>
     41                <div id="zoominout">
    5042                                        <span id="zoomin_enabled"><img src="../images/ZoomIn.png" onclick="zoomIn()" alt="Zoom in" /></span>
    5143                                        <span id="zoomin_disabled" style="display: none"><img src="../images/ZoomIn_disabled.png" /></span>
    52                                 </td>
    53                         </tr>
    54                 </table>
     44                                <img src="../images/ZoomOut.png" onclick="zoomOut()" alt="Zoom out" />
     45                </div>
    5546
    5647                <div><span style="display: none" id="permalink"></span>
    … …  
    8172        </div>
    8273  <div id="spinner" class="status">
    83     <p>Status... </p>
     74    <p>&nbsp;</p>
    8475  </div>
    8576</div>
Note: See TracChangeset for help on using the changeset viewer.