Header Search Issue.

[adem.i]

I'd like to achieve the following search bar layout. You'll notice it's centered in the logo banner area.

[SCR]http://img819.imageshack.us/img819/1624/samplebanner.jpg[/SCR]


and this is what I currently have
www.qnecomputing.com.au

I've been stuck on this for days. Someone please help

[kobra]

Following link - looks like you got it centered

[adem.i]

When I maximise the page, the left hand side of the frame behind the search bar goes over the logo.

[SCR]http://img844.imageshack.us/img844/9123/11111r.jpg[/SCR]

I didn't create a new class for the search bar, it's the one that's ment to be located in the top right hand corner of the page. Would it be better to create a new class to put the search bar in? If so, how can I achieve this. If not, how can I just fix the positioning problem with the search bar.

Also, where can I change the size properties of the search bar?

[kobra]

There is a div ID for it that you can add positioning to as css in the stylesheet(add the tag if it does ot exist)

id=headerSearch which is #headerSearch

[adem.i]

This is what I currently have in #headerSearch


#headerSearch {

background-color: #B7CEE8;
text-align: right;
width: 33%;
padding-right: 20px;
position:absolute;
top: 6em;
left:30em;
border:1px solid; #c0c0c0

}

When I increase the width, the light blue frame behind the search box increases but not the search box itself...

[kobra]

where can I change the size properties of the search bar?

In a copy of template_default/sideboxes/tpl_search.php for your template structure overrides
Find and I am fairly certian that the highlighted values are what you can adjust

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px"') . '<br />' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br /><input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 50px" />';
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';

[adem.i]

I tried changing the values in tpl_search.php and nothing happened.

[kobra]

I tried changing the values in tpl_search.php and nothing happened.

Sorry, wrong file - - discard changes to tpl_search.php and instead get a copy of the file tpl_search_header.php

Chenge where the value is 100 & highlighted in 2 places

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;<input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />';
  }

[adem.i]

Thanks!!

however I still have a problem with the positioning. I'm trying to make it so as I change the size of the webpage, it'll always stay in the middle of the logo.

#headerSearch {
background-color: #050598;
text-align: center;
width: 470px;
padding-right: 1px;
position: absolute;
top: 6em;
left:25%;
}

Also, Is it possible to change the height of the search bar? I tried a few things but neither worked

style="width: 100px" "height: x"
style="width: 100px, height: x"

where x = any real integer (px)

[kobra]

Was it you that placed this in a table versus the default div?

Standard code has this as a div - - #navMainSearch