Changeset 845


Ignore:
Timestamp:
Aug 21, 2005, 1:01:53 PM (19 years ago)
Author:
chrisaga
Message:

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

Location:
trunk/template/cclear
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/template/cclear/category.tpl

    r843 r845  
    9595  <div class="titrePage">
    9696    <ul class="categoryActions">
     97      <li>&nbsp;</li>
    9798      <!-- BEGIN caddie -->
    98       <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/default/theme/caddie_add.png" /></a></li>
     99      <li><a href="{caddie.URL}" title="{lang:add to caddie}"><img src="./template/default/theme/caddie_add.png" alt="{lang:caddie}"/></a></li>
    99100      <!-- END caddie -->
    100101      <!-- BEGIN edit -->
     
    113114  <!-- BEGIN line -->
    114115  <!-- BEGIN thumbnail -->
    115   <li><span>
    116     <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
    117       <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
    118            alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
    119            title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
    120     </a>
    121       <!-- BEGIN element_name -->
    122       <p>
    123         <span class="thumb_picture">{thumbnails.line.thumbnail.element_name.NAME}</span>
     116  <li class="thumbnails">
     117    <div>
     118        <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
     119          <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
     120          alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
     121          title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
     122        </a>
     123      <ul>
     124      <li>
     125        <!-- BEGIN element_name -->
     126        {thumbnails.line.thumbnail.element_name.NAME}
    124127        <!-- END element_name -->
    125128        <!-- BEGIN category_name -->
    126         <span class="thumb_category">[{thumbnails.line.thumbnail.category_name.NAME}]</span>
     129        [{thumbnails.line.thumbnail.category_name.NAME}]
    127130        <!-- END category_name -->
    128131        {thumbnails.line.thumbnail.IMAGE_TS}
    129       </p>
    130     <!-- BEGIN nb_comments -->
    131     <br />
    132     {thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT}
    133     <!-- END nb_comments -->
    134   </span></li>
     132      </li>
     133      <!-- BEGIN nb_comments -->
     134      <li>{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT} </li>
     135      <!-- END nb_comments -->
     136     </div>
     137  </li>
    135138  <!-- END thumbnail -->
    136139  <!-- END line -->
  • trunk/template/cclear/content.css

    r843 r845  
    1717    margin: 0; padding: 0;
    1818    list-style-type: none;
    19     /*text-align: center;  eventuellement */
     19    text-align: center;  /*eventuellement */
    2020}
    2121
    22 #content UL.thumbnails LI {
     22#content LI.thumbnails {
    2323        display: inline;
    24         /*text-align: center; */
    2524        padding: 0; text-indent: 0;
    2625        margin: 0 10px 10px 10px;
    2726}
     27#content UL.thumbnails UL {
     28        margin: 0; padding: 0; text-indent: 0;
     29        list-style-type: none;
     30}
    2831#content UL.thumbnails UL LI {
    29         dislplay: list-item;
     32        text-align: center;
    3033}
     34#content UL.thumbnails div {
     35        margin: 0;
     36        vertical-align: top;   /*geko doesn't eat that :-(*/
     37        text-align: center;
     38        width: 128px;
     39}
     40/* IE block level element inline-block hack */
     41* html #content UL.thumbnails div {display:inline-block;}
     42* html #content UL.thumbnails div {display:inline;}
     43/* end of IE hack*/
     44/* for non-IE */
     45#content UL.thumbnails li>div {display:table-cell;display:inline-table;}
    3146
    32 #content UL.thumbnails SPAN {
    33         margin: 0;
    34         /*margin: 0 10px 10px 10px;*/
    35         vertical-align: top;
    36         width: 128px;
    37         display:table-cell;   /* for geko */
    38         display:inline-table; /* for ??? (ask yoDan) */
    39         display:inline-block; /* for IE */
    40         text-align: center;    for IE */
    41 border: 1px solid yellow;
     47/* Geko hack to get thumbnails top aligned*/
     48/* not proud of that still looking for a better one */
     49#content UL.thumbnails li>div {height:150px;}
     50/* endof Geko hack*/
     51
     52/* align top with geko */
     53/*#content UL.thumbnails li>div>div {
     54        display: block;
     55        position: relative;
     56        height:128px;
    4257}
     58#content UL.thumbnails li>div>div>a { position: absolute; top: 0; }
     59#content UL.thumbnails li>div img.thumbnail { position: relative; left: -50%; }
     60#content UL.thumbnails li>div ul {position: absolute; bottom: 0;}
     61doesn't work :-((*/
     62
    4363/*#content UL.thumbnails LI>SPAN { vertical-align: baseline; }*/
    4464#content UL.thumbnails LI IMG.thumbnail { margin-bottom: .4ex; }
     
    4666#content UL.thumbnails IMG.thumbnail { border: 1px solid #000000; }
    4767
    48 #content UL.thumbnails SPAN A:first-child { border: none }
    49 
    50 
     68/*#content UL.thumbnails SPAN A:first-child { border: none }*/
    5169
    5270
Note: See TracChangeset for help on using the changeset viewer.