improve : a more compact header to picture.tpl (+ use css instead of hidden hr)

git-svn-id: http://piwigo.org/svn/trunk@1325 68402e56-0260-453c-a942-63ccdbb3a9ee

template/yoga/image.css

@@ -1,48 +1,35 @@
 #imageHeaderBar {
-    padding: 2px 10px;
-    margin: 4px 0;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin-top: 4px;
+  overflow: hidden;
+  width: 100%;
+}
+
+#imageHeaderBar .browsePath {
+  float: left;
+  margin-left: 10px;
+}
+
+#imageHeaderBar .imageNumber {
+  float: right;
+  margin-right: 10px;
 }
-#imageHeaderBar .browsePath { float: left; }
-#imageHeaderBar .imageNumber { float: right; }
 
 #imageHeaderBar H2 {
-    /*margin: 1ex 0;  override default-layout for less bottom-margin */
-    text-align: center;
-    padding: 0;
-    clear: both;
+  text-align: center;
+  padding: 0;
+  clear: both;
 }
 
 #imageToolBar {
-    text-align: center;
-    position: relative;
-    clear: both;
-    margin: 4px 0; padding: 0;
+  text-align: center;
+  position: relative;
+  clear: both;
+  margin-bottom: 4px;
+  padding: 0;
 }
 
-/* Moi, je preferais les boutons "imgPrec" et "imgSuiv" au milieu, au-dessus
-de l'image...
-
-#imageToolBar IMG, #imageToolBar A {
-    display: inline;
-    border: none; margin: auto; padding: 0;
-}
-
-#imageToolBar .randomButtons {
-    position: absolute;
-    left: 0;
-}
-#imageToolBar .randomButtons IMG {
-    padding: 0 4px; /* au pire: 3 * (4+24+4) = 96 < 100 * /
-}
-
-#imageToolBar .prevNnext {
-    text-align: center;
-}
-#imageToolBar .prevNnext IMG {
-    padding: 0 100px;
-}
-*/
-
 #imageToolBar {
     height: 28px;
 }

template/yoga/picture.tpl

@@ -12,7 +12,6 @@
   <!-- BEGIN title -->
   <h2>{TITLE}</h2>
   <!-- END title -->
-  <hr class="separation">
 </div>
 
 <div id="imageToolBar">

template/yoga/theme/dark/theme.css

@@ -46,11 +46,18 @@ H2, #menubar DT, .throw  {
 }
 
 /* borders */
-#menubar DL, #content, #imageToolBar,
+#menubar DL, #content,
 #comments DIV.comment BLOCKQUOTE {
   border: 1px solid #000000;
 }
 
+#imageHeaderBar {
+  border-top: 1px solid #000000;
+}
+H2, #menubar DT, #imageToolBar {
+  border-bottom: 1px solid #000000;
+}
+
 #theImage IMG {
   border-color: #000000;
 }
@@ -78,10 +85,6 @@ FIELDSET, INPUT, SELECT, TEXTAREA,
   border-color: yellow;		/* thumbnails border color when mouse cursor is over it */
 }
 
-H2, #menubar DT, #imageHeaderBar {
-  border-bottom: 1px solid #000000;
-}
-
 /* links */
 A, .rateButton {
   color: #FFFFFF;