Hi there I am trying to make a text area next to my stat list and i have no idea how. I am very new to all this. any advice is greatly needed and appreciated div.sheet-tab-content { display: none; }
input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4
{
display: block;
}
input.sheet-tab
{
width: 150px;
height: 20px;
position: relative;
top: 5px;
left: 6px;
margin: -1.5px;
cursor: pointer;
z-index: 1;
}
input.sheet-tab::before
{
content: attr(title);
border: solid 1px #a8a8a8;
border-bottom-color: black;
text-align: center;
display: inline-block;
background: #fff;
background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
width: 150px;
height: 20px;
font-size: 18px;
}
input.sheet-tab:checked::before
{
background: #dcdcdc;
background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
border-bottom-color: #fff;
}
input.sheet-tab:not(:first-child)::before
{
border-left: none;
}
input.sheet-tab2::before
{
background: #fee;
background: -moz-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
background: -webkit-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
background: -ms-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
background: -o-linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
}
input.sheet-tab2:checked::before
{
background: #dcdcdc;
background: -moz-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
background: -webkit-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
background: -ms-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
background: -o-linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
border-bottom-color: #fcecec;
}
div.sheet-tab-content
{
border: 1px solid #a8a8a8;
border-top-color: #000;
margin: 2px 0 0 5px;
padding: 5px;
}
div.sheet-tab2
{
background-color: #fcecec;
} <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" title="First Tab" checked="checked" />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="Second Tab" />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" title="Third Tab" />
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4" title="Fourth Tab" />
<div class="sheet-tab-content sheet-tab1">
<h1>Stats</h1>
<table>
<tr>
<td colspan="9" class="sheet-statlabel-big" style="width: 350px;">STATS</td>
</tr>
<th>Ability Name</th><th>Ability<br>Score</th><th>Ability<br>Modifier</th>
</table>
<td>
<table>
<tr>
</tr>
<tr>
<td><button type='roll' value='/roll 1d20 + @{strmod}' name='roll_Str'></button></td>
<td class="sheet-statlabel">STR<br><div style="font-size: 0.65em;">Strength</div></td>
<td><input class="sheet-inputbox" type="number" name="attr_str" value="10" style="height: 24px; width: 40px;"></td>
<td><input class="sheet-inputbox" type="number" name="attr_strmod" value="0" style="height: 24px; width: 40px;" ></td> <textarea></textarea>
</tr>
<tr>
<td><button type='roll' value='/roll 1d20 + @{dexmod}' name='roll_Dex'></button></td>
<td class="sheet-statlabel">DEX<br><div style="font-size: 0.65em;">Dexterity</div></td>
<td><input class="sheet-inputbox" type="number" name="attr_dex" value="10" style="height: 24px; width: 40px;"></td>
<td><input class="sheet-inputbox" type="number" name="attr_dexmod" value="0" style="height: 24px; width: 40px;" ></td>
</tr>
<tr>
<td><button type='roll' value='/roll 1d20 + @{conmod}' name='roll_Con'></button></td>
<td class="sheet-statlabel">CON<br><div style="font-size: 0.65em;">Constitution</div></td>
<td><input class="sheet-inputbox" type="number" name="attr_con" value="10" style="height: 24px; width: 40px;"></td>
<td><input class="sheet-inputbox" type="number" name="attr_conmod" value="0" style="height: 24px; width: 40px;">
</tr>
<tr>
<td><button type='roll' value='/roll 1d20 + @{intmod}' name='roll_Int'></button></td>
<td class="sheet-statlabel">INT<br><div style="font-size: 0.65em;">Intelligence</div></td>
<td><input class="sheet-inputbox" type="number" name="attr_int" value="10" style="height: 24px; width: 40px;"></td>
<td><input class="sheet-inputbox" type="number" name="attr_intmod" value="0" style="height: 24px; width: 40px;" ></td>
</tr>
<tr>
<td><button type='roll' value='/roll 1d20 + @{wismod}' name='roll_Wis'></button></td>
<td class="sheet-statlabel">WIS<br><div style="font-size: 0.65em;">Wisdom</div></td>
<td><input class="sheet-inputbox" type="number" name="attr_wis" value="10" style="height: 24px; width: 40px;"></td>
<td><input class="sheet-inputbox" type="number" name="attr_wismod" value="0" style="height: 24px; width: 40px;" ></td>
</tr>
<tr>
<td><button type='roll' value='/roll 1d20 + @{chamod}'name='roll_Cha'></button></td>
<td class="sheet-statlabel">CHA<br><div style="font-size: 0.65em;">Charisma</div></td>
<td><input class="sheet-inputbox" type="number" name="attr_cha" value="10" style="height: 24px; width: 40px;"></td>
<td><input class="sheet-inputbox" type="number" name="attr_chamod" value="0" style="height: 24px; width: 40px;" ></td>
</tr>
<tr>
<td><button type='roll' value='/roll 1d20 + @{lckmod}' name='roll_Lck'></button></td>
<td class="sheet-statlabel">LCK<br><div style="font-size: 0.65em;">Luck</div></td>
<td><input class="sheet-inputbox" type="number" name="attr_lck" value="10" style="height: 24px; width: 40px;"></td>
<td><input class="sheet-inputbox" type="number" name="attr_lckmod" value="0" style="height: 24px; width: 40px;" ></td>
</tr>
</table>
</td><br><br>
</div>
