...

View Full Version : Make search box in header 'fixed'



OurJud
02-24-2011, 04:21 PM
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
02-24-2011, 07:20 PM
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
02-24-2011, 11:34 PM
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
02-25-2011, 12:14 AM
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 :D

Embedded css though... eww :p


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
02-25-2011, 12:33 AM
:confused:

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
02-25-2011, 12:48 AM
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/add-floating-bar-always-on-top-to-your.html

quartzy
02-25-2011, 02:43 AM
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
02-25-2011, 04:13 PM
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/add-floating-bar-always-on-top-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.


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
02-25-2011, 04:26 PM
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
02-25-2011, 04:42 PM
position:fixed;
left:100px;
top:150px;

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

teedoff
02-25-2011, 04:47 PM
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
02-25-2011, 06:26 PM
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
02-25-2011, 06:43 PM
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
02-25-2011, 06:51 PM
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
02-25-2011, 06:57 PM
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!

OurJud
02-26-2011, 01:55 AM
Well blogger's template editor is working again now, but I don't seem to be able to get the search box sitting where I want it, even though position: fixed does what I need.

Anyway, at least I can play about with it now.

Thanks again everybody.

quartzy
02-26-2011, 02:34 AM
When I use Firebug I cant edit on the fly, I use the select tool but when I try to type in the code it moves. Do you know teed why it does this?

OurJud
02-26-2011, 04:03 AM
When I use Firebug I cant edit on the fly, I use the select tool but when I try to type in the code it moves. Do you know teed why it does this?

You have to click on the element you're wanting to change before you try to edit the code. This locks the code in place so that you can edit it.

AndrewRyan
02-26-2011, 06:46 AM
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?

Sorry. Like I said I'm new to all of this, and frankly I'd never heard of position:fixed.

Do you have to specify left:value? Wouldn't right:value make more sense? If you set a left:value then depending on screen resolution the search bar could be out of sight or in the middle of the page rather than the top right.

If right:value works and is used then no matter the resolution it should show in the top right. Or so I would think.

quartzy
02-26-2011, 01:31 PM
Yes, you can use right

Yes teed I do click on it, but it does not stay, maybe I need an update.

OurJud
02-26-2011, 02:39 PM
Sorry. Like I said I'm new to all of this, and frankly I'd never heard of position:fixed.

Do you have to specify left:value? Wouldn't right:value make more sense? If you set a left:value then depending on screen resolution the search bar could be out of sight or in the middle of the page rather than the top right.

If right:value works and is used then no matter the resolution it should show in the top right. Or so I would think.

No need to apologise, Andrew - I wasn't directing anything directly at you. I did consider different screen resolutions when trying to do this with left/right margins, and have decided to leave it as it is, as I don't know how I can make sure it displays correctly in all browsers and resolutions. I understand what you're saying about margin-right as opposed to margin-left, but whatever I used I couldn't get it right.


Yes teed I do click on it, but it does not stay, maybe I need an update.

Hey! You're not going to see many answers from me on here. Don't credit it to someone else when I do come up with one :)

To play around and inspect elements I use the little icon on the far left of firebug - right next to the golden firebug icon itself. I then hover over the different elements on the page and it finds the relevent code in the source. When I've decided which element I want to alter the code for, I single click on the element and this 'holds' the code where it is and allows you to change things and see how they look.

That's how it works for me, anyway.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum