Changeset 369 for trunk/npemap.org.uk


Ignore:
Timestamp:
Nov 17, 2006, 2:14:32 PM (14 years ago)
Author:
Natalie Downe
Message:

Tidied up some of the indentation, and moved the search results box to
under the form above the credit, and styled

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

Legend:

Unmodified
Added
Removed

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

    r358 r369  
    1     #map_container {
    2       position: relative;
    3       line-height: 50%;
    4     }
    5     #map {
    6       position: relative;
    7       cursor: crosshair;
    8     }
    9     div.marker {
    10       position: absolute;
    11       visibility: hidden;
    12                         z-index: 1;
    13     }
    14 
    15     div.postcode_marker {
    16        position: absolute;
    17        z-index: 1;
    18        cursor: pointer;
    19     }
    20    
    21     #postcode_form {
    22       line-height: 100%;
    23       background-color: white;
    24       border: 1px solid black;
    25       padding: 0.5em;
    26       position: absolute;
    27       display: none;
    28       width: 21em;
    29       height: 8em;
    30                         z-index: 10;
    31     }
    32     #postcode_detail_window {
    33       line-height: 100%;
    34       background-color: white;
    35       border: 1px solid black;
    36       display: none;
    37       padding: 0.5em;
    38       position: absolute;
    39       width: 32em;
    40       height: 7.5em;
    41                         z-index: 10;
    42     }
    43 
    44     div.geonames {
    45       font-size: 60%;
    46       background-color: white;
    47       border: 1px solid black;
    48       float: right;
    49       position: absolute;
    50     }
    51     div.geonames span.loc {
    52       font-size: 80%;
    53     }
    54 
    55     #geonames_results_window {
    56       font-size: 60%;
    57       line-height: 100%;
    58       background-color: white;
    59       border: 1px solid black;
    60       padding: 5px;
    61       width: 150px;
    62                         z-index: 10;
    63       display: none;
    64     }
    65    
    66    span.terms {
    67                  margin-top: 0px;
    68      font-family: sans-serif;
    69                  font-size: 65%;
    70                  line-height: 100%;
    71                  
    72          }
    73 
    74    span.hidden {
    75        display: none;
    76    }
    77 
    78    span.loading {
    79        background-color: khaki;
    80        color: black;
    81        font-weight: bold;
    82    }
    83 
    84    span.error {
    85        background-color: khaki;
    86        color: red;
    87        font-weight: bold;
    88    }
    89 
    90    div.report_form {
    91      display: none;
    92    }
    93 
    94    div.report_form input {
    95      font: normal 100% arial ;
    96      padding: 1px;
    97    }
    98    #postcode_detail_window {
    99                  margin-top: 0px;
    100      font-family: sans-serif;
    101                  font-size: 65%;
    102                  line-height: 100%;
    103          }
    104    #postcode_detail_window span.label {
    105                  font-weight: bold;
    106    }
    107 
    108    .close {
    109      font-family: sans-serif;
    110      float: right;
    111    }
    112    .close a {
    113     text-decoration: none;
    114    }
     1body, html {
     2        margin: 0;
     3        padding: 0;
     4        background-color: #F0FFD2;
     5        color: black;
     6}
     7
     8#map_container {
     9        position: relative;
     10        line-height: 50%;
     11}
     12#map {
     13        margin-left: 10px;
     14        position: relative;
     15        cursor: crosshair;
     16}
     17div.marker {
     18  position: absolute;
     19  visibility: hidden;
     20                z-index: 1;
     21}
     22
     23div.postcode_marker {
     24   position: absolute;
     25   z-index: 1;
     26   cursor: pointer;
     27}
     28
     29#postcode_form {
     30  line-height: 100%;
     31  background-color: white;
     32  border: 1px solid black;
     33  padding: 0.5em;
     34  position: absolute;
     35  display: none;
     36  width: 21em;
     37  height: 8em;
     38                z-index: 10;
     39}
     40#postcode_detail_window {
     41  line-height: 100%;
     42  background-color: white;
     43  border: 1px solid black;
     44  display: none;
     45  padding: 0.5em;
     46  position: absolute;
     47  width: 32em;
     48  height: 7.5em;
     49                z-index: 10;
     50}
     51
     52div.geonames {
     53  font-size: 60%;
     54  background-color: white;
     55  border: 1px solid black;
     56  float: right;
     57  position: absolute;
     58}
     59div.geonames span.loc {
     60  font-size: 80%;
     61}
     62
     63#geonames_results_window {
     64  font-size: 60%;
     65  line-height: 100%;
     66  background-color: white;
     67  border: 1px solid black;
     68  width: 150px;
     69                z-index: 10;
     70  display: none;
     71padding: 0 0 0 0;
     72margin-bottom: 5px;
     73
     74}
     75
     76#geonames_results_window .close {
     77bordeR: 1px solid black;
     78border-width: 0  0 1px 1px;
     79padding: 2px;
     80}
     81
     82#geonames_results {
     83margin: 5px 2px 6px 2px
     84}
     85
     86
     87#geonames-search form {
     88margin-bottom: 5px
     89}
     90
     91#geonames-search form label {
     92display: block;
     93cursor: hand;
     94cursor: pointer;
     95}
     96
     97#geonames-search form input {
     98width: 149px;
     99border-width: 1px
     100}
     101
     102p.terms {
     103         margin-top: 0px;
     104 font-family: sans-serif;
     105         font-size: 65%;
     106         line-height: 100%;
     107
     108 }
     109
     110span.hidden {
     111   display: none;
     112}
     113
     114span.loading {
     115   background-color: khaki;
     116   color: black;
     117   font-weight: bold;
     118}
     119
     120span.error {
     121   background-color: khaki;
     122   color: red;
     123   font-weight: bold;
     124}
     125
     126div.report_form {
     127 display: none;
     128}
     129
     130div.report_form input {
     131 font: normal 100% arial ;
     132 padding: 1px;
     133}
     134#postcode_detail_window {
     135         margin-top: 0px;
     136 font-family: sans-serif;
     137         font-size: 65%;
     138         line-height: 100%;
     139 }
     140#postcode_detail_window span.label {
     141         font-weight: bold;
     142}
     143
     144.close {
     145 font-family: sans-serif;
     146 float: right;
     147}
     148.close a {
     149text-decoration: none;
     150}
    115151
    116152#menu {
    … …  
    119155  background-color: #DDFF9b;
    120156  border: 1px solid black;
     157margin-right: 10px
    121158}
    122159
    … …  
    138175div#theTitle {
    139176  margin: 0 0 0.5em 0;
    140   background-color: #667f36;
     177  background-color: #798B55;
    141178  text-align: center;
    142179  color: #fff;
    … …  
    159196}
    160197
     198
    161199div#showHideMarkers{
    162200        font-size: 60%;
    … …  
    179217
    180218#spinner p {
    181  margin-top: 0.5em; 
     219 margin-top: 0.5em;
    182220}
    183221
    … …  
    192230
    193231#status p {
    194  margin-top: 0.5em; 
     232 margin-top: 0.5em;
    195233 margin-left: 1em;
    196234}

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

    r359 r369  
    11<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    22<html>
    3     <head>
    4         <title>New Popular Edition Maps</title>
    5         <link rel="stylesheet" type="text/css" href="grid.css">
    6     </head>
     3<head>
     4        <title>New Popular Edition Maps</title>
     5        <link rel="stylesheet" type="text/css" href="grid.css">
     6</head>
    77<body onload="initializePage();"  id="body">
    88<!-- Yahoo functions -->
    9 <script src="yahoo.js" type="text/javascript"></script> 
    10 <script src="dom.js" type="text/javascript"></script> 
    11 <script src="event.js" type="text/javascript"></script> 
    12 <script src="jsr_class.js" type="text/javascript"></script> 
    13 <script src="jscoord-1.1.1.js" type="text/javascript"></script> 
     9<script src="yahoo.js" type="text/javascript"></script>
     10<script src="dom.js" type="text/javascript"></script>
     11<script src="event.js" type="text/javascript"></script>
     12<script src="jsr_class.js" type="text/javascript"></script>
     13<script src="jscoord-1.1.1.js" type="text/javascript"></script>
    1414<script src="prototype.js" type="text/javascript"></script>
    1515<!-- Our functions -->
    … …  
    1919
    2020</script>
     21
    2122<div id="theTitle">
    22         <h1>Click on the map to Enter Postcodes</h1>
     23        <h1>Click on the map to Enter Postcodes</h1>
    2324</div>
     25
    2426<div id="main_page">
    25 <div id='marker' class="marker"><img src="../images/yellow-marker.gif" alt='Your location'/></div>
    26 <div id="menu" style="float:right">
    27          <table border="0" id="movement">
    28            <tr>
    29              <td><img src="../images/LeftUp.png" onclick="updateGrid('upleft')" alt="north-west"/></td>
    30              <td><img src="../images/Up.png"  onclick="updateGrid('up')" alt="north"/></td>
    31              <td><img src="../images/RightUp.png" onclick="updateGrid('upright')" alt="north-east"/></td>
    32            </tr>
    33            <tr>
    34              <td><img src="../images/Left.png" onclick="updateGrid('left')" alt="west"/></td>
    35              <td><img src="../images/Reload.png" onclick="reload_page()" alt="reload"/></td>
    36              <td><img src="../images/Right.png" onclick="updateGrid('right')" alt="east"/></td>
    37            </tr>
    38            <tr>
    39              <td><img src="../images/LeftDown.png" onclick="updateGrid('downleft')" alt="south-west"/></td>
    40              <td><img src="../images/Down.png"  onclick="updateGrid('down')" alt="south"/></td>
    41              <td><img src="../images/RightDown.png" onclick="updateGrid('downright')" alt="south-east"/></td>
    42            </tr>
    43            <tr>
    44              <td> <img src="../images/ZoomOut.png" onclick="zoomOut()" alt="Zoom out" /></td>
    45              <td></td>
    46              <td>
    47                <span id="zoomin_enabled"><img src="../images/ZoomIn.png" onclick="zoomIn()" alt="Zoom in" /></span>
    48                <span id="zoomin_disabled" style="display: none"><img src="../images/ZoomIn_disabled.png" /></span>
    49              </td>
    50            </tr>
    51          </table>
    52 
     27        <div id='marker' class="marker"><img src="../images/yellow-marker.gif" alt='Your location'/></div>
     28        <div id="menu" style="float:right">
     29                <table border="0" id="movement">
     30                        <tr>
     31                                <td><img src="../images/LeftUp.png" onclick="updateGrid('upleft')" alt="north-west"/></td>
     32                                <td><img src="../images/Up.png"  onclick="updateGrid('up')" alt="north"/></td>
     33                                <td><img src="../images/RightUp.png" onclick="updateGrid('upright')" alt="north-east"/></td>
     34                        </tr>
     35                        <tr>
     36                                <td><img src="../images/Left.png" onclick="updateGrid('left')" alt="west"/></td>
     37                                <td><img src="../images/Reload.png" onclick="reload_page()" alt="reload"/></td>
     38                                <td><img src="../images/Right.png" onclick="updateGrid('right')" alt="east"/></td>
     39                        </tr>
     40                        <tr>
     41                                <td><img src="../images/LeftDown.png" onclick="updateGrid('downleft')" alt="south-west"/></td>
     42                                <td><img src="../images/Down.png"  onclick="updateGrid('down')" alt="south"/></td>
     43                                <td><img src="../images/RightDown.png" onclick="updateGrid('downright')" alt="south-east"/></td>
     44                        </tr>
     45                        <tr>
     46                                <td> <img src="../images/ZoomOut.png" onclick="zoomOut()" alt="Zoom out" /></td>
     47                                <td></td>
     48                                <td>
     49                                        <span id="zoomin_enabled"><img src="../images/ZoomIn.png" onclick="zoomIn()" alt="Zoom in" /></span>
     50                                        <span id="zoomin_disabled" style="display: none"><img src="../images/ZoomIn_disabled.png" /></span>
     51                                </td>
     52                        </tr>
     53                </table>
    5354
    5455                <div><span style="display: none" id="permalink"></span>
    55       <ul class="links">
    56        <li><a href="/" id="home">Home</a></li>
    57                          <li><a href="/reportBug.html">Problem?</a></li>
     56
     57                <ul class="links">
     58                        <li><a href="/" id="home">Home</a></li>
     59                        <li><a href="/reportBug.html">Problem?</a></li>
    5860                </div>
     61
    5962                <div id="geonames-search">
    60       <form onsubmit="return find()" action="">
    61       <p><label for="where">Place name:</label><br/>
    62       <input id="where" name="where" size="15"/><br/>
    63       </form>
    64       <span class="terms">Functionality by <a href="http://www.geonames.org/">Geonames</a>.</span>
     63                        <form onsubmit="return find()" action="">
     64                                <div><label for="where">Place name:</label>
     65                                <input id="where" name="where" size="15"/></div>
     66                        </form>
     67
     68                        <div id="geonames_results_window">
     69                                <div class="close"><a href="javascript:hideGeonamesPopup()" title="close">X</a></div>
     70                                <div id="geonames_results"></div>
     71                        </div>
     72
     73                        <p class="terms">Functionality by <a href="http://www.geonames.org/">Geonames</a>.</p>
    6574                </div>
    66   <div id="geonames_results_window">
    67     <div class="close"><a href="javascript:hideGeonamesPopup()" title="close">X</a></div>
    68     <div id="geonames_results"></div>
    69   </div>
     75
    7076        <div id="showHideMarkers">
    7177    <p><img src="../images/green-marker.gif" alt='' > <a href="javascript:setMarkersHidden()" id="setMarkers">hide markers</a><a href="javascript:unsetMarkersHidden()" id="unsetMarkers" style="display:none">show markers</a></p>
    … …  
    7379        </div>
    7480  <div id="spinner" class="status">
    75     <p>Status... </p> 
     81    <p>Status... </p>
    7682  </div>
    7783</div>
    … …  
    8793      <input type="hidden" name="postcode" id="postcode_id_detail" />
    8894      <label for="reason"><span title="Why you think it is incorrect">Problem:</span></label>
    89      
     95
    9096      <input type="text" name="reason" id="reason" size="45"/><br/>
    9197      <label for="reason_email"><span title="So we can let you know what we're doing about it.">email</span></label>
    9298      <input type="text" name="email" id="reason_email" size="30"/>
    93       <input alt="submit" src="../images/btn_submit.png" type="image" /> 
     99      <input alt="submit" src="../images/btn_submit.png" type="image" />
    94100      </form>
    95101    </div>
    … …  
    106112    <div>
    107113      <input type="text" name="postcode1" id="postcode1" size="4" />
    108       <input type="text" name="postcode2" id="postcode2" size="3" /> 
     114      <input type="text" name="postcode2" id="postcode2" size="3" />
    109115      <input type="submit" value="submit" />
    110116    </div>
    … …  
    121127    <input type="text" id="reason" name="reason" />
    122128    <input type="text" id="email" name="email" />
    123    
     129
    124130  </div>
    125131-->
    … …  
    129135
    130136  <div id="status" name="status" style="display: none">
    131     <p>&nbsp;</p> 
     137    <p>&nbsp;</p>
    132138  </div>
    133139</div>
Note: See TracChangeset for help on using the changeset viewer.