Search Box always same position in header

  • Resolved fragfood

    (@fragfood)


    15 years, 5 months ago

    Hi all,

    I wanted to ad the searchbox in my header on a specific place.
    To do this, I added the position: absolute to the stylesheet.
    Offcourse this works on one screenresolution. Using another screen resolution will resolve in the searchbox being on a totally different place.

    This is what I got so far:
    #searchform {position:absolute; top: 80px; right: 170px; text-align:right; font-size:12px; color:#FFF;}
    #searchform input {height: 13px;}

    The only option I see to get the searchbox always on the same position is to place the searchbox div into the header div. However before I do this and basically create my own theme, I would like to know if there are any other solutions for this problem?

    Regards,

    Frag

Viewing 4 replies - 1 through 4 (of 4 total)

  • The secret to what you are after is, if the search form is contained within a Div called “header”, in the CSS set the position of header to relative. If the containing div has a different name, use that name not the word header. Example

    #header { position: relative; }

    The reason for this is, the absolute position of an element is RELATIVE TO the nearest ancestor that has position:relative set. If no ancestor has that set, then the position is relative to BODY, and body is always a floating width.

    When you make the parent div position:relative then the search form will stay in the same relative position to the parent regardless of resolution.

    Thread Starter fragfood

    (@fragfood)

    Ok before setting the #header to position relative.
    I do need to place the searchform div into the header in the page itself?

    Because changing the #header will not give the satisfactory result.

    Thread Starter fragfood

    (@fragfood)

    Ok done that and now it works as I would like it to work

    Thread Starter fragfood

    (@fragfood)

    Thanks for the info @stvwlf

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Search Box always same position in header’ is closed to new replies.