aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorchrisaga <chrisaga@piwigo.org>2006-07-29 16:26:52 +0000
committerchrisaga <chrisaga@piwigo.org>2006-07-29 16:26:52 +0000
commit8723b9cf294ae8360cba618a958288621e59e219 (patch)
tree2fe3155f62a2c14a28feca284dcb35440b1d0a16
parent7e35acd1cd9e75678dea76ca37e61d275ad210a0 (diff)
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
-rw-r--r--template-common/default-layout.css2
-rw-r--r--template/yoga/admin/element_set_global.tpl17
-rw-r--r--template/yoga/thumbnails-fix-ie5-ie6.css10
-rw-r--r--template/yoga/thumbnails.css17
4 files changed, 27 insertions, 19 deletions
diff --git a/template-common/default-layout.css b/template-common/default-layout.css
index 2a0cbd086..79797560b 100644
--- a/template-common/default-layout.css
+++ b/template-common/default-layout.css
@@ -27,7 +27,7 @@ BODY#theAdminPage #content {
/* Set some sizes according to your maximum thumbnail width and height */
#content UL.thumbnails SPAN,
#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL,
+#content UL.thumbnails LABEL,
#content DIV.thumbnailCategory DIV.illustration {
width: 140px; /* max thumbnail width + 2px */
}
diff --git a/template/yoga/admin/element_set_global.tpl b/template/yoga/admin/element_set_global.tpl
index 7bb9d7006..88acd3a50 100644
--- a/template/yoga/admin/element_set_global.tpl
+++ b/template/yoga/admin/element_set_global.tpl
@@ -32,14 +32,17 @@
<!-- BEGIN thumbnails -->
<ul class="thumbnails">
<!-- BEGIN thumbnail -->
- <li><span class="wrap1"><span class="wrap2">
+ <li><span class="wrap1">
<label>
- <img src="{thumbnails.thumbnail.SRC}"
- alt="{thumbnails.thumbnail.ALT}"
- title="{thumbnails.thumbnail.TITLE}"
- class="thumbnail" />
- <input type="checkbox" name="selection[]" value="{thumbnails.thumbnail.ID}" />
- </label></span></span>
+ <span class="wrap2"><span>
+ <img src="{thumbnails.thumbnail.SRC}"
+ alt="{thumbnails.thumbnail.ALT}"
+ title="{thumbnails.thumbnail.TITLE}"
+ class="thumbnail" />
+ </span></span>
+ <input type="checkbox" name="selection[]" value="{thumbnails.thumbnail.ID}" />
+ </label>
+ </span>
</li>
<!-- END thumbnail -->
</ul>
diff --git a/template/yoga/thumbnails-fix-ie5-ie6.css b/template/yoga/thumbnails-fix-ie5-ie6.css
index 25af117a8..66adaad08 100644
--- a/template/yoga/thumbnails-fix-ie5-ie6.css
+++ b/template/yoga/thumbnails-fix-ie5-ie6.css
@@ -6,12 +6,13 @@
text-align: left;
}
#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL {
+#content UL.thumbnails SPAN.wrap2 SPAN {
overflow: visible;
position: absolute;
top: 50%;
text-align: center;
}
+
#content UL.thumbnails IMG.thumbnail {
position: relative;
top: -50%;
@@ -19,9 +20,8 @@
margin-top: -40%;
/**/
}
-#content UL.thumbnails SPAN.wrap2 input {
+#content UL.thumbnails INPUT {
position: absolute;
- left: 0;
- top: -50%; /* same as other browsers but not so pretty */
+ left: 2px;
+ top: 2px; /* same as other browsers but not so pretty */
}
-
diff --git a/template/yoga/thumbnails.css b/template/yoga/thumbnails.css
index c73d080ef..854a10dda 100644
--- a/template/yoga/thumbnails.css
+++ b/template/yoga/thumbnails.css
@@ -27,7 +27,7 @@
vertical-align: middle; /* Ok with Opera and Geko not IE6 */
}
#content UL.thumbnails SPAN.wrap2 A,
-#content UL.thumbnails SPAN.wrap2 LABEL {
+#content UL.thumbnails LABEL {
display: block;
border-bottom: none;
}
@@ -36,12 +36,17 @@
}
/* label and input used for caddie in admin section */
-#content UL.thumbnails SPAN.wrap2 LABEL {
+#content UL.thumbnails LABEL {
position: relative;
}
-:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
- position: absolute;
- left: 0;
- top: 0;
+
+#content UL.thumbnails INPUT {
+ position: relative; /* <= Opera can handle relative here */
+ top: -20px;
+}
+:root #content UL.thumbnails INPUT { /* hide from Opera */
+ position: absolute; /* <= Opera hide 1 checkbox over 2 !!! */
+ left: 2px;
+ top: 2px;
}