Quick CSS question. Sugarcane format. I want my passage to extend to the bottom of the page, but not the top. Say there is a margin of, like 5% or whatever at the top, but the passage height continues downward the entire length of the vertical resolution.
Setting "min-height: 100%" seems to do nothing and setting "height: 100%" doesn't work because it will only extend as long as the contents require. I don't want to set a fixed height, obviously.
I have an outline (outline-width:1px; outline-offset: -9px), but I can just take it off the bottom.
Example:
__________
| ______ |
| | | |
| | | |
Thanks!
EDIT: Attached a pic. I'd like the shaded area (.passage) to continue down to the bottom of the screen no matter the screen resolution or how much content is in the passage. I'll then remove the gold outline form the bottom, if needed.
http://imagizer.imageshack.us/v2/1280x1024q90/854/nm6i.png
Comments
Suggestions?
Breaker, breaker! Come back to me, over!
Thanks!
You're right, that does work.
However, did you get it to work with Twine? Here's my stylesheet:
Didn't work in Chrome, IE or Firefox for me.
In your style sheet, does anything match ".passage"? Why not put everything inside the "#passages" block?
By the way, Firefox' built-in developer tools are quite useful for debugging CSS. Right-click, then pick "Inspect Element". You can then navigate to an HTML tag in the tree view or you can select one visually with the mouse and see what CSS applies to that tag, including all inherited styles, in the Rules tab.
That's the entire stylesheet above. Also, I attached the TWS and HTML file.
Copying the code into #passages doesn't fix the issue. Other than what the wiki says, I don't really know much of a difference, but when #passages is used, the text and everything else "grows" from whatever Sugarcane's default is, and also some of the different transitions aren't "smooth" if that's the right word. Some other issues arise as well. Like I say, it doesn't fix the issue anyway, just causes new and different problems. That's why it's in .passages instead of #passages.
Answer cribbed from answer #2 here.
CSS is weird sauce.
I'm going crazy. I opened my little test HTML file to edit it and add "html, body", but it goes all the way down, so that's not an issue . . .
However, you were on to something with Twine. It now extends down nearly to the bottom. However, it causes a strange glitch . . .
I don't have time to work on it at the moment. The outline is understandable as it is offset -9px, but I'm not sure why the passage baground-color (the translucent black) stops short. ??? Attached is a screenshot (the bottom is my Windows taskbar).
Maybe playing around with what code is in #passages vs. what's in .passage will take care of it, but I'm busy so I can't test.
EDIT: When I change .passage's width from "100%" to "auto", it fixes the above problem. However, it scrolls so slow in Firefox (but not in Chrome or IE) I wonder if it's even scrolling at all until it finally catches up. I'm running a fast system, too. It also seems to "re-draw" itself when scrolling no matter the browser. It's super clunky. When you first scroll down, the passage doesn't go all the way to the bottom, then it suddenly shoots down. After that, it can barely scroll. Chrome and IE are faster, but scrolling still isn't smooth. In the plain HTML file I wrote, it's just fine. In Twine, something is wrong.
I got to thinking, maybe I'm going about the wrong. If there is no text, I don't want the player to need to scroll down. maybe I want a background image rather than have the .passage have the dark shading . . . Maybe that's crazy talk.
Gah! If only this were pure CSS rather than having to fight Sugarcane, I could take this to CSS forums. But, it works perfectly in plain HTML now. So frustrating. I'd rather be writing.
Remove the padding and margin from .passage like so: You could also do padding-bottom instead of padding if you wanted.
You can also specify sides like this: The first value is top, the second is right, the third is bottom, the last is left. Like moving around a clockface going clockwise and starting at 12:00.
I'm sortof winging that last bit of code a bit, but that should be right. I know the order of specifying the sides is right.