Trying to create a health bar, nested span tag not cooperating- Sugarcube 2.28

Question

Sugarcube 2.28

Here's my question: I'm trying to create my own health/progress bar, and I've got a span element which I'm trying to nest inside of a div element  positioned exactly on top of it so that it appears to represent the current value/max value with the DIV being the border or frame.  The problem is while it works in mozilla, chrome, and Internet explorer, it doesn't work in Sugarcube; it's placing the span element underneath the div element.  Does that make sense?  I'm not completely new to HTML, etc, but I'm really having to brush up lately since gaining an interest in twine.  Any thoughts?  Thank you very much

Here's my code

<div id="container">
<span id="animate"></span>
</div>

#container {
  width: 400px;
  height: 10px;
  border-radius: 15px;
  position: relative;
  background: pink;
   border: 2px solid #000;
}
#animate {
  width: 150px;
  height: 10px;
  position: absolute;
  background: lightgreen;
  border-radius: 15px;
  right:0px;
 }

 

Answer 1

If you use your web-browser's built-in Web Development Tools to Inspect the HTML elements generated by the SugarCube runtime engine for the Passage that contains your div + span structure you will see it looks something like the following:

<div id="container">
	<br>
	<span id="animate"></span>
	<br>
</div>

The HTML br elements you see in the above are a result of the SugarCube runtime feature that automatically converts all line-breaks found within the contents of a Passage into br elements. And it is these br elements that are causing the issues you are having with your CSS.

You can use either Line Continuation markup or one of the nobr related features to supress the unwanted br elements for your div + span code.

<div id="container">
	\<span id="animate"></span>
\</div>

 

Comments

Wow! So simple. Thanks

Answer 2

Looks like you have your main problem figured out, but if it helps, you might want to take a look at the heath bar sample code I have here as well:

http://bit.ly/TwineSampleCode#Health%20Bar