iarv/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-05-04 12:32:48 +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

37
template/cclear/category.tpl
View File

@@ -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 -->

50
template/cclear/content.css
View File

@@ -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 {