aboutsummaryrefslogtreecommitdiffstats
path: root/template
diff options
context:
space:
mode:
authorchrisaga <chrisaga@piwigo.org>2005-08-21 11:01:53 +0000
committerchrisaga <chrisaga@piwigo.org>2005-08-21 11:01:53 +0000
commitfcd667ac8010f1bd31fa1846572ae24df56ccdfe (patch)
tree7bf6012fe9ab3954939edf94519b71420141b5fa /template
parentb09f16ed7dad28db18ebf2837b4cc98b55d1e3a1 (diff)
The best thumbnail pseudo table I can do for now
It's div based and informations are in a list The hack is to fix height for Geko only Opera 7 doesn't display very well git-svn-id: http://piwigo.org/svn/trunk@845 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'template')
-rw-r--r--template/cclear/category.tpl37
-rw-r--r--template/cclear/content.css50
2 files changed, 54 insertions, 33 deletions
diff --git a/template/cclear/category.tpl b/template/cclear/category.tpl
index 841ee8705..3e34dbe0c 100644
--- a/template/cclear/category.tpl
+++ b/template/cclear/category.tpl
@@ -94,8 +94,9 @@
<div id="content">
<div class="titrePage">
<ul class="categoryActions">
+ <li>&nbsp;</li>
<!-- BEGIN caddie -->
- <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/default/theme/caddie_add.png" /></a></li>
+ <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/default/theme/caddie_add.png" alt="{lang:caddie}"/></a></li>
<!-- END caddie -->
<!-- BEGIN edit -->
<li><a href="{edit.URL}" title="{lang:edit category informations}"><img src="./template/default/theme/category_edit.png" alt="{lang:edit}"/></a></li>
@@ -112,26 +113,28 @@
<ul class="thumbnails">
<!-- BEGIN line -->
<!-- BEGIN thumbnail -->
- <li><span>
- <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>
- <!-- BEGIN element_name -->
- <p>
- <span class="thumb_picture">{thumbnails.line.thumbnail.element_name.NAME}</span>
+ <li class="thumbnails">
+ <div>
+ <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 -->
- <span class="thumb_category">[{thumbnails.line.thumbnail.category_name.NAME}]</span>
+ [{thumbnails.line.thumbnail.category_name.NAME}]
<!-- END category_name -->
{thumbnails.line.thumbnail.IMAGE_TS}
- </p>
- <!-- BEGIN nb_comments -->
- <br />
- {thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT}
- <!-- END nb_comments -->
- </span></li>
+ </li>
+ <!-- BEGIN nb_comments -->
+ <li>{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT} </li>
+ <!-- END nb_comments -->
+ </div>
+ </li>
<!-- END thumbnail -->
<!-- END line -->
diff --git a/template/cclear/content.css b/template/cclear/content.css
index 885eef35c..355358ba3 100644
--- a/template/cclear/content.css
+++ b/template/cclear/content.css
@@ -16,38 +16,56 @@
#content UL.thumbnails {
margin: 0; padding: 0;
list-style-type: none;
- /*text-align: center; eventuellement */
+ text-align: center; /*eventuellement */
}
-#content UL.thumbnails LI {
+#content LI.thumbnails {
display: inline;
- /*text-align: center; */
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 {
- dislplay: list-item;
+ text-align: center;
}
-
-#content UL.thumbnails SPAN {
+#content UL.thumbnails div {
margin: 0;
- /*margin: 0 10px 10px 10px;*/
- vertical-align: top;
+ vertical-align: top; /*geko doesn't eat that :-(*/
+ text-align: center;
width: 128px;
- display:table-cell; /* for geko */
- display:inline-table; /* for ??? (ask yoDan) */
- display:inline-block; /* for IE */
- text-align: center; for IE */
-border: 1px solid yellow;
}
+/* 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 }
-
-
+/*#content UL.thumbnails SPAN A:first-child { border: none }*/
#content .navigationBar, #content .additional_info {