aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorchrisaga <chrisaga@piwigo.org>2005-08-29 18:14:27 +0000
committerchrisaga <chrisaga@piwigo.org>2005-08-29 18:14:27 +0000
commit3354d77847ff7a8431b1daa5f810cbd7a3cc5c86 (patch)
tree7f211d790a504cc2b7dbd117c4ae661e97ddba8e
parenta891960d5a9ac504a173520f4604e6740c58493b (diff)
New thubmnails layout in category based on the "girafe" pages by yoDan
git-svn-id: http://piwigo.org/svn/trunk@855 68402e56-0260-453c-a942-63ccdbb3a9ee
-rw-r--r--template/cclear/category.tpl28
-rw-r--r--template/cclear/content.css104
2 files changed, 65 insertions, 67 deletions
diff --git a/template/cclear/category.tpl b/template/cclear/category.tpl
index bb218f9be..96744606d 100644
--- a/template/cclear/category.tpl
+++ b/template/cclear/category.tpl
@@ -111,28 +111,26 @@
<ul class="thumbnails">
<!-- BEGIN line -->
<!-- BEGIN thumbnail -->
- <li class="thumbnails">
- <div>
+ <li>
+ <span>
+ <span><span class="wrap">
<a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
<img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
</a>
- <ul>
- <li>
- <!-- BEGIN element_name -->
- {thumbnails.line.thumbnail.element_name.NAME}
- <!-- END element_name -->
- <!-- BEGIN category_name -->
- [{thumbnails.line.thumbnail.category_name.NAME}]
- <!-- END category_name -->
- {thumbnails.line.thumbnail.IMAGE_TS}
- </li>
+ </span></span>
+ <!-- BEGIN element_name -->
+ {thumbnails.line.thumbnail.element_name.NAME}
+ <!-- END element_name -->
+ <!-- BEGIN category_name -->
+ [{thumbnails.line.thumbnail.category_name.NAME}]
+ <!-- END category_name -->
+ {thumbnails.line.thumbnail.IMAGE_TS}
<!-- BEGIN nb_comments -->
- <li>{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT} </li>
+ <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT}
<!-- END nb_comments -->
- </ul>
- </div>
+ </span>
</li>
<!-- END thumbnail -->
<!-- END line -->
diff --git a/template/cclear/content.css b/template/cclear/content.css
index 8589c4520..c29cf99f6 100644
--- a/template/cclear/content.css
+++ b/template/cclear/content.css
@@ -28,58 +28,58 @@ BODY#theNotificationPage #content
}
#content UL.thumbnails {
- margin: 0; padding: 0;
- list-style-type: none;
- text-align: center; /*eventuellement */
-}
-
-#content LI.thumbnails {
- display: inline;
- padding: 0; text-indent: 0;
- margin: 0 10px 10px 10px;
-}
-#content UL.thumbnails UL {
- margin: 0; padding: 0; text-indent: 0;
- list-style-type: none;
-}
-#content UL.thumbnails UL LI {
- text-align: center;
-}
-#content UL.thumbnails div {
- margin: 0;
- vertical-align: top; /*geko doesn't eat that :-(*/
- text-align: center;
- width: 128px;
-}
-/* IE block level element inline-block hack */
-* html #content UL.thumbnails div {display:inline-block;}
-* html #content UL.thumbnails div {display:inline;}
-/* end of IE hack*/
-/* for non-IE */
-#content UL.thumbnails li>div {display:table-cell;display:inline-table;}
-
-/* Geko hack to get thumbnails top aligned*/
-/* not proud of that still looking for a better one */
-#content UL.thumbnails li>div {height:150px;}
-/* endof Geko hack*/
-
-/* align top with geko */
-/*#content UL.thumbnails li>div>div {
- display: block;
- position: relative;
- height:128px;
-}
-#content UL.thumbnails li>div>div>a { position: absolute; top: 0; }
-#content UL.thumbnails li>div img.thumbnail { position: relative; left: -50%; }
-#content UL.thumbnails li>div ul {position: absolute; bottom: 0;}
-doesn't work :-((*/
-
-/*#content UL.thumbnails LI>SPAN { vertical-align: baseline; }*/
-#content UL.thumbnails LI IMG.thumbnail { margin-bottom: .4ex; }
-
-#content UL.thumbnails IMG.thumbnail { border: 1px solid #000000; }
-
-/*#content UL.thumbnails SPAN A:first-child { border: none }*/
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ text-align: center; /* to center the whole collection in #content */
+}
+#content UL.thumbnails LI { display: inline }
+
+#content UL.thumbnails SPAN {
+ margin: 0 5px 5px 5px;
+ /*width: 130px; 128px + 2 * 1px if the SPAN has a border of 1px */
+ width: 128px; /* we can use the same size as well */
+ display: table-cell; display: inline-table; display: inline-block;
+ vertical-align: top; /* OK with Opera and IE6 not Geko */
+ text-align: center; /* to center the thumbnail and legend in Geko/Opera */
+}
+#content UL.thumbnails SPAN SPAN {
+ margin: 0; /* important reset the margins */
+ border: 1px solid #aaaaaa;
+ width: 128px; /* fixed size again */
+ height: 128px; /* fixed size again */
+ display: table-cell; /* block prevents vertical-align here */
+ vertical-align: middle; /* Ok with Opera and Geko not IE6 */
+}
+#content UL.thumbnails SPAN.wrap {
+ border: none;
+ height: auto; /* important for vertical centering */
+ display: block; /* important */
+ overflow: hidden; /* everridden by specific IE6 rule below */
+ margin-top: auto; /* to make vertical-align work in Geko and Opera */
+ margin-bottom: auto; /* to make vertical-align work in Geko and Opera */
+}
+#content UL.thumbnails IMG {
+ margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/
+}
+
+/* fix IE with another layout */
+* html #content UL.thumbnails SPAN {
+ overflow: hidden; /* keep it there: not needed by Geko, buggy with Opera */
+}
+* html #content UL.thumbnails SPAN SPAN {
+ position: relative;
+}
+* html #content UL.thumbnails SPAN.wrap {
+ overflow: visible;
+ position: absolute;
+ top: 50%;
+ left: 0px; /* same as "#content UL.thumbnails SPAN SPAN { padding:" if any*/
+}
+* html #content UL.thumbnails IMG {
+ position: relative;
+ top: -50%;
+}
#content .navigationBar, #content .additional_info {