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???