Hello there! I'm pretty sure there is just a small mistake, but I just can't find it. In short: the content that should be shown when the buttons are clicked just doesn't show. I'm trying to create a custom character sheet for a crossover classic World of Darkness game I'm GMing, based on the 20th anniversary VtM sheet. I want to use some styling and possibly a lot of snippets, but building it from scratch to understand the whole code and don't use tables for layout. I'm not very experienced in html and a lot less in CSS, but I see this as an opportunity to change this. Right now, I'm trying to implemet different tabs, using the action button based tabs from the CSS Wizardry page in the wiki, but they just don't seem to work and I have no idea why not. Since my sheet isn't a lot more than this I'll post anything I have this far: <div class="main border-div">
<!-- Immer sichtbare Überschriftzeile -->
<div class="logo logo-div"></div>
<div class="ltop">
</div>
<div class="rtop">
</div>
<!-- Menu -->
<div class="tabselect">
<button type="action" name="act_primary">Primary</button>
<button type="action" name="act_backgrounds">Backgrounds</button>
<button type="action" name="act_powers">Powers</button>
<button type="action" name="act_experience">Experience</button>
<button type="action" name="act_notes">Notes</button>
</div>
<input type="hidden" class="sheet-tabstoggle" name="attr_sheettab" value="primary" />
<!-- Hauptbogen -->
<!-- <div class="common">-->
<!-- Primary Sheet -->
<div class="common sheet-primary">
<h2>Primary</h2>
<span>Here will be traits</span>
</div>
<!-- Background Sheet -->
<div class="common sheet-background">
<h2>Background</h2>
<span>Here will be traits and descriptions</span>
</div>
<!-- Powers Sheet -->
<div class="common sheet-powers">
<h2>Powers</h2>
<span>Here will be special traits</span>
</div>
<!-- Experience Sheet -->
<div class="common sheet-experience">
<h2>Experience</h2>
<span>Here will be experiences</span>
</div>
<!-- Notes Sheet -->
<div class="common sheet-notes">
<h2>Notes</h2>
<span>Here will be notes</span>
<textarea>Some text</textarea>
</div>
<!-- </div> -->
</div>
<script type="text/worker">
const buttonlist = ["primary", "backgrounds", "powers", "experience", "notes"];
buttonlist.forEach(button => {
on(`clicked:$(button)`, function() {
setAttrs({
sheettab: button
});
});
});
</script> And /*Border and Logo */
.border-div {
background-color:transparent;
border-style: solid;
border-width: 40px 30px 30px;
border-image-source: url(<a href="http://i.imgur.com/hjjMqek.png" rel="nofollow">http://i.imgur.com/hjjMqek.png</a>);
border-image-slice: 75 56 58 54;
border-image-repeat: round stretch;
}
.logo-div {
background-image: url(<a href="https://upload.wikimedia.org/wikipedia/commons/9/9e/World_of_Darkness_Online_logo.svg" rel="nofollow">https://upload.wikimedia.org/wikipedia/commons/9/9e/World_of_Darkness_Online_logo.svg</a>);
background-size:100% 140px;
background-repeat: repeat-x;
background-position: 0px 10px;
}
/*Main-Layout Grid*/
.main {
display: grid;
grid-template-columns: minmax(10%, 1fr) minmax(140px, 566px) minmax(10%, 1fr);
grid-template-rows: minmax(35px, 140px) 80px 1fr;
grid-template-areas:"ltop logo rtop"
"tabselect tabselect tabselect"
"common common common";
}
.ltop {
grid-area: ltop;
background-color: orange;
}
.rtop {
grid-area: rtop;
background-color: orange;
}
.logo {
grid-area: logo;
background-color: yellow;
}
.tabselect {
grid-area: tabselect;
background-color: olive;
}
.common {
grid-area: common;
background-color: magenta;
}
/*Configuration of tab Buttons*/
.sheet-primary,
.sheet-background,
.sheet-powers,
.sheet-experience,
.sheet-notes {
display: none;
}
/*show the selected tab*/
.sheet-tabstoggle[value="primary"] ~ div.sheet-character,
.sheet-tabstoggle[value="background"] ~ div.sheet-background,
.sheet-tabstoggle[value="powers"] ~ div.sheet-powers,
.sheet-tabstoggle[value="experience"] ~ div.sheet-experience,
.sheet-tabstoggle[value="notes"] ~ div.sheet-notes {
display: block;
}
((the coloring is there to better see the spaces within the CSS grid and surely won't be there forever)) Please, can somebody tell me what is wrong? I see the buttons but it doesn't show any of the content of the tabs.
