move search & sort. That also fix w3c validation error. re #41

index.php

@@ -93,11 +93,11 @@
                 <?php if ($isEink) echo ", openEffect : 'none', closeEffect : 'none', helpers : {overlay : null}"; ?>
             });
             
-            $("#searchImage").click(function(){
-                if ($("#search").is(":hidden")) {
-                    $("#search").slideDown("slow");
+            $("#settingsImage").click(function(){
+                if ($("#tool").is(":hidden")) {
+                    $("#tool").slideDown("slow");
                 } else {
-                    $("#search").slideUp();
+                    $("#tool").slideUp();
                 }
             });
             
@@ -151,21 +151,31 @@
             </a>
         </div>
         <div class="headright">
-            <img id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
+            <img id="settingsImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
         </div>
         <div class="headcenter">
             <p><?php echo htmlspecialchars ($currentPage->title) ?></p>
         </div>
     </div>
     <div class="clearer" />
-    <div class="menu">
-        <div id="search" class="search">
+    <div id="tool" >
+        <div style="float: left; width: 60%">
             <form action="index.php?page=9" method="get">
-                <input type="text" name="query" />
-                <input type="hidden" name="page" value="9" />
-                <input type="image" src="images/search32.png" alt="Search" />
+                <div style="float: right">
+                    <input type="image" src="images/search32.png" alt="Search" />
+                </div>
+                <div class="stop">
+                    <input type="hidden" name="page" value="9" />
+                    <input type="text" name="query" />
+                </div>
             </form>
-            <form action="index.php?page=9" method="get">
+        </div>
+<?php if ($currentPage->containsBook ()) { ?>
+        <div style="float: right; width: 35%">
+            <div style="float: right">
+                <img id="sort" src="images/sort32.png" alt="Sort" />
+            </div>
+            <div class="stop">
                 <select id="sortchoice">
                     <option value="st"><?php echo localize("bookword.title") ?></option>
                     <option value="sa"><?php echo localize("authors.title") ?></option>
@@ -176,9 +186,9 @@
                     <option value="asc">Asc</option>
                     <option value="desc">Desc</option>
                 </select> 
-                <img id="sort" src="images/sort32.png" alt="Sort" />
-            </form>
+            </div>
         </div>
+<?php } ?>
     </div>
     <div class="clearer" />
     <div id="content" style="display: none;"></div>

style.css

@@ -35,6 +35,40 @@ width:100%;
 height:32px;
 }
 
+#tool
+{
+margin-top: 5px;
+color:white;
+background-color:black;
+width:100%;
+height:32px;
+overflow: hidden;
+}
+
+#tool input[type=text]
+{
+vertical-align: middle;
+width: 100%;
+margin: 5px;
+}
+
+.stop select
+{
+vertical-align: middle;
+margin: 5px;
+}
+
+#sort
+{
+cursor:pointer;
+}
+
+.stop
+{
+display: block;
+overflow: hidden;
+}
+
 img
 {
 margin:0;
@@ -219,46 +253,11 @@ padding: 6px;
 display: inline;
 }
 
-.menu
-{
-float: right;
-width : 250px;
-}
-
-.search
-{
-display:none;
-width : 250px;
-position: absolute;
-background: white;
-}
-
-.search form
-{
-background-color: black;
-margin-top: 3px;
-border-radius: 6px;
-}
-
-.search input[type=text], .search select
-{
-vertical-align: middle;
-margin: 8px 10px;
-}
-
-.search input[type=image], .search img
-{
-vertical-align: middle;
-float:right;
-padding: 3px 2px;
-}
-
 .bookdetail
 {
 color:black;
 }
 
-
 .bookpopup
 {
 min-width: 400px;