I am new to programming, Twine, and particularly CSS. I've been programming an RPG game in Harlowe 2 and I've come very far without asking any questions, but now I've hit a wall while styling my battle engine with CSS. Basically I've created some images of boxes with borders that I would like certain text to appear inside of. Following some tutorials I figured out how to get the background images of my combat log and my player menu bar to line up the way I would like in the browser. Having the text appear in the appropriate place on top of these images is much harder. My text is so close, but nothing I seem to do changes the vertical position of the text. I have used the aligner and column tools in Harlowe to get the text centered the way I'd like, but just can't crack the vertical. Any help here would be greatly appreciated!
Here is my CSS. Sorry if it's super sloppy.:
@import url(http://fonts.googleapis.com/css?family=Sunflower:400,700,400italic,700italic);
body, tw-story
{
font-family: Sunflower, serif;
font-size: 20px;
}
#battlemenu, {
width: 100%;
height: 25%;
position: center;
border: solid #000 0.05em;
border-radius: 0.1em;
background-image: url(media/primemenu.png);
background-size: 100% 100%;
background-repeat: no-repeat;
color:#000;
box-shadow: #000 0.5em 0.5em 0
}
#battlelog {
width: 100%;
height: 300px;
position: center;
border: solid #000 0.05em;
border-radius: 0.1em;
background-image: url(media/logbox.png);
background-size: 100% 100%;
background-repeat: no-repeat;
color:#000;
box-shadow: #000 0.5em 0.5em 0
}
I then add these tags to the appropriate passages, and then use the (display:) macro to show them both stacked on top of each other in my "combat passage", which results like this:
https://imgur.com/55UXioT
Here is the code inside the passages:
"Battlemenu"
<div id="battlemenu">
===|===
{
(link-repeat: "Attack")[
(set: $pcatk to (random: 1, 20) + $weapon's tohit + $char's bonus)
(set: $pcdmg to (random: 1, $weapon's dmg))
(if: $pcatk >= $npc's ac)[
(set: $npc's hp to $npc's hp - $pcdmg)
(if: $npc's hp <= 0)[
(set: $log to "win")]
(else:)[(set: $log to "atk")]
(goto: "Test")]
(else:)[
(set: $log to "miss")]
]}
{(if: $char's bonus > 0)[(text-style: "fade-in-out")[(text-style: "subscript")[+unicron]] ]}
#####{(if: $char's hp < 2)[(text-style: "blink")[HP: (print: $char's hp)]](else:)[HP: (print: $char's hp)]}
#####Cloud: $cloud
==|==
[[Cloud Strike|Cloud Strike Init]]
===|=
[[Item]]
====|
[[Flee]] </div>
"Battlelog"
<div id="battlelog">(text-color: "white")[
=><=
{(if: $log is "player")[
It's your turn. What do you do?
]
(if: $log is "npcturn")[
It's the (print: $npc's name)'s turn!
<br><br>(link:"Continue")[(set:$log to "enemy")(goto: "Test")]
]
(if: $log is "atk")[
(print: $char's name) attacks the
(print: $npc's name) with their
(print: $char's equipped) for $pcdmg damage.
(set: $char's bonus to 0)
<br><br>(link:"Continue")[(set:$log to "npcturn")(goto: "Test")]
]
(if: $log is "win")[
(print: $char's name) attacked for $pcdmg damage.
(print: $npc's name) succumbed to their wounds.
(set: $char's bonus to 0)
<br><br>[[Continue|win]]
]
(if: $log is "death")[
(print: $npc's name) attacked (print: $char's name) for $npcdmg.
<br><br>[[Continue|Death]]
]
(if: $log is "miss")[(print: $char's name)'s attack missed!
(set: $char's bonus to 0)
<br><br>(link:"Continue")[(set: $log to "npcturn")(goto: "Test")]
]
(if: $log is "enemy")[
(set: $npc's atkchoice to (random: 1, 10))
(if: $npc's atkchoice <= 8)[
(set: $npcatk to (random: 1, 20) + $npc's tohit1)
(set: $npcdmg1 to (random: 1, $npc's dmg1))
(if: $npcatk >= $char's ac)[
The (print: $npc's name) attacks (print: $char's name) with their (print: $npc's atk1) for $pcdmg damage.
(set: $char's hp to ($char's hp - $pcdmg))
(if: $char's hp <= 0)[
(set:$log to "death")
(link:"Continue")[(goto: "Test")]
(else:)[(set: $log to "player")
(link:"Continue")[(goto: "Test")]]
]
(else:)[
The (print: $npc's name)'s attack misses!
(set: $log to "player")
<br><br>(link: "Continue")[(goto:"Test")]]]
(else:)[
(set: $npcatk to (random: 1, 20) + $npc's tohit2)
(set: $npcdmg to (random: 1, $npc's dmg2))
(if: $pcatk >= $char's ac)[
The (print: $npc's name) attacks (print:$char's name) with their (print: $npc's atk2) for $pcdmg damage.
(set: $char's hp to ($char's hp - $pcdmg))
(if: $char's hp <= 0)[(set:$log to "death")
(link:"Continue")[(goto: "Test")]]
<br><br>(else:)[(set: $log to "player")(link:"Continue")[(goto: "Test")]]
]
(else:)[
The (print: $npc's name)'s attack misses!
(set: $log to "player")
<br><br>(link:"Continue")[(goto: "Test")] ]]
] ] } ]
</div>
Combat Passage currently named "Test"
{
(display: "log")
(display: "Battlemenu")
}