improve caddie display : better checkbox positionning in every tested browsers.

Opera still not perfect , but much better.

git-svn-id: http://piwigo.org/svn/trunk@1518 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
chrisaga 2006-07-29 16:26:52 +00:00
commit 8723b9cf29
4 changed files with 27 additions and 19 deletions

View file

@ -27,7 +27,7 @@ BODY#theAdminPage #content {
/* Set some sizes according to your maximum thumbnail width and height */ /* Set some sizes according to your maximum thumbnail width and height */
#content UL.thumbnails SPAN, #content UL.thumbnails SPAN,
#content UL.thumbnails SPAN.wrap2 A, #content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL, #content UL.thumbnails LABEL,
#content DIV.thumbnailCategory DIV.illustration { #content DIV.thumbnailCategory DIV.illustration {
width: 140px; /* max thumbnail width + 2px */ width: 140px; /* max thumbnail width + 2px */
} }

View file

@ -32,14 +32,17 @@
<!-- BEGIN thumbnails --> <!-- BEGIN thumbnails -->
<ul class="thumbnails"> <ul class="thumbnails">
<!-- BEGIN thumbnail --> <!-- BEGIN thumbnail -->
<li><span class="wrap1"><span class="wrap2"> <li><span class="wrap1">
<label> <label>
<img src="{thumbnails.thumbnail.SRC}" <span class="wrap2"><span>
alt="{thumbnails.thumbnail.ALT}" <img src="{thumbnails.thumbnail.SRC}"
title="{thumbnails.thumbnail.TITLE}" alt="{thumbnails.thumbnail.ALT}"
class="thumbnail" /> title="{thumbnails.thumbnail.TITLE}"
<input type="checkbox" name="selection[]" value="{thumbnails.thumbnail.ID}" /> class="thumbnail" />
</label></span></span> </span></span>
<input type="checkbox" name="selection[]" value="{thumbnails.thumbnail.ID}" />
</label>
</span>
</li> </li>
<!-- END thumbnail --> <!-- END thumbnail -->
</ul> </ul>

View file

@ -6,12 +6,13 @@
text-align: left; text-align: left;
} }
#content UL.thumbnails SPAN.wrap2 A, #content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL { #content UL.thumbnails SPAN.wrap2 SPAN {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
top: 50%; top: 50%;
text-align: center; text-align: center;
} }
#content UL.thumbnails IMG.thumbnail { #content UL.thumbnails IMG.thumbnail {
position: relative; position: relative;
top: -50%; top: -50%;
@ -19,9 +20,8 @@
margin-top: -40%; margin-top: -40%;
/**/ /**/
} }
#content UL.thumbnails SPAN.wrap2 input { #content UL.thumbnails INPUT {
position: absolute; position: absolute;
left: 0; left: 2px;
top: -50%; /* same as other browsers but not so pretty */ top: 2px; /* same as other browsers but not so pretty */
} }

View file

@ -27,7 +27,7 @@
vertical-align: middle; /* Ok with Opera and Geko not IE6 */ vertical-align: middle; /* Ok with Opera and Geko not IE6 */
} }
#content UL.thumbnails SPAN.wrap2 A, #content UL.thumbnails SPAN.wrap2 A,
#content UL.thumbnails SPAN.wrap2 LABEL { #content UL.thumbnails LABEL {
display: block; display: block;
border-bottom: none; border-bottom: none;
} }
@ -36,12 +36,17 @@
} }
/* label and input used for caddie in admin section */ /* label and input used for caddie in admin section */
#content UL.thumbnails SPAN.wrap2 LABEL { #content UL.thumbnails LABEL {
position: relative; position: relative;
} }
:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
position: absolute; #content UL.thumbnails INPUT {
left: 0; position: relative; /* <= Opera can handle relative here */
top: 0; top: -20px;
}
:root #content UL.thumbnails INPUT { /* hide from Opera */
position: absolute; /* <= Opera hide 1 checkbox over 2 !!! */
left: 2px;
top: 2px;
} }