New hear, but, can anyone advise on how I create a fixed header? I can get this working perfectly well so long as the page is not centrally aligned. As soon as I align the page centrally the header stays firmly attached to the left of the browser window. I’ve tried all manner of frames / layers and various inline solutions and have admitted defeat (though I can get this working if the header is a single image file - but that’s not what I’m after). I’d like a fixed header (with all manner of content) that stays where it is when scrolling down the page (and when the page is centred) - like this site:
Similarly I’d like a right hand menu to stay where it is - attached to the right hand side of the page (not the right hand side of the browser window - again when the page is aligned centrally) as the rest of the page scrolls up and down.
And assuming there is a solution - will this work in IE6?
And assuming there is a solution - will this work in IE6?
Who cares about IE6 any more - it is time that IE6 users moved on. They probably wouldn’t notice anyway.
There is an option in FW if you look in the Inspector with an item selected - First Tab and then the dropdown selector - Absolute/Fixed in Window - try the latter on your header/navigation.
Not how this page is done but might do the trick for you.
Thanks for your response. Alas - if it were only that simple! This works - so long as the page is not centrally aligned in the browser window. The result of selecting this ensures the item is fixed in the window (at the top or wherever else) but is set as if the page is aligned to the left of the browser window. Dull! I need to find a solution that works when the page is centrally aligned.
I share your view about IE6 - however I have many Government clients, meaning they are very much stuck in IE6 land!
Any other suggestions to get my header working are more than welcome.
Thanks,
Will.
On 3 Feb 2010, 12:53 am, DeltaDave wrote:
And assuming there is a solution - will this work in IE6?
Who cares about IE6 any more - it is time that IE6 users moved on. They probably wouldn’t notice anyway.
There is an option in FW if you look in the Inspector with an item selected - First Tab and then the dropdown selector - Absolute/Fixed in Window - try the latter on your header/navigation.
Not how this page is done but might do the trick for you.
I am coming in on the back of this thread as I am trying to achieve the same thing as Will.
I have a page that scrolls, that is set to align centre in the browser window and I need the css menu to be fixed at the top. When I fix the menu’s position it defaults to align left. Is there a workaround to combat this, so that both the page and menu position themselves centrally to the browser window?
My initial experiments with an fixed-in-window html box which is centrally placed by going to margins>custom>center horizontally seems to be working well. All the content of the header is in this box and it is working with a CSS menu in there.
I am no expert so am looking to Dan or some other more experienced user to confirm that this is the way to go with this one.
I will continue to ferret through the threads to see if I can unearth any more info, as I am sure this, like many other questions, must have been raised before.
Anyone got a solution to this? I am after exactly the same thing:
New hear, but, can anyone advise on how I create a fixed header? I can get this working perfectly well so long as the page is not centrally aligned. As soon as I align the page centrally the header stays firmly attached to the left of the browser window. I’ve tried all manner of frames / layers and various inline solutions and have admitted defeat (though I can get this working if the header is a single image file - but that’s not what I’m after). I’d like a fixed header (with all manner of content) that stays where it is when scrolling down the page (and when the page is centred) - like this site:
Please try the following steps on a new page. After you’ve worked
through it enough to see how it works, you can start bending an
existing layout to fit this idea. Some of this may sound counter-
intuitive, but please follow all the way to the end and preview.
Set a new blank page to Align: none.
Draw an HTML box, starting at the top-left corner, spanning the
entire width of the page, of whatever height you want your header to
be. Move to the Inspector, and set the width property to 100% (just
highlight whatever is already there, type that in and press return).
Set the Position attribute to Fixed in Window.
Double-click inside the box you made in step 2, so you see a
flashing text cursor, and choose Insert / HTML Item from the main
menu. Click once on that item and move to the Inspector. Set the width
to your desired page width, and set the Margin to Auto. Compose your
header elements within that inline box (click on the box before you
draw each child, so it becomes the parent, or nest them inside of it).
Apply a tiling background image to the box you created in step 2.
This will span the entire page, so set the image to tile horizontally.
If you look at the header of the Freewaytalk Web site, you’ll see this
same effect (minus the fixed-in-window business). Careful composition
of your header bar image (if any) along with this tiling background
can make a seamless illusion of a single image that grows to fit the
page.
Draw another HTML box below the first, sized to fit your page
contents. From the main menu, choose Item / Send to Back. Set the
box’s width to 100%, and then double-click inside it and insert
another HTML box to serve as the base or container for the rest of
your page. Set its width to your desired page width in pixels, and
margin to Auto. Again, draw all of your page elements as positioned
children of this inline box, or insert them as inline children. When
you preview in Freeway, you might not see the effect, but when you
look in a browser with a larger window, you should see your page
centered and the body scrolling under the header.
Walter
On Feb 15, 2011, at 6:49 AM, Mark wrote:
Anyone got a solution to this? I am after exactly the same thing:
New hear, but, can anyone advise on how I create a fixed header? I
can get this working perfectly well so long as the page is not
centrally aligned. As soon as I align the page centrally the header
stays firmly attached to the left of the browser window. I’ve tried
all manner of frames / layers and various inline solutions and have
admitted defeat (though I can get this working if the header is a
single image file - but that’s not what I’m after). I’d like a
fixed header (with all manner of content) that stays where it is
when scrolling down the page (and when the page is centred) - like
this site:
Thanks for that. I’ve had a quick read through and it seems to make sense to me. The only thing is, I’ve already created the website and was hoping I could bolt on this design element, without having to redo it all - I think I’ll leave this for the next site, looks like too much work!
Ok the fixed header part is great, no longer an issue, Walter’s break down works a treat. But there is still one thing that didn’t get addressed here and its driving me nuts, how on earth to apply a Fixed in Window left hand column that aligns to the page edge, not the browser window. I really want to nail this and whilst the header works exactly as it should, it is the simpler of the two problems since it just requires central alignment. The left hand column is more complicated since it needs to realign with the scrolling page content, but remain fixed whilst scrolling down. Anyone else still care about this column jazz? It has started to consume me now, I cant be the only one surely
Ok the fixed header part is great, no longer an issue, Walter’s break down works a treat. But there is still one thing that didn’t get addressed here and its driving me nuts, how on earth to apply a Fixed in Window left hand column that aligns to the page edge, not the browser window. I really want to nail this and whilst the header works exactly as it should, it is the simpler of the two problems since it just requires central alignment. The left hand column is more complicated since it needs to realign with the scrolling page content, but remain fixed whilst scrolling down. Anyone else still care about this column jazz? It has started to consume me now, I cant be the only one surely
HOLD ON I THINK I’VE CRACKED IT! after following Walter’s step guide to the fixed heder, a second fixed in window box can be drawn, with width set to 100%. Then insert a child element into this box which matches the desired page width and utilises the auto margin/center technique used for the header, then into this insert a box which aligns left and use this as the column, thus it remains fixed whilst scrolling down the content of the page, but aligns centrally with the content. Not the most complicated of problems, but a problem for sure. case closed I hope
You might try my Sticker Action and see if that works for you. It’s
designed to create an element that works like the cart contents list
in the Apple Store – the box scrolls with the page until it reaches a
certain boundary distance. Once it hits that distance from the top of
the screen, it sticks in place no matter how much further the window
is scrolled. When you scroll back to the top of the page, it “un-
sticks” and scrolls with the window once that boundary is less than
the distance to the top of the screen. With a little fiddling of the
boundary distance, you could make the effect you’re after.
Walter
On Aug 17, 2011, at 9:38 AM, james morrison wrote:
Ok the fixed header part is great, no longer an issue, Walter’s
break down works a treat. But there is still one thing that didn’t
get addressed here and its driving me nuts, how on earth to apply a
Fixed in Window left hand column that aligns to the page edge, not
the browser window. I really want to nail this and whilst the header
works exactly as it should, it is the simpler of the two problems
since it just requires central alignment. The left hand column is
more complicated since it needs to realign with the scrolling page
content, but remain fixed whilst scrolling down. Anyone else still
care about this column jazz? It has started to consume me now, I
cant be the only one surely
I just tried the above instructions and I know I have done it successfully in 5.5 but version 6.03, once I set the width at 100% an error message will not allow it and reverts back to 1024px
The Sticker Action is made exactly for that purpose.
Walter
On Mar 31, 2013, at 12:43 AM, Spike Lupton wrote:
Is there a way to make the header start off lower on the page and when the page scrolls when it gets to the top of the page it stays there?
Spike
Thanks Walter, that works great when scrolling down the page the items stick to the top but they won’t unstick when scrolling back up the page, any ideas?
The Sticker Action is made exactly for that purpose.
Thanks Walter, that works great when scrolling down the page the items stick to the top but they won’t unstick when scrolling back up the page, any ideas?
Still very new to this so kinda setting myself projects to learn things. I was hoping that when you scroll down the page and the item sticks to the top of the page that it would go back to it’s original position when scrolling back up.