diff options
| -rw-r--r-- | template/cclear/category.tpl | 28 | ||||
| -rw-r--r-- | template/cclear/content.css | 104 |
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 { |