I building character sheets for my game Free Spacer. I have a header on the top and want to put a button (or tabs if I can't do that) that allow me to have more than type of sheet. Free Spacer Crewmember Contingency type Corvette Ship Launch Issue 1: The buttons are not clickable. Issue 2: Formatting the header is hinky I'm posting the code that (I think) matters. Here is the HTML code: <header>
<h1><img class="sheet-BGImg" src="<a href="http://www.freespacer.com/wp-content/uploads/2016/06/FSLogoSquareTrans_100.png" rel="nofollow">http://www.freespacer.com/wp-content/uploads/2016/06/FSLogoSquareTrans_100.png</a>" alt="Free Spacer">Free Spacer</h1>
<input type="radio" name="attr_selectedSheet" class="sheet-typeSelector sheet-crewmemberSelector" value="1" checked="checked"><span title="Free Spacer Crewmember"></span>
<input type="radio" name="attr_selectedSheet" class="sheet-typeSelector sheet-shipSelector" value="2"><span title="Contingency type Corvette"></span>
<input type="radio" name="attr_selectedSheet" class="sheet-typeSelector sheet-launchSelector" value="3"><span title="Ship Launch"></span>
</header>
<hr />
<!-- Character Sheet -->
<div class="sheet-sheetType sheet-crewmemberSheet">
</div>
<!-- Ship Sheet -->
<div class="sheet-sheetType sheet-shipSheet">
</div>
<!--Launch Sheet-->
<div class="sheet-sheetType sheet-launchSheet">
</div>
Here is the CSS /* Multiple Sheet Functionality */
div.sheet-sheetType
{
display: none;
}
input.sheet-crewmemberSelector:checked ~ div.sheet-crewmemberSheet,
input.sheet-shipSelector:checked ~ div.sheet-shipSheet,
input.sheet-launchSelector:checked ~ div.sheet-launchSheet
{
display: block;
}
input.sheet-typeSelector
{
width: 150px;
height: 20px;
position: relative;
top: 150px;
left: 400px;
cursor: pointer;
z-index: 1;
opacity: 0;
}
input.sheet-typeSelector + span::before
{
content: attr(title);
border: solid 1px #a8a8a8;
text-align: center;
display: inline-block;
background: #fff;
width: 150px;
height: 20px;
font-size: 10px;
position: absolute;
top: 150px;
left: 400px;
}
input.sheet-shipSelector + span::before
{
left: 550px;
}
input.sheet-launchSelector + span::before
{
left: 700px;
}
/*General Sheet Style*/
body
{
font-family: "PT Sans", Helvetica, sans-serif;
font-size: 1em;
color: #000;
background-color: #FFF;
line-height: 150%;
}
header
{
display: block;
}
img.sheet-BGImg
{
z-index:-1;
}
h1, h2, h3, h4
{
font-variant: small-caps;
font-weight: 500;
}
h1
{
font-size: 2em;
}
h2
{
font-size: 1.3em;
}
h3
{
font-size: 1.1em;
}
h4
{
font-size: 0.9em;
}
td, p
{
font-size: 1em;
white-space: nowrap;
}
br
{
font-size: 0.5em;
height: 50%;
}
hr
{
border-top: 1px solid #D3D3D3;
}
