Scrolling content in middle with header and footer


(Jon) #1

Not sure how to easily explain this easily. See this page I am working on http://www.chenevertphotography.com/cu/
As you see when you drag the bottom of the page up it hides the content in the middle behind the header and footer. That would be fine if that content was then scrollable. Unfortunately that content is just lost until you resize the window. I know if I turn height scaling off I can scroll but I the it seems I can’t lock the footer to the bottom. The https://www.google.com home page is a perfect example of how i was hoping the page would function. Is there anybody that can suggest something I could do to achieve this sort of look. let me know if i can explain better.


#2

If you search ‘fixed header’ or ‘fixed footer’ you’ll find a few different ways to do this. Here’s one method: Creating a Fixed Header Image

I personally would create the footer and header outside of Hype using standard CSS / HTML. It’s pretty quick with just a few lines of code. Here’s an example: http://jsfiddle.net/themorgantown/VKXZA/154/

If you set a high Z-index value in CSS for your header and footer, it will appear above your Hype document (use a value like 99).


(Jon) #3

Cool. It does seem like I should just edit the html outside of hype. I just need to find and html editor that is super basic. I’m lost in dreamweaver.


#4

May I suggest @jonathan’s HyperEdit :wink:

http://tumult.com/hyperedit/


(Fenna) #5

Hi!

I’m trying to achieve the same thing which Jon asked help for.

I would like to have a footer that is always on the bottom of the page (or perhaps 10px from the bottom), regardless of the height of the scene/page, regardless of the size of the window.

My issue is that I’m using scenes with different heights. Some of the scenes have so much content that it exceeds the standard layout size, which also means that I can’t scale the height.
I tried to use the pin&sizing in the flexible lay-out out section, but I was unsuccessful.

Moreover,
I also exported my Tumult as HTML5 to see if I could add the simple code that Daniel suggested on the 1st of Jan. Since I’m solely making the website in Tumult, I wasn’t able to add the code to the HTML file (or at least I didn’t know where to paste it).

I also read the thread about ‘fixer header/fixed footer’, but my issue again is that I am not able to scale the height and therefore can’t pin it in place.

If there is another way of getting this done, that would be awesome! If not, I’ll have to look for another alternative :smiley:
Thanks again for your help! The website is almost finished, so I won’t be posting many more questions from now onwards.