Radio Button "Tabs"

Hello folks, I've run into a little snag, I'm tried to work out just how I can add radio button tabs to my character sheet. I have some code that seems to work but when I try to add some style to it and make it look a bit better than just the buttons things seem to fall apart. I feel I have some middling knowledge of CSS, I know the codes and how things are constructed.. Pseudo-classes or whatever the "::" "~" stuff not withstanding, (dont understand any of that and never will no matter how well those tutorial websites explain it.) I learn by listening to people explain and showing how it works. But thats another issue. I have some code that I've been trying to get to work for a while and I've given up on getting it to work myself. I was wondering if someone might be able to take a look at it and see what's wrong. I have the code I've been working on here <a href="http://jsfiddle.net/2Dm83/" rel="nofollow">http://jsfiddle.net/2Dm83/</a> . I just to know, I would love also to be able to increase the size of the radio button to fill the entire h4's area and then make it invisible. But, I'll settle for actually getting it to work first. Also, yes I know I could probably do this with &lt;spans&gt; and &lt;divs&gt;. But they are severely overused and it makes it harder for me to keep my code up to date when everything in existence uses the same two html tags over and over again. ---------------- I just noticed the jsfiddle link does not give the right code for what I'm working on, so I have to type it in here manually: The CSS code is: .sheet-character-sheet { display: none; } h4 { border: 1px solid white; padding: 0.5em; margin: -3px; display: inline; position: relative; top: -8px; left: -7px; background-color: black; color: white; font-size: 1em; font-weight: bold; text-align: center; } .isPC:checked ~ .sheet-pc, .isNPC:checked ~ .sheet-npc, .isSpells:checked ~ .sheet-spells { display: block; } And the HTML is: &lt;h4&gt;&lt;input type="radio" class="isPC" value="1" name="attr_pc" checked&gt; PC&lt;/h4&gt; &lt;h4&gt;&lt;input type="radio" class="isNPC" value="0" name="attr_pc"&gt; NPC&lt;/h4&gt; &lt;h4&gt;&lt;input type="radio" class="isSpells" value="0" name="attr_pc"&gt; SPELLS&lt;/h4&gt; &lt;div class="sheet-character-sheet sheet-pc"&gt; &lt;div&gt; Something Clever for PCs here! &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-character-sheet sheet-npc"&gt; &lt;div&gt; Something Clever for NPCs here! &lt;/div&gt; &lt;/div&gt; &lt;div class="sheet-character-sheet sheet-spells"&gt; &lt;div&gt; Something Clever for Spells here! &lt;/div&gt; Yeah so that's what I have so far, any help would be very much appreciated.

It doesn't work because your radios are wrapped by a parent element and your Css selector is looking for siblings of a checked radio. There is no way in css to look for siblings of a parent of a selected radio. Check out the 5e sheet to see an example of how it works. If you need more help then ask and I'll post more tomorrow when I have a computer.

Hrm, I don't understand any of that sibling of this and parent of that... So.. lets step away from that and look at from a different direction. Is there any way to make it look like this "roughly." Perhaps I'll try and move the radio button outside of the &lt;h4&gt; tag and use an offset to shift it into it. Not the best solution, but its better, (and more importantly easier to understand than some of the example codes. Especially that spaghetti code radio button "tabbed" thing... using nested labels... Looks awesome but that nesting makes it hard to keep track. I'll continue to work on it as well, if I cant get it to function before tomorrow then I will have more questions.

Here is a simple set up I use fairly frequently. The whoel thread is distilled awesome

Toby said: Hrm, I don't understand any of that sibling of this and parent of that... So.. lets step away from that and look at from a different direction. Is there any way to make it look like this "roughly." ".isPC:checked ~ .sheet-pc" is using one of the two "sibling selectors" in CSS. Two elements are siblings if they are both contained within the same parent element. The ~ selector looks for any sibling, while the + selector looks for siblings with are right next to each other. &lt;A&gt;&lt;/A&gt;&lt;B&gt;&lt;/B&gt;&lt;C&gt;&lt;/C&gt; has three elements which are all siblings, A, B, and C. A and B are adjacent (either A + B or A ~ B would match B), B and C are adjacent (either B + C or B ~ C would match C), and A and C are not adjacent (A ~ C would match C, but A + C would not match anything). &lt;A&gt;&lt;B&gt;&lt;/B&gt;&lt;/A&gt;&lt;C&gt;&lt;/C&gt; has one pair of siblings. A and C are siblings, but B and C are not. Because there is no "parent selector" in CSS, there is no means to match C starting from either B. This is analogous to your &lt;h4&gt;&lt;input&gt;&lt;/h4&gt;&lt;div&gt;&lt;/div&gt;: you can't match the div when starting from the checked/unchecked state of the input. In order to create tabs like this, the radio buttons must be siblings to the elements you're using as the tab content. You can't wrap them in anything; coupled with the fact that you should not use the id attribute on any of your elements (ids must be unique, and as soon as the campaign contains 2 or more characters they would no longer be unique), there is no means to use &lt;label&gt; for your tabs, as the only means to link the label to the radio button are either by id (using the label's "for" attribute), or wrapping the label around the button as well. And if you wrap the label around the button, it is no longer possible to use it as a tab.

I am very sorry but that just causes my eyes to glaze over. I have a very hard time with any of that, I need to have it explained verbally AND see it in use. Although, it did remind me of Venn Diagram stuff from school. I do however, think I get some of the theory,a h2 and an h1 would be siblings if they were contained inside the of the same body or div... Regardless, I examined the 5e character sheet and am working off of that, as best I can, I cant really create new tabs, at least not without playing with a it a few days. But, I don't think I'll need to, the tabs they have there are quite enough. Thank you for your help, I believe I'm set with this for the moment, although I think I'll have more questions before the week is over, I'm working on a new 3.5 character sheet based on Diana's but with a bit more functionality. I'm realizing that these tabs may.. complicate things, that and translating what code I have into a new sheet and cleaning it up has apparently broken some portions of the sheet. Bah, I've not done this in ages. I've forgotten how much of a pain it is... (and rewarding when you finally get it.. ) John W: Thank you for the link, I will bookmark that thread immediately.

Ya, the setup is a bit unfortunate. It requires the tabs be a set width and some other constraints, but in the end it works. Glad you were able to pick it up from the 5e sheet. :)