design: Position reference anchors in negative space

This will hopefully fix all known scrolling issues as we got rid of
the master content scrolling div. Needs to be tested thoroughly on
touchscreen browsers.

Also, paging by the Space key works now once page is rendered.

3 files changed, 22 insertions, 11 deletions

diff --git a/templates/styles.css b/templates/styles.css
index 8c3aaf2..b96f19f 100644
--- a/templates/styles.css
+++ b/templates/styles.css
@@ -24,11 +24,8 @@ a:hover {
 }
 
 div.master_content {
-   overflow: auto; 
-   position: absolute; 
-   top: 3.4em; 
-   bottom: 1.8em;
-   width: 100%;
+   padding-top: 3.4em;
+   padding-bottom: 1.8em;
 }
 
 /******   NAVIGATION   ******/
@@ -36,6 +33,7 @@ div.navigation {
    position: fixed;
    top: 0px;
    overflow: hidden;
+   z-index: 1;
    background-color: #606466;
    width: 100%;
    padding: 0.4em 0em 0.4em 0em;
@@ -76,6 +74,7 @@ div.footer {
    position: fixed;
    bottom: 0px;
    overflow: hidden;
+   z-index: 1;
    text-align: center;
    background-color: #4F5659;
    width: 100%;
@@ -177,6 +176,12 @@ div.exif td {
 }
 
 
+/******   GENERAL CLASSES   ******/
+div.position_marker {
+   position: relative;
+   top: -4.3em;
+}
+
 /******   ALBUM THUMBNAILS   ******/
 div.album_thumbs {
    text-align: left;
diff --git a/templates/template-album.tmpl b/templates/template-album.tmpl
index 0162f68..9f31fb3 100644
--- a/templates/template-album.tmpl
+++ b/templates/template-album.tmpl
@@ -35,7 +35,8 @@
   <div class="album_thumbs">
   <!-- $(BEGIN_IMG_LIST) -->
     <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-      <div class="album_item" id="$(IMG_LIST_ID)">
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(IMG_SUBPAGE)">
           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" />
           <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
@@ -43,7 +44,8 @@
       </div>
     <!-- $(END_IMG_LIST_LANDSCAPE) -->
     <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-      <div class="album_item" id="$(IMG_LIST_ID)">
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(IMG_SUBPAGE)">
           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="portrait" />
           <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
@@ -51,7 +53,8 @@
       </div>
     <!-- $(END_IMG_LIST_PORTRAIT) -->
     <!-- $(BEGIN_IMG_LIST_SQUARED) -->
-      <div class="album_item" id="$(IMG_LIST_ID)">
+      <div class="album_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(IMG_SUBPAGE)">
           <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="$(IMG_TITLE)" class="squared" />
           <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
diff --git a/templates/template-index.tmpl b/templates/template-index.tmpl
index 6c91b76..01de113 100644
--- a/templates/template-index.tmpl
+++ b/templates/template-index.tmpl
@@ -35,7 +35,8 @@
   <div class="index_thumbs">
   <!-- $(BEGIN_IMG_LIST) -->
     <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-      <div class="index_item" id="$(IMG_LIST_ID)">
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(ALBUM_SUBPATH)">
            <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)" alt="" />
            <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
@@ -45,7 +46,8 @@
       </div>
     <!-- $(END_IMG_LIST_LANDSCAPE) -->
     <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-      <div class="index_item" id="$(IMG_LIST_ID)">
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(ALBUM_SUBPATH)">
            <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)"  alt="" />
            <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br />
@@ -55,7 +57,8 @@
       </div>
     <!-- $(END_IMG_LIST_PORTRAIT) -->
     <!-- $(BEGIN_IMG_LIST_SQUARED) -->
-      <div class="index_item" id="$(IMG_LIST_ID)">
+      <div class="index_item">
+        <div class="position_marker" id="$(IMG_LIST_ID)"></div>
         <a href="$(ALBUM_SUBPATH)">
            <img src="$(IMG_THUMBNAIL)" width="$(IMG_SIZE_THUMB_W)" height="$(IMG_SIZE_THUMB_H)"  alt="" />
            <span class="album_text_squared"><!-- $(IMG_TITLE) --></span><br />