How to place the Search bar in the middle of the logo banner?

[adem.i]

Hi, I would like to place the product search bar into the middle of the logo banner. The same effect I'm trying to achieve can be seen at the following website

www.skycomp.com.au

Also, how would I change the size of the search bar and create a 1px frame around it to make it look a bit more elegant just like the above link?

[adem.i]

Since I was new to posting, I apologise for not being clear with my first question.

I'm currently working site www.qnecomputing.com.au and trying to achieve an effect where the product search bar is located in the middle of the logo banner.

This effect can be seen on the following website; http://www.skycomp.com.au

By default my current template has a search bar located on the right hand side menu bars or the top right hand corner in the title bar (can be seen when using firefox web developer plug in), is there some way to move either one of them into the logo banner area and increase the size of the box while also creating a frame around it for aesthetic appeal.

Thanks in advance!

[stevesh]

The question was clear enough, but you don't have the search bar in #navMain enabled, so it's hard to give specific advice.

Generally, you could probably do something like this in the stylesheet:

#navMainSearch {
position:absolute;
top:14em;
left:42em;
border:1px solid;
}

You will have to fiddle with the padding and margins to get it exactly where/how you want it.

[adem.i]

Thanks heaps. I did what you suggested and it did move the search field into the centre of the Logo banner.

I have another problem with it now. The search box itself only covers a small portion of the frame. How can I increase the size of the search box? Also, how can I move the search button to make it closer to the search box?

Ultimately, this is what I'd like to achieve.

[adem.i]

Also, I just noticed as I increase the size of the page, the frame also increase. How can I stop this?