adam/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-07-21 09:03:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

The best thumbnail pseudo table I can do for now

Browse Source 
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
This commit is contained in:
chrisaga
2005-08-21 11:01:53 +00:00
parent b09f16ed7d
commit fcd667ac80
2 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
template/cclear/category.tpl
+20 -17
View File
@@ -94,8 +94,9 @@
<div id="content"> <div id="content">
<div class="titrePage"> <div class="titrePage">
<ul class="categoryActions"> <ul class="categoryActions">
<li>&nbsp;</li>
<!-- BEGIN caddie --> <!-- 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 --> <!-- END caddie -->
<!-- BEGIN edit --> <!-- 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> <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"> <ul class="thumbnails">
<!-- BEGIN line --> <!-- BEGIN line -->
<!-- BEGIN thumbnail --> <!-- BEGIN thumbnail -->
<li><span> <li class="thumbnails">
<a href="{thumbnails.line.thumbnail.U_IMG_LINK}"> <div>
<img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}" <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
alt="{thumbnails.line.thumbnail.IMAGE_ALT}" <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
title="{thumbnails.line.thumbnail.IMAGE_TITLE}"> alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
</a> title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
<!-- BEGIN element_name --> </a>
<p> <ul>
<span class="thumb_picture">{thumbnails.line.thumbnail.element_name.NAME}</span> <li>
<!-- BEGIN element_name -->
{thumbnails.line.thumbnail.element_name.NAME}
<!-- END element_name --> <!-- END element_name -->
<!-- BEGIN category_name --> <!-- BEGIN category_name -->
<span class="thumb_category">[{thumbnails.line.thumbnail.category_name.NAME}]</span> [{thumbnails.line.thumbnail.category_name.NAME}]
<!-- END category_name --> <!-- END category_name -->
{thumbnails.line.thumbnail.IMAGE_TS} {thumbnails.line.thumbnail.IMAGE_TS}
</p> </li>
<!-- BEGIN nb_comments --> <!-- BEGIN nb_comments -->
<br /> <li>{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT} </li>
{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT} <!-- END nb_comments -->
<!-- END nb_comments --> </div>
</span></li> </li>
<!-- END thumbnail --> <!-- END thumbnail -->
<!-- END line --> <!-- END line -->
template/cclear/content.css
+34 -16
View File
@@ -16,38 +16,56 @@
#content UL.thumbnails { #content UL.thumbnails {
margin: 0; padding: 0; margin: 0; padding: 0;
list-style-type: none; list-style-type: none;
/*text-align: center; eventuellement */ text-align: center; /*eventuellement */
} }
#content UL.thumbnails LI { #content LI.thumbnails {
display: inline; display: inline;
/*text-align: center; */
padding: 0; text-indent: 0; padding: 0; text-indent: 0;
margin: 0 10px 10px 10px; 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 { #content UL.thumbnails UL LI {
dislplay: list-item; text-align: center;
} }
#content UL.thumbnails div {
#content UL.thumbnails SPAN {
margin: 0; margin: 0;
/*margin: 0 10px 10px 10px;*/ vertical-align: top; /*geko doesn't eat that :-(*/
vertical-align: top; text-align: center;
width: 128px; 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>SPAN { vertical-align: baseline; }*/
#content UL.thumbnails LI IMG.thumbnail { margin-bottom: .4ex; } #content UL.thumbnails LI IMG.thumbnail { margin-bottom: .4ex; }
#content UL.thumbnails IMG.thumbnail { border: 1px solid #000000; } #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 { #content .navigationBar, #content .additional_info {