Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Make search box in header 'fixed'

    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.
    Last edited by OurJud; 02-24-2011 at 03:25 PM.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    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

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.
    Last edited by AndrewRyan; 02-24-2011 at 11:20 PM. Reason: acute boredom

  • #5
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts


    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.

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    21
    Thanks
    2
    Thanked 1 Time in 1 Post
    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
    Last edited by AndrewRyan; 02-25-2011 at 12:26 AM. Reason: Out of my league.

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewRyan View Post
    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.

    Quote Originally Posted by quartzy View Post
    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.
    Last edited by OurJud; 02-25-2011 at 03:16 PM.

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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;

    Code:
    #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.
    Teed

  • #10
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    position:fixed;
    left:100px;
    top:150px;

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

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #12
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts
    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?
    Last edited by OurJud; 02-25-2011 at 05:40 PM.

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by OurJud View Post
    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.
    Teed

  • #14
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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.

  • #15
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by OurJud View Post
    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!
    Teed


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •