issue59, outer page skeleton is now table free

4 files changed, 285 insertions, 266 deletions

diff --git a/themes/default/stylesheet.css b/themes/default/stylesheet.css
index e12e57d..b07fff1 100644
--- a/themes/default/stylesheet.css
+++ b/themes/default/stylesheet.css
@@ -1,225 +1,241 @@
-body {

-   color:                  rgb(26,151,15);

-   font-family:            sans-serif;

-   font-style:             normal;

-   margin-left:            0px;

-   margin-right:           0px;

-}

-

-body.slideshow {

-   color:                  rgb(26,151,15);

-   font-family:            sans-serif;

-   font-style:             normal;

-   border:                 none;

-   padding:                10px;

-   text-align:             center;

-}

-

-

-table, tr, td {

-   border-collapse:        collapse;

-   padding:                0px;

-   empty-cells:            show;

-   vertical-align:         top;

-}

-

-td.options {

-   width:                  250px;

-   max-width:              250px;

-   min-width:              250px;

-   padding:                5px;

-   padding-top:            8px;

-   border-top:             solid 1px #000000;

-   border-right:           solid 1px #000000;

-}

-

-td.available_tags,td.selected_tags {

-   border-bottom:          solid 1px #000000;

-   padding-top:            10px;

-   padding-bottom:         10px;

-   padding-right:          10px;

-   line-height:            21px;

-}

-

-td.searchfor {

-   border-bottom:          solid 1px #000000;

-   padding-top:            10px;

-   padding-bottom:         10px;

-   padding-right:          10px;

-   line-height:            21px;

-   font-size:              12px;

-   vertical-align:         middle;

-}

-

-.menu {

-   font-weight:            bolder;

-   padding:                5px;

-   height:                 30px;

-   border-bottom:          solid 1px #000000;

-}

-

-td.content {

-   border-top:             solid 1px #000000;

-}

-

-.logo {

-   float:                  none;

-   background-color:       #eeeeee;

-}

-

-td.index_header {

-   background-color:       #eeeeee;

-   padding:                10px;

-   vertical-align:         middle;

-   white-space:            nowrap;

-}

-

-td.content_title {

-   background-color:       #eeeeee;

-   padding:                10px;

-   vertical-align:         middle;

-}

-

-

-img {

-   border:                none;

-}

-

-img.thumb {

-}

-

-a {

-   font-size:              14px;

-   color:                  #008200;

-   text-decoration:        none;

-}

-

-a:hover {

-   color:                  #00aa44;

-}

-

-a.tag {

-   color:                  #000000;

-   text-decoration:        underline;

-}

-

-a.tag:hover {

-   color:                  #00aa44;

-}

-

-a.smalltag {

-   font-size:              12px;

-   color:                  #000000;

-   text-decoration:        underline;

-   font-style:             italic;

-}

-

-a.smalltag:hover {

-   color:                  #00aa44;

-}

-

-a.thumblink {

-   font-size:              12px;

-}

-

-a.calendar {

-   font-size:              10px;

-}

-

-a.thumblink:hover {

-   color:                  #4761ab;

-}

-

-#single {

-   padding:                10px;

-   display:                table;

-   table-layout:           fixed;

-   border:                 hidden;

-   border-spacing:         10px;

-   border-collapse:        separate;

-   margin-left:            auto;

-   margin-right:           auto;

-}

-

-table.matrix {

-   padding:                10px;

-   display:                table;

-   table-layout:           fixed;

-   border-style:           hidden;

-   border-spacing:         10px;

-   border-collapse:        separate;

-   margin-left:            auto;

-   margin-right:           auto;

-}

-

-td.thumb {

-   text-align:             center;

-   display:                table-cell;

-   vertical-align:         top;

-   -moz-border-radius:     3px;

-   border-radius:          3px;

-   border:                 dashed 1px #888888;

-   margin:                 5px;

-   background-color:       #eeeeee;

-   padding:                10px;

-}

-

-#photo_details {

-   width:                  150px;

-   font-size:              12px;

-   padding:                10px;

-   -moz-border-radius:     1em;

-   border-radius:          1em;

-   border:                 dashed 1px #888888;

-}

-

-#available_tags {

-   clip:                   auto;

-   overflow:               auto;

-}

-

-table.calendar tr td {

-   border:                 solid 1px #ffffff;

-   padding:                1px;

-   text-align:             center;

-   font-size:              10px;

-}

-

-.prevMonth {

-    font-size: 10px;

-    text-align: left;

-}

-.nextMonth {

-    font-size: 10px;

-    text-align: right;

-}

-#calendar {

-   position: absolute;

-   width: 140px;

-   height: 200px;

-   background-color: #000000;

-   visibility: hidden;

-   z-index: 1000;

-}

-

-#slide_navigation {

-   text-align:             center;

-   padding:                5px;

-   -moz-border-radius:     5px;

-   border-radius:          5px;

-   border:                 dashed 1px #888888;

-   vertical-align:         middle;

-}

-

-input.submit {

-   background-color:       #ffffff;

-   border:                 0px;

-}

-

-input, select, textarea {

-   background-color:       #eeeeee;

-   color:                  #333333;

-   border:                 1px solid #888888;

-   border-collapse:        collapse;

-}

-

+body {
+   color:                  rgb(26,151,15);
+   font-family:            sans-serif;
+   font-style:             normal;
+   margin:                 0px 0px 0px 0px;
+   padding:                0px 0px 0px 0px;
+}
+
+body.slideshow {
+   color:                  rgb(26,151,15);
+   font-family:            sans-serif;
+   font-style:             normal;
+   border:                 none;
+   padding:                10px;
+   text-align:             center;
+}
+
+table, tr, td {
+   border-collapse:        collapse;
+   padding:                0px;
+   empty-cells:            show;
+   vertical-align:         top;
+}
+
+/* left column containg search and tag-selection */
+.options {
+   position:               absolute;
+   left:                   0px;
+   top:                    40px;
+   width:                  265px;
+   max-width:              265px;
+   min-width:              265px;
+   padding-top:            8px;
+   padding-bottom:         10px;
+   padding-left:           5px;
+   padding-right:          10px;
+   border-right:           solid 1px #000000;
+}
+
+/* main cell containing photo content */
+.content {
+   margin-top:             40px;
+   margin-left:            280px;
+   margin-right:           0px;
+   padding:                0px;
+}
+
+td.available_tags,td.selected_tags {
+   border-bottom:          solid 1px #000000;
+   padding-top:            10px;
+   padding-bottom:         10px;
+   padding-right:          10px;
+   line-height:            21px;
+}
+
+td.searchfor {
+   border-bottom:          solid 1px #000000;
+   padding-top:            10px;
+   padding-bottom:         10px;
+   padding-right:          10px;
+   line-height:            21px;
+   font-size:              12px;
+   vertical-align:         middle;
+}
+
+.menu {
+   position:               absolute;
+   left:                   0px;
+   top:                    0px;
+   height:                 30px;
+   width:                  100%;
+   margin:                 0px;
+   padding:                5px 0px;
+   border-bottom:          solid 1px #000000;
+}
+
+.icons {
+   float:                  left;
+}
+
+/* logo 'text' */
+.logo {
+   background-color:       #eeeeee;
+   font-weight:            bolder;
+}
+
+td.index_header {
+   background-color:       #eeeeee;
+   padding:                10px;
+   vertical-align:         middle;
+   white-space:            nowrap;
+}
+
+td.content_title {
+   background-color:       #eeeeee;
+   padding:                10px;
+   vertical-align:         middle;
+}
+
+img {
+   border:                none;
+}
+
+img.thumb {
+}
+
+a {
+   font-size:              14px;
+   color:                  #008200;
+   text-decoration:        none;
+}
+
+a:hover {
+   color:                  #00aa44;
+}
+
+a.tag {
+   color:                  #000000;
+   text-decoration:        underline;
+}
+
+a.tag:hover {
+   color:                  #00aa44;
+}
+
+a.smalltag {
+   font-size:              12px;
+   color:                  #000000;
+   text-decoration:        underline;
+   font-style:             italic;
+}
+
+a.smalltag:hover {
+   color:                  #00aa44;
+}
+
+a.thumblink {
+   font-size:              12px;
+}
+
+a.calendar {
+   font-size:              10px;
+}
+
+a.thumblink:hover {
+   color:                  #4761ab;
+}
+
+#single {
+   padding:                10px;
+   display:                table;
+   table-layout:           fixed;
+   border:                 hidden;
+   border-spacing:         10px;
+   border-collapse:        separate;
+   margin-left:            auto;
+   margin-right:           auto;
+}
+
+table.matrix {
+   padding:                10px;
+   display:                table;
+   table-layout:           fixed;
+   border-style:           hidden;
+   border-spacing:         10px;
+   border-collapse:        separate;
+   margin-left:            auto;
+   margin-right:           auto;
+}
+
+td.thumb {
+   text-align:             center;
+   display:                table-cell;
+   vertical-align:         top;
+   -moz-border-radius:     3px;
+   border-radius:          3px;
+   border:                 dashed 1px #888888;
+   margin:                 5px;
+   background-color:       #eeeeee;
+   padding:                10px;
+}
+
+#photo_details {
+   width:                  150px;
+   font-size:              12px;
+   padding:                10px;
+   -moz-border-radius:     1em;
+   border-radius:          1em;
+   border:                 dashed 1px #888888;
+}
+
+#available_tags {
+   clip:                   auto;
+   overflow:               auto;
+}
+
+table.calendar tr td {
+   border:                 solid 1px #ffffff;
+   padding:                1px;
+   text-align:             center;
+   font-size:              10px;
+}
+
+.prevMonth {
+    font-size: 10px;
+    text-align: left;
+}
+.nextMonth {
+    font-size: 10px;
+    text-align: right;
+}
+#calendar {
+   position: absolute;
+   width: 140px;
+   height: 200px;
+   background-color: #000000;
+   visibility: hidden;
+   z-index: 1000;
+}
+
+#slide_navigation {
+   text-align:             center;
+   padding:                5px;
+   -moz-border-radius:     5px;
+   border-radius:          5px;
+   border:                 dashed 1px #888888;
+   vertical-align:         middle;
+}
+
+input.submit,input.checkbox {
+   background-color:       transparent;
+   border:                 0px;
+}
+
+input, select, textarea {
+   background-color:       #eeeeee;
+   color:                  #333333;
+   border:                 1px solid #888888;
+   border-collapse:        collapse;
+}
+
diff --git a/themes/default/templates/footer.tpl b/themes/default/templates/footer.tpl
index 5f85cab..70723d9 100644
--- a/themes/default/templates/footer.tpl
+++ b/themes/default/templates/footer.tpl
@@ -1 +1,2 @@
+ </body>
 </html>
diff --git a/themes/default/templates/index.tpl b/themes/default/templates/index.tpl
index d07554e..791dd32 100644
--- a/themes/default/templates/index.tpl
+++ b/themes/default/templates/index.tpl
@@ -1,46 +1,48 @@
 {include file="header.tpl"}
  <body onload="init_phpfspot();">
+ 
+  <!-- top menu -->
+
   <div class="menu">
-   <div style="float: left;">
-   <a href="javascript:showPhotoIndex();" onclick="click(this);" title="Show Photo Index">
-    <img src="resources/photo_index.png" alt="photo index" />
-   </a>
-   <a href="javascript:resetAll();" onclick="click(this);" title="Reset selected-tags and search results">
-    <img src="resources/reload.png" alt="reset tags" />
-   </a>
-   <a href="javascript:showCredits();" onclick="click(this);" title="Show's a little credit page">
-    <img src="resources/credits.png" alt="show credits" />
-   </a>
+   <div class="icons">
+    <a href="javascript:showPhotoIndex();" onclick="click(this);" title="Show Photo Index">
+     <img src="resources/photo_index.png" alt="photo index" />
+    </a>
+    <a href="javascript:resetAll();" onclick="click(this);" title="Reset selected-tags and search results">
+     <img src="resources/reload.png" alt="reset tags" />
+    </a>
+    <a href="javascript:showCredits();" onclick="click(this);" title="Show's a little credit page">
+     <img src="resources/credits.png" alt="show credits" />
+    </a>
+   </div>
+   <div class="logo">&nbsp;{$page_title}</div>
   </div>
-  <div class="logo">&nbsp;{$page_title}</div>
+  <!-- /top menu -->
+
+  <span style="clear: both;">
+  <!-- option column -->
+  <div class="options" style="float: left;">
+   <table>
+    <tr>
+     <td>
+      {include file="search.tpl"}
+     </td>
+    </tr>
+    <tr>
+     <td>
+      <div id="tags">
+       {include file="tags.tpl"}
+      </div>
+     </td>
+    </tr>
+   </table>
   </div>
-  <table>
-   <tr>
-    <td class="options">
-     <table>
-      <tr>
-       <td>
-        {include file="search.tpl"}
-       </td>
-      </tr>
-      <tr>
-       <td>
-        <div id="tags">
-         {include file="tags.tpl"}
-        </div>
-       </td>
-      </tr>
-     </table>
-    </td>
-    <td class="content" style="width: 100%;">
-     <div id="content">
-      {include file="welcome.tpl"}
-     </div>
-    </td>
-   </tr>
-  </table>
-  <div style="text-align: right; font-size: 10px; color: #000000; margin-right: 10px;">
-   Licensed under GPLv3, <a href="http://oss.netshadow.at/oss/phpfspot/Project" style="font-size: 10px; color: #000000">phpfspot</a>
+  <!-- /option column -->
+
+  <!-- content column -->
+  <div id="content" class="content">
+   {include file="welcome.tpl"}
   </div>
- </body>
+  </span>
+
 {include file="footer.tpl"}
diff --git a/themes/default/templates/search.tpl b/themes/default/templates/search.tpl
index cd2a93b..420d6e2 100644
--- a/themes/default/templates/search.tpl
+++ b/themes/default/templates/search.tpl
@@ -21,9 +21,9 @@
      <td>Date:</td>
      <td style="white-space: nowrap;">
       { if ! $date_search_enabled }
-       <input type="checkbox" name="consider_date" value="Y" onclick="datesearch();">
+       <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();">
       { else }
-       <input type="checkbox" name="consider_date" value="Y" onclick="datesearch();" checked="checked">
+       <input type="checkbox" class="checkbox" name="consider_date" value="Y" onclick="datesearch();" checked="checked">
       { /if }
       consider date-range
      </td>