Hi! I have a design question regarding the custom character sheet I'm currently working on. As I am a programmer but not a designer, I consider CSS as something I want to avoid dealing with as far as possible. For my character sheet I looked at other character sheets, adopted some of the ideas and ajusted them. One of this ideas was a tab-control to jump through several sites of a character sheet. This is managed with radio buttons that control the behaviour of span areas. .charsheet {
background-color: white;
}
.charsheet {
font-family: "Times New Roman";
}
/*-----------------------------------------------input ------------------------------------------------*/
.charsheet input[type=text], .charsheet input[type=number] {
padding-left: 2px;
}
.charsheet input[type="text"], .charsheet input[type="number"] {
background-color: white;
border-width: 0px 0px 0px 0px;
}
.charsheetinput [type="text"]:disabled, .charsheet input[type="number"]:disabled {
background-color: lightgray;
border-width: 0px 0px 0px 0px;
}
.charsheet input[type="text"], select {
width:100%;
margin:0;
background-color: white;
border-width: 0px 0px 0px 0px;
}
.charsheet input[type=number]:disabled {
background-color:#FFFFFF;
}
td {
padding: 0px;
}
input{
font-family: "Times New Roman";
}
input[type="checkbox"]:checked + span::before{
content: "[verstecken]";
}
input[type="text"]:disabled {
background-color:#81BEF7;
}
input[type="checkbox"] + span::before
{
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
content: "[anzeigen]";
width: 14px;
height: 14px;
font-size: 12px;
}
/* */
/*-------------------------------------------------Tabs--------------------------------------*/
div[class^="sheet-section"] {
visibility: hidden;
opacity: 0;
max-height:0;
overflow: hidden;
}
input.sheet-tab {
width: 70px;
height: 20px;
cursor: pointer;
position: relative;
opacity: 1;
z-index: 9999;
}
span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 12px;
background: #dcdcdc;
color: black;
font-weight: bold;
border: solid 1px #a8a8a8;
text-align: center;
width: 170px;
height: 20px;
cursor: pointer;
position: relative;
margin-left: -75px;
}
input.sheet-tab::before {
content: attr(title);
text-align: center;
display: inline-block;
width: 100%;
height: 100%;
background: black;
color: white;
font-weight: bold;
}
input.sheet-tab1:checked ~ div.sheet-section-Grundwerte,
input.sheet-tab2:checked ~ div.sheet-section-Fertigkeiten,,
input.sheet-tab21:checked ~ div.sheet-section-Fertigkeiten,
input.sheet-tab3:checked ~ div.sheet-section-Kampf,
input.sheet-tab4:checked ~ div.sheet-section-Entwicklung,
input.sheet-tab5:checked ~ div.sheet-section-Tiergefaehrten {
max-height: 999999px;
visibility: visible;
opacity: 1;
transition: opacity 0.5s linear 0s;
overflow: hidden;
border: 1px solid #222;
margin: 7px 0 0 5px;
padding: 5px
} I have a problem with input.sheet-tab . With the width of 70px it fits perfectly and looks like this: But the user has to click in the left part of the "button" to jump to another side, which is an annoying bug. If I change the width to something like 140, it looks like this: That's even worse. As I said: I have no idea of good design and would be glad if anyone could point out a solution for this problem (that the radio button has the same size as the "button"/span area and is in fact in the same place). Also I want to add that the opacity of the input.sheet-tab normally is 0, I just set it to 1 to have a visual hint. So, I guess it's a pretty odd problem for someone who's used to code in CSS - but I'd be glad if you can take the time and help me nevertheless. Cheers.
