aboutsummaryrefslogtreecommitdiffstats
path: root/template/yoga/content.css
diff options
context:
space:
mode:
authorchrisaga <chrisaga@piwigo.org>2005-11-17 20:13:36 +0000
committerchrisaga <chrisaga@piwigo.org>2005-11-17 20:13:36 +0000
commitf280ff4b171e1c3b6150794ac8a875b00e4f7522 (patch)
treea2f7b47a1b3bc4f7f288b0c9e63b0e5519ee16c0 /template/yoga/content.css
parentb6833701d641406055951c77f0371476cee47cf0 (diff)
bug 206 fixed: PNG thumbnails clipped with IE
- added class="icon" to recent.png (functions_html.inc.php) - added class="button" to al png button images (*.tpl) - changed pngfix.js to only fix icon or button images template improvement: category prettier and simpler (a little bit) - got rid of one SPAN level - content.css more readable git-svn-id: http://piwigo.org/svn/branches/branch-1_5@939 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--template/yoga/content.css61
1 files changed, 32 insertions, 29 deletions
diff --git a/template/yoga/content.css b/template/yoga/content.css
index 8ed3d1189..725e5f95d 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -29,8 +29,28 @@ BODY#theNotificationPage #content
margin-bottom: 1ex;
}
+/* Thumbnails customization */
+#content UL.thumbnails SPAN, #content UL.thumbnails SPAN.wrap2 A {
+ width: 140px; /* max thumbnail width + 2px */
+}
+#content UL.thumbnails SPAN.wrap2 {
+ height: 140px; /* max thumbnail height + 2px */
+}
+#content UL.thumbnails SPAN.wrap2 {
+ border: 1px solid #aaaaaa; /* thumbnails border color and style */
+ -moz-border-radius: 4px; /* round corners with Geko */
+ border-radius: 4px 4px; /* round corners with CSS3 compliant browsers */
+}
+#content UL.thumbnails SPAN.wrap2:hover {
+ border-color: yellow; /* thumbnails border color when mouse cursor is over it */
+}
+#content UL.thumbnails SPAN.thumbLegend {
+ font-size: 80%; /* font size */
+ height: 3em; /* max legend height (don't set auto to be Geko friendly)*/
+ display: block; /* display: hide if you don't want legend */
+ overflow: hidden; /* oversized legend is clipped */
+}
/* Thumbnail "elastic" layout */
-
#content UL.thumbnails {
margin: 0;
padding: 0;
@@ -39,59 +59,42 @@ BODY#theNotificationPage #content
}
#content UL.thumbnails LI { display: inline }
-#content UL.thumbnails SPAN {
+#content UL.thumbnails SPAN.wrap1 {
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 */
- font-size: 80%;
}
-#content UL.thumbnails SPAN SPAN {
+#content UL.thumbnails SPAN.wrap2 {
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 SPAN.wrap2 A {
+ display: block;
+ border-bottom: none;
}
#content UL.thumbnails IMG {
margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/
}
-/* fix Geko's lack of good willing in vertical-align: top */
-/* Too dirty : have to find something better */
-/*#content UL.thumbnails>LI>SPAN{*/
-/* height: 170px;*/ /* unfortunately min-height doesn't work here */
-/*}*/
/* 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 {
+* html #content UL.thumbnails SPAN.wrap2 {
+ display: block;
position: relative;
+ text-align: left;
}
-* html #content UL.thumbnails SPAN.wrap {
+* html #content UL.thumbnails SPAN.wrap2 A {
overflow: visible;
position: absolute;
top: 50%;
- left: 0px; /* same as "#content UL.thumbnails SPAN SPAN { padding:" if any*/
+ text-align: center;
}
* html #content UL.thumbnails IMG.thumbnail {
position: relative;
top: -50%;
}
-
#content .navigationBar, #content .additional_info {
margin: 10px 0;
text-align: center;
@@ -173,7 +176,7 @@ ul.categoryActions {
}
#content DIV.comment BLOCKQUOTE {
- margin: 1em 1em 1em 150px; /* margin-left corresponds to maximum thumbnail width */
+ margin: 1em 1em 1em 140px; /* margin-left corresponds to maximum thumbnail width */
border: 1px solid #d3d3d3;
border-left: 2px solid gray;
padding: 0.5em;