A few days ago I posted a some html for a character sheet, which was just a coverted PDF which clearly did not work. Since then, I have taught myself HTML and CSS in an attempted to create a functioning character sheet for my own game. I am no designer nor and I a coder, but I gave it my best shot and my results are below. Using very basic code I was able to achieve somewhat of a decent sheet, but I am stumped on a lot of different stuff. 1. I am never sure if my changed to my CSS are working as I never see a change. 2. I can't not get my weapon area to align/float properly 3. I can't change the size of any font I have tried a multitude of different techniques and I just cant get my head around it. Please help me community, your my only hope. The following link is a copy of my PDF sheet just for reference Here <div class="sheet-3colrow">
<div class="sheet-col">
<br />
<br />
<br />
<label>Player:</label><input type="text" name="attr_name">
<label>Name:</label><input type="text" name="attr_name">
<label>Sex:</label><input type="text" name="attr_sex">
<label>Age:</label><input type="number" name="attr_age">
</div>
<div class="sheet-col">
<p style="text-align: center;">
<h3 style="text-decoration: underline;">ZARP Character Sheet</h3>
</p>
<label>Total HP</label><input type="number" name="attr_HP" class="short-sheet">
<label>Current HP</label><input type="number" name="attr_XHP" Class="short-sheet">
<label>Injury</label><input type="text" name="attr_injury" Class="short-sheet">
<label>Effect</label><input type="textarea" name="attr_effect" Class="short-sheet">
</div>
<div class="sheet-col">
<br />
<br />
<br />
<label>Background:</label><input type="text" name="attr_background">
<label>Character Description</label><textarea name="attr_Character Description"></textarea>
</div>
</div>
<hr/>
<div class="sheet-3colrow">
<div class="sheet-col">
<h3 style="margin-bottom: 10px;">Abilites</h3>
<label>Melee</label><input type="number" name='attr_Melee' class='sheet-short'><br />
<label>Ranged</label><input type="number" name='attr_Ranged' class='sheet-short'><br />
<label>Endurance</label><input type="number" name='attr_Endurance' class='sheet-short'><button type='roll' name='roll_ToCheck' value='/roll 1d20 + @{Endurance}'></button><br />
<label>Intelligence</label><input type="number" name='attr_Intelligence' class='sheet-short'><button type='roll' name='roll_ToCheck' value='/roll 1d20 + @{Intelligence}'></button><br />
<label>Luck</label><input type="number" name='attr_Luck' class='sheet-short'><button type='roll' name='roll_ToCheck' value='/roll 1d20 + @{Luck}'></button><br />
</div>
<div class="sheet-col">
<h3 style="margin-bottom: 10px">Attributes</h3>
<label>Power</label></strong><input type="number" name='attr_Power' class='sheet-short'><br />
<label>Aim</label><input type="number" name='attr_Aim' class='sheet-short'><br />
<label>Medical</label><input type="number" name='attr_Medical' class='sheet-short'><button type='roll' name='roll_ToCheck' value='/roll 1d20 + @{Endurance}'></button><br />
<label>Reflex</label><input type="number" name='attr_Reflex' class='sheet-short'><button type='roll' name='roll_ToCheck' value='/roll 1d20 + @{Intelligence}'></button><br />
<label>Engineering</label><input type="number" name='attr_Engineering' class='sheet-short'><button type='roll' name='roll_ToCheck' value='/roll 1d20 + @{Luck}'></button><br />
</div>
<div class="sheet-col">
<h3 style="margin-bottom: 10px">Stats</h3>
<label>Stealth</label><input type="number" name='attr_Stealth' class='sheet-short'><button type='roll' name='roll_ToCheck' value='/roll 1d20 + @{Stealth}'></button><br />
<label>Sight</label><input type="number" name='attr_Sight' class='sheet-short'>ft<br />
<label>Sound</label><input type="number" name='attr_Sound' class='sheet-short'>ft<br />
<label>Speed</label><input type="number" name='attr_Speed' class='sheet-short'>ft<br />
<label>Driving/Flying</label><input type="number" name='attr_D' class='sheet-short'><input type="number" name='attr_F' class='sheet-short'><br />
</div>
</div>
<hr/>
<div class="sheet-3colrow">
<div class="sheet-col">
<label>Infection:</label><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><br>
<label>Fatigue:</label><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
</div>
<div class="sheet-col">
<label>Melee Weapon</label><input type="text" name='attr_mweapon' class='sheet-short'><label>Weapon damage</label><input type="number" name="attr_Mdamage">
<label>Durability</label><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
</div>
<div class="sheet-col">
<label>Ranged Weapon</label><input type="text" name='attr_rweapon' class='sheet-short'>
<label>Weapon damage</label><input type="number" name="attr_rdamage"><button type='roll' name='Ranged Damage' value='/roll 1d20 + @{rdamage} + @{Power}'></button>
<label>Clip Size</label><input type="number">
<label>Loaded</label><input type="checkbox">
<label>Shots Fire</label><input type="number">
</div>
</div>
<hr/>
.charsheet label {
display: inline-block;
width: 75px;
text-align: right;
}
.charsheet input {
display: inline-block;
width: 165px;
}
.sheet-col {
font-size: 0.5em;
font-weight: bold;
padding-right: 2px;
}
.charsheet input.sheet-short {
width: 3.5em;
}
.charsheet table td, .charsheet table th {
font-size: 0.5em;
font-weight: bold;
text-align: center;
}
select.sheet-dtype {
width: 60px;
vertical-align: top;
}
