Make search box in header 'fixed'

[OurJud]

On my blog here: http://uk451.blogspot.com/ - you will see a search box across the top of the page. I'd like to 'fix' it there so that it doesn't scroll with the rest of my page (as the title and navigation in the left sidebar).

I've tried targeting the relevent search class with position: fixed but this threw it across into the left sidebar. Is there any way I can keep it where it is, but 'fix' so that the page effectively scrolls beneath it?

I suspect the problem is going to be that it's (or appears to be) part of the page, as opposed to it being a seperate element, as the left sidebar is.

As always, thanks in adavnce.

[quartzy]

When writing code for position absolute, you use position: absolute; then the top pixels and the left pixels. top: 10px; left: 20px;

But it looks like you fixed it already

[OurJud]

No, I haven't fixed it, quartzy. You don't seem to have understood my questiona at all.

I want to stop the search box and dotted border below it from scrolling with the rest of the page. That is, I want it to remain static when I scroll the page, just in the same way that the blog title and navigation in the left sidebar do.

[AndrewRyan]

So yeah...

#search{
position:absolute;
right:50px;
top:50px
}

Mess with right and top values until you have what you want. That should keep the search bar always to the top right of your screen... at least as far as I know. That search bar is very classy by the way

Embedded css though... eww


edit: I'm not sure if you have to apply that stuff to #search or something else, apply it to whatever class/id applies to that whole search bar area. Additionally if you want the line to follow it around you could give it a position:absolute value as well with a top:XXX where XXX is a bit more than the search bar (so it appears below the search bar). You shouldn't need to give it left/right value since it seems to span the whole browser. I'm sure there's a more elegant solution but I'm kind of new to this stuff.

[OurJud]

Am I speaking a foreign language here, or just being really REALLY stupid? The way that whole top area where the search box sits is styled is not the problem. Altering those margin values won't 'fix' it there.

I'll try for a third time to explain what I'm trying to do.

If you go to the blog here: http://uk451.blogspot.com/ and scroll the page up and down, you will notice that the title and navigation on the left side of the page doesn't move. It is fixed there no matter how much scrolling about you do.

THAT is how I want the search box area (search box, button and dotted border underneath) at the top to function. I want it to stay right there on the page at all times, static, fixed, so that it doesn't move when the page is scrolled.

[AndrewRyan]

I think you need to use js for something like this. Not sure if you could adapt something like this:

http://bdlab.blogspot.com/2010/08/ad...p-to-your.html

[quartzy]

When I scroll the page, the search bar is fixed at the top. I use FF, dont know what your problem is as it is fine for me.

[OurJud]

Originally Posted by AndrewRyan

I think you need to use js for something like this. Not sure if you could adapt something like this:

http://bdlab.blogspot.com/2010/08/ad...p-to-your.html

Thanks, Andrew, but I'm not after such an effect. With that one, the search area will scroll off and then 'bob' back into view once the user stops scrolling. I just want it 'dead' like the blog title and navigation on the left sidebar.

Thanks anyway. I thought this would be quite simple, as all it needed to fix the left sidebar was position: fixed;

Obviously not.

Originally Posted by quartzy

When I scroll the page, the search bar is fixed at the top. I use FF, dont know what your problem is as it is fine for me.

Wait, I use FF too. Let me get this right. Are you saying that when you scroll the page up and down, the search area at the top DOESN'T scroll too? That it stays right there and is visible at all times???

Can anyone else confirm that this is the case for them too, because either quartzy is still misunderstanding me, or something weird is going on.

[teedoff]

lol seems like this is alot of confusion. What the OP is trying to say, I think, is he wants the search form to be visible at all times in the BROWSER, not the page.

This will fix the form so that it's visible, but it moves it to the left side of the browser;

#searchform {
    float: right;
    margin-top: -1.4em;
    padding: 0 0 0.6em;
    position: fixed;
    text-align: right;
}

Not sure why I cant get it to stay at the top right yet. I did ajust your margin a bit to move the form up above the dotted line.

[quartzy]

position:fixed;
left:100px;
top:150px;

you need to specify an amount to where it will be fixed.

[teedoff]

yeah as Quartzy said I think you can do it like this.

#searchForm {
left: 1015px;
top: -3px;
position: fixed;
}

I will say though, as you scroll down, the search form's transparency allows your right menu text to show through, which to me is not very nice looking. You might could add some kind of solid background to your form to help with that.

[OurJud]

Thank you to everyone that's helped on this. I don't know why I was having such difficulty making myself understood - was I being obscure? I didn't think so.

Anyway, at the end of all that I can't test those solutions just yet, as blogger is having some problems with the 'save' and 'preview' functions in the html/css editor. As soon as that is fixed, though, I'll be back to confirm it worked.

One last thing that's confusing me, though. Teedoff, you say that you adjusted the margin between search form and dotted line, and that my right sidebar is visible through the search box, but how have you done this? How have you applied changes to my blog so that you can see them working live?

[teedoff]

Originally Posted by OurJud

Thank you to everyone that's helped on this. I don't know why I was having such difficulty making myself understood - was I being obscure? I didn't think so.

Anyway, at the end of all that I can't test those solutions just yet, as blogger is having some problems with the 'save' and 'preview' functions in the html/css editor. As soon as that is fixed, though, I'll be back to confirm it worked.

One last thing that's confusing me, though. Teedoff, you say that you adjusted the margin between search form and dotted line, and that my right sidebar is visible through the search box, but how have you done this? How have you applied changes to my blog so that you can see them working live?

Firefox has a wonderful addon called firebug. Its free and very useful in viewing html/css coding as well as any other source code like javascripts and the like.

You not only can view all the source code, but you can edit it as well. Of course all this is done locally in my local browser only, and reverts to the original when refreshed/closed.

IE has something similar called developer tools. I personally like firebug better though. Download it and learn a bit of it. It will be very useful to you for instances like this.

[OurJud]

Originally Posted by teedoff

I personally like firebug better though. Download it and learn a bit of it. It will be very useful to you for instances like this.

Thanks, teedoff. I'm slightly embarrassed to admit that I have firebug and use it constantly. Thing is I probably only use 10% of all the things it can do, and I certainly didn't know you could preview changes to a website 'on the fly' like this.

[teedoff]

Originally Posted by OurJud

Thanks, teedoff. I'm slightly embarrassed to admit that I have firebug and use it constantly. Thing is I probably only use 10% of all the things it can do, and I certainly didn't know you could preview changes to a website 'on the fly' like this.

No worries..lol it took me awhile to learn firebug as well. Play around with it. The more you use it in this manner...ie editing and previewing live code, the more you will learn, not only about firebug, but about code in general!