How to use textboxes in header?

Hello,

I searched the whole forum, but didn't find the solution for my problem.
I want to have "filter" textboxes in the header, and I found the next information:

To place the textboxes I need to use this:

.active-scroll-top .active-box-image {height: 50%}

but to have the text centerd in the hader I need to use this:

.active-scroll-top * .active-box-image {text-align: center;}

How to combine these two?

Now I placed a textbox in the header, but as soon as I click on it, the list below it get sorted; than this code is activated:
templates/header.js

obj.setEvent("onmousedown", function(){
    this.setClass("header", "pressed");
    window.status = "Sorting...";
    this.timeout(function(){this.action("columnSort")});
  });

How to turn that code/function off in the input boxes (and on a picture) ? (I also placed a picture in the header, and if you click on it the input box is getting emptyed).

Best regards,
Jeffrey

anyone?

<div id="thisismyid" onClick="DoThis(this.id);">
  <input type="text" name="sort" value="" />
</div>

Anyone knows how to let the Onclick in the DIV tag has no effect on the Input box???