Hey!
I'm still pretty new to Twine and teaching myself basic HTML and CSS. Wondering why this piece of code isn't working? Have tried debugging myself to no avail.
<div class="fade-in four"><i><span class="zuberitext">"Character A speech"</span></i></div>
<div class="fade-in five"><b>"Character B speech"</b></div>
<div class="fade-in six"><i><span class="zuberitext">Character A speech
<div class="fade-in seven">More of the same speech from Character A
<div class="fade-in eight">End of the same speech from Character A" </span></i></div>
<div class="fade-in nine">Do you
passage? Or do you think
passage?</div>
I removed the particulars of the story just to give an idea of the passage shape. The classes I have are a timed fade in for text and particular colour for Character A's speech.
Any ideas greatly appreciated, cheers!
Comments
The HTML in your example is structurally invalid as it is missing a number of end tags and seems to have a div element (block) contained within a span element (inline) but I am assuming that is due to you cut-n-pasting selected parts of a greater whole.
Your have not supplied the related CSS you are using to implement the time based fade-in effect, it is difficult to help debug something without knowing what that something is.
I think you're right about the HTML being invalid and the issue being with the div and span elements. This is the whole of the HTML for the passage if that helps:
Here is the CSS for the time based fade-in effect:
The subsequent fade-ins (three - nine) have animation-delays which increase 4 seconds with each.
Thanks!
Like greyelf said, a lot of your tags aren't closed and you have a span element running through a bunch of div elements, which is probably causing a lot of problems.
The CSS looks okay.
If fixing the HTML doesn't help, I think we need you to describe what's happening that isn't right. Is the animation messed up? The formatting?
To debug html tags and css properties, use Inspect Element that comes with the browser by right clicking on a page after it is loaded. It tells you exactly how the browser rendered your code, and
try to do this with your code
The indent is going to help a lot tracking any tags. by default HTML ignore spaces and tabs in the beginning of the line.