Templates cleanup, remove non-XHTML code

Much better flexibility in scaling, although some elements are fixed to pixels (image sizes, borders)

1 files changed, 40 insertions, 50 deletions

diff --git a/templates/template-album.tmpl b/templates/template-album.tmpl
index 355c290..0e5eec3 100644
--- a/templates/template-album.tmpl
+++ b/templates/template-album.tmpl
@@ -13,66 +13,56 @@
 
 <!--  ##  Navigation bar  -->
 <div class="navigation">
-<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
-  <!-- $(NAV_BAR) -->
-</td>
-<td align="right"><b><!-- $(TOTAL_ITEMS) --> items</b></td></tr></table>
+  <div class="navlinks"><!-- $(NAV_BAR) --></div>
+  <div class="navposition">
+    <span class="navposnumber"><!-- $(TOTAL_ITEMS) --> items</span>
+  </div>
 </div>
 
-<div class="master_content">
-
-<!--  ##  Description  -->
-<div class="desc">
-<!-- $(BEGIN_GO_UP) -->
-<div class="desc_date">:. <a href="$(GO_UP_LINK)" id="exif_line_a">Go Up</a><br /><br /><br /></div>
-<!-- $(END_GO_UP) -->
-<!-- $(TITLE) -->
-<div class="desc_text"><!-- $(DESCRIPTION) --></div>
-</div>
 
+<div class="master_content">
+  <!--  ##  Description  -->
+  <div class="description">
+    <!-- $(BEGIN_GO_UP) -->
+    <div class="desc_go_up">:. <a href="$(GO_UP_LINK)">Go Up</a></div>
+    <!-- $(END_GO_UP) -->
+    <div class="desc_title"><!-- $(TITLE) --></div>
+    <div class="desc_text"><!-- $(DESCRIPTION) --></div>
+  </div>
 
-<!--  ##  Images  -->
-<div class="bigthumbnails">
-<!-- $(BEGIN_IMG_LIST) -->
-  <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-    <div class="one_thumbnail" id="<!-- $(IMG_LIST_ID) -->">
-      <a href="<!-- $(IMG_SUBPAGE) -->">
-        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" /><br />
-        <span class="thumb_name"><!-- $(IMG_FILENAME) --></span>
+  <!--  ##  Images  -->
+  <div class="album_thumbs">
+  <!-- $(BEGIN_IMG_LIST) -->
+    <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
+      <a class="album_item" href="<!-- $(IMG_SUBPAGE) -->" id="<!-- $(IMG_LIST_ID) -->">
+        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
+        <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
       </a>
-    </div>
-  <!-- $(END_IMG_LIST_LANDSCAPE) -->
-  <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-    <div class="one_thumbnail" id="<!-- $(IMG_LIST_ID) -->">
-      <a href="<!-- $(IMG_SUBPAGE) -->">
-        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" class="portrait" /><br />
-        <span class="thumb_name"><!-- $(IMG_FILENAME) --></span>
+    <!-- $(END_IMG_LIST_LANDSCAPE) -->
+    <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
+      <a class="album_item" href="<!-- $(IMG_SUBPAGE) -->" id="<!-- $(IMG_LIST_ID) -->">
+        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" class="portrait" />
+        <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
       </a>
-    </div>
-  <!-- $(END_IMG_LIST_PORTRAIT) -->
-  <!-- $(BEGIN_LIST_SEPARATOR) -->
-    <div class="separators">
-      <div class="index_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
-    </div>
-  <!-- $(END_LIST_SEPARATOR) -->
-<!-- $(END_IMG_LIST) -->
-</div>
-
-
-<!-- Dirty hack to add free space at the bottom of the page -->
-<div style="display: block; float: left; height: 240px;"></div>
-
-
-<!--  ##  Footnote  -->
-<div class="desc" style="clear: both;">
-<div class="desc_text"><!-- $(FOOTNOTE) --></div>
-</div>
+    <!-- $(END_IMG_LIST_PORTRAIT) -->
+    <!-- $(BEGIN_LIST_SEPARATOR) -->
+      <div class="separators">
+        <div class="index_separator"><!-- $(LIST_SEPARATOR_TITLE) --></div>
+      </div>
+    <!-- $(END_LIST_SEPARATOR) -->
+  <!-- $(END_IMG_LIST) -->
+  </div>
 
+  <!--  ##  Footnote, also acts as a bottom border  -->
+  <div class="footnote">
+    <div class="desc_text"><!-- $(FOOTNOTE) --></div>
+  </div>
 </div> <!-- end of master_content -->
 
-<!--  ##  Footer  -->
-<!-- $(FOOTER) -->
 
+<!--  ##  Footer  -->
+<div class="footer"><!-- $(FOOTER) --></div>
 
 </body>
 </html>
+