0

http://jsfiddle.net/Wdrgv/

So I want to put this bad animation at the bottom of the screen. Simple enough, right?

Nope. When I put position: absolute on the marquee-container, the animation seems to disappear off the screen.

I figure I'm doing something really stupid here, but I can't see what.

Improve this question

2 Answers 2

Reset to default
2

The problem is that when you apply the absolute positioning to the container, 'display: block; no longer stretches it to 100% of its container's width, and since it has no relatively-positioned contents to define its dimensions, it relies solely on explicitly defined values (height: 24px) or zero if none exist. I've fixed the problem for you by defining width: 100% for your containing element. I've also added a few tweaks to make the size and behavior of your marquee a little more robust given varying text lengths:

http://jsfiddle.net/Wdrgv/2/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Hm. Not bad, but it doesn't seem to actually display all the text if it's longer than the page.
Try this. I've added a touch of Javascript to determine how long the 'track' needs to be in order for the contained text to cycle across the page exactly one time per animation cycle.
1

I was able to get it to work by changing from absolute to fixed and applying bottom:0px; to it.

See here: http://jsfiddle.net/Wdrgv/1/

Improve this answer

3 Comments

Why would you want it absolute anyway? Don't you want it stuck to the bottom always?
Because fixed will always remain there, whereas absolute won't
If you want to use absolute you may need to use some javascript/jquery, or start from the top

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.