Bar across bottom of page - fixed, using CSS


#1

Hi,
This is my first post, so hello everyone :smile:

I have problem having a fixed element (bar with info on it) and using CSS to do it.

I am using the following CSS in the head:

.bottom{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

When create a bar in hype and give it a class id of bottom, it doesn’t do anything, actually it disappears. Any idea on what I am doing wrong?

I would like to have a bar across the bottom with some info on it.

FYI:

If I use similar CSS, such as

.top{
position: fixed;
}

and set the class id to top, it works fine.

Is the problem that I am trying to use both top and bottom? couldn’t be, could it??

Any suggestions are greatly appreciated!

Space


Bar across the top of a page (fixed), with flexible width?
(Greg) #2

You may need to use…

position: fixed !important;

To override Hype’s CSS


#3

Thanks, but it didn’t help. The strange things is that once I assign a class id, the image disappears from the layout. It might be a clue in to what is going on, but I am terribly confused at the moment since fixing it to the top works just fine.

Any ideas?


#4

Can you share a zip file of your document?


#5

Here is a quick re-creation of the page basics. I created a bar across the top and a bar across the bottom, labeled as such. Notice the bottom bar is missing / invisible… If you go to the timeline and select it, you can see the group outline. If you go to the class name and erase it, you will see that it returns.

I’m confused - please let me know what I am doing wrong :smile:

top_bottom.zip (11.2 KB)


(Greg) #6

Does removing this CSS from your header fix it?..

bottom: 0;
left: 0;
width: 100%;

#7

it does keep it from disappearing, but it doesn’t place it at the bottom of the page. I used the same CSS for the top and it works fine, and in theory I should be able to use the same CSS for the bottom (without the sections you mentioned) but it doesn’t work on the bottom.

.top{
position: fixed !important;
}

works fine.

It’s strange how when I specify the other parameters it just disappears, but the group indicator (box) is still there, just the contents goes bye bye.

Not sure if is my CSS, but I have tried just about every variant, and no luck with the bottom, just luck with the top.

Thanks!


(Greg) #8

I don’t think it actually disappears, but it does push the groups elements past the viewport of your scene. If you look at you demo at 25% in Hype, you’ll see the text and rectangle below the scene. Your scene is set to 400px high and any element that is more than 400px to the top will not be visible in the scene.


#9

I missed that - thanks!

But, I still don’t understand what is going on. There must be something going wrong because ‘fixed’ should be relative to the viewport, not absolute.

I need it to stick to the bottom of the page, at all times, regardless of the size of the viewport.

Let me know if I am missing something with the CSS but I think it is correct.

Thank you for your time with this!


(Greg) #10

This thread may help…
http://forums.tumult.com/t/position-fixed-css/4172?source_topic_id=5850


(Hans-Gerd Claßen) #11

hi,

your document has got a fix height.
hypes scene and document have the property overflow hidden.
so the bottom-class will be hidden …
didn’t test it though …


#12

Hi,

A fixed height shouldn’t matter, and the document overflow is set to visible. changing the height to scale doesn’t help either. If you look at this bit of code, it works properly:

test
<body bgcolor="#ffffff">

	<div id="bottom">
	Test 123 - 123...
	</div>
	
	<style>
	
	#bottom { 
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	background-color: #cccccc;
	
	</style>
	
</body>

The problem arises when I try to use part of it and assign it as a class name. using fixed is relative to the viewport, not the page size, that is why scale shouldn’t matter. It is working for the top, just not the bottom. Also, the disappearing that it does, jumping down the page, that should’t happen either. The viewport should dictate it’s position. When I fiddle with it’s position where it is, all the way down, it scales strangely…

Either I am totally missing something obvious, or this can’t be done.

BTW: can’t follow the above link Greg, it says “I don’t have access to that topic” - not sure what that means either :wink:

Thanks!


(Greg) #13

Sorry about that…

When using this CSS for position fixed in the Head HTML…

<style>

    #box {position: fixed !important;}

</style>

Your element will be ‘fixed’ to the Hype window if you have not checked the “Position with CSS top/left” box in the Doc Inspector. If you have checked it, you element will ‘fixed’ to the browser window and therefore show to the left of its position in the Hype stage.


#14

still not working - not sure if it is me or what, but I think when you have a fixed bar at the top you have to do some calculation at the bottom, not sure.

BTW: if you are able to get this to work, please post a file so I can look it over.

Thanks though!


(Greg) #15

In Hype, the bottom of the page and the bottom of a scene are two different things. Maybe that is what is confusing. An element that is at the bottom of a scene will only be visible if its top does not go past the height of the scene. So, if your scene is 400px in height and your element’s top is placed at 401px it will go past the bounds of the scene and not be seen on the webpage even if your webpage is 1000px in height.

Heres one that seems to work…
TB.hype.zip (13.4 KB)


#16

Thank you Greg!

While this does to what I hoped, what is the issue now is that if I have paragraphs of text in the center, there is no scrolling. Content overflow changes didn’t help. Perhaps what I am trying to achieve is best suited for frames (but frames feel like the wrong tech - it feels 90s).

Thank you again for all your time with this. I am just getting acquainted with Hype. Your help has been very useful!

Space


(Mark Hunte) #17

Sorry,

But what is it you are actually trying to accomplish .

Is it something like this…

TB.hype 2.zip (79.8 KB)


#18

That is similar, but it only works in chrome from here - at least not in safari

The basic idea is to have nav on top (fixed) and some info on a thin bar on the bottom (fixed) but to have the content of the website between these 2 elements. So, if someone scrolls the page, because there will be paragraphs of text, the bottom bar stays there and the top nav stays there too. -regardless of the viewport size. I know this would be easy with frames, but I am trying to avoid them.

Thanks for any input you may have.

Space


(Mark Hunte) #19

I tested it on Safari & Chrome and it works for both,

Are you using an old version of Safari?

Also do you mean stays at the bottom of the viewport or of the page.


(Hans-Gerd Claßen) #20

the only way to achieve this with builtin (!) capabilities is to use a vertical flexible layout and place the content within a overflown container. any solution with custom css and / or js would make it complicated and hard to handle …

TB.hype.zip (35.9 KB)


Fixed navbar and mobile-friendly sticky footer