Hello Twine Forum! For my project at a summer camp, I am going to be using Twine 2 and making an RPG. I am sticking with Harlowe for this project. I have the mechanics and game done and I wanted to clean it up and there were a bunch of issues with HTML. The biggest ones were that there was this annoying gap between the header and nav section of my page and the
Links to other pages did not work when clicked. How do I fix these issues?
Comments
<!DOCTYPE html><html><head><style>
#header {
background-color:black;
color:#990000;
text-align:center;
padding:5px;
}#nav {
line-height:30px;
background-color:#eeeeee;
height:400px;
width:170px;
float:left;
padding:15px;
}
#section {
width:500px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:black;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<font face="verdana"><strong>RPG<strong></font>
</div>
<div id="nav">
<font face="verdana">Adventure->Start Adventure!</font><br>
<font face="verdana">Boss Fight</font><br>
<font face="verdana">Shop</font><br>
<font face="verdana">Rest</font><br>
<font face="verdana">View Inventory</font>
</div>
<div id="section">
<p><em>You have $hp hp and $coins coins. It has been $days days since you have started your adventure.</em></p>
</div>
<div id="footer">
</div>
</body>
</html>
Harlowe's Javascript engine uses it's own tw-story element as the parent of all the HTML it generates, so all the HTML elements within the body element of your example will be ignored by the engine and this is why your Markup based links are not working.