Hello, I am trying to make a custom sheet layout for a game of Infinity i am planning to run. My first attempt was going fine although the length of scrolling needed was getting a bit much. Then i remembered playing 40k Rogue Trader and it having selectable Tabs. Eventually found the code to make them in this thread . I have mangaed to rename the buttons to suit my sheet. What i want to know is how/can i display the sheet content beneath the blue banner that contains the buttons? I have tried making a new <div class="xxxx"> and positioning it to where i think it needs to go but it always shows up in the banner area. Any help is greatly appreciated. CSS: /*----------- Tabs Setup -------------*/
/*this hides the contents of each tab by default*/
.charsheet div[class^="sheet-section"] {
display: none;
}
/*this shows the tab content when the appropriate input field is selected*/
.charsheet input.sheet-tab1:checked ~ div.sheet-section-basic,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-damage,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-skills,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-gear,
.charsheet input.sheet-tab5:checked ~ div.sheet-section-weapons,
.charsheet input.sheet-tab6:checked ~ div.sheet-section-other,
.charsheet input.sheet-tab7:checked ~ div.sheet-section-background {
display: block;
}
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
.charsheet input.sheet-tab {
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background: #c7c3b0;
color: black;
font-weight: bold;
border-radius: 4px;
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -101px;/*originally 91px*/
}
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
.charsheet input.sheet-tab8:checked + span.sheet-tab8,{
background: #2c424e;
color: #bfc4c6;
border-radius: 4px;
}
/*----------- End Tab Setup -----------*/
HTML: <div>
<!-- Set up the Tabs -->
<input type="radio" class="sheet-tab sheet-tab1" name="attr_core-tab" value="1" title="Basic Info" checked="checked"/>
<span class="sheet-tab sheet-tab1" style='line-height: 40px;'>BASIC INFO</span>
<input type="radio" class="sheet-tab sheet-tab2" name="attr_core-tab" value="2" title="Damage & Armour" />
<span class="sheet-tab sheet-tab2" style='line-height: 20px;'>DAMAGE & ARMOUR</span>
<input type="radio" class="sheet-tab sheet-tab3" name="attr_core-tab" value="3" title="Skills" />
<span class="sheet-tab sheet-tab3" style='line-height: 40px;'>SKILLS</span>
<input type="radio" class="sheet-tab sheet-tab4" name="attr_core-tab" value="4" title="Gear" />
<span class="sheet-tab sheet-tab4" style='line-height: 40px;'>GEAR</span>
<input type="radio" class="sheet-tab sheet-tab5" name="attr_core-tab" value="5" title="Weapons" />
<span class="sheet-tab sheet-tab5" style='line-height: 40px;'>WEAPONS</span>
<input type="radio" class="sheet-tab sheet-tab6" name="attr_core-tab" value="6" title="Other Info" />
<span class="sheet-tab sheet-tab6" style='line-height: 40px;'>OTHER INFO</span>
<input type="radio" class="sheet-tab sheet-tab7" name="attr_core-tab" value="7" title="Background" />
<span class="sheet-tab sheet-tab7" style='line-height: 40px;'>BACKGROUND</span>
<!-- End Tab setup -->
<div class="sheet-section-basic"><!-- Start of BASIC Tab -->
<!-- Stuff on the BASIC tab -->
Basic Info is showing here. I would like it to show beneath this banner so it has a clean white background ic an put tables etc in to.
</div>
<!-- End of BASIC Tab -->
<div class="sheet-section-damage"><!-- Start of DAMAGE Tab -->
<!-- Stuff on the DAMAGE tab -->
DAMAGE tab
</div><!-- End of DAMAGE Tab -->
<div class="sheet-section-skills"><!-- Start of Skills Tab -->
<!-- Stuff on the tab -->
Skills tab
</div><!-- End of Skills Tab -->
<div class="sheet-section-gear"><!-- Start of gear Tab -->
<!-- Stuff on the tab -->
Gear tab
</div><!-- End of gear Tab -->
<div class="sheet-section-weapons"><!-- Start of WEAPONS Tab -->
<!-- Stuff on the WEAPONS tab -->
WEAPONS tab
</div><!-- End of WEAPONS Tab -->
<div class="sheet-section-other"><!-- Start of OTHER Tab -->
<!-- Stuff on the OTHER tab -->
OTHER TAb
</div><!-- End of OTHER Tab -->
<div class="sheet-section-background"><!-- Start of BACKGROUND Tab -->
<!-- Stuff on the BACKGROUND tab -->
BACKGROUND
</div><!-- End of BACKGROUND Tab -->
</div>
