Internal Anchors

Is there a way to use internal anchor references in the character sheets? I'm not wizard enough with CSS yet to do much fancy stuff, so was hoping there was a way to use those in the meantime (while I'm learning CSS). I ask, because using the <a> in the normal way doesn't seem to yield any results (not even making an link that goes nowhere). Thanks, Rich

What result are you trying to achieve? It's more helpful to tell us what result you want so that we can try to tell you how to achieve it, rather than telling us what answer you want.

Thanks for the reply. Sorry...I should have realized that, but figured you all would be able to read my mind. :) I'm trying to list of links at the top of the character sheet that will then jump one to key sections (Skills, Weapons, Spells, etc). This way, they could avoid scrolling for characters that have a lot of information on them and could jump quickly to the section needed. My plan is to eventually do this with CSS, but (as mentioned) my skills on that front just aren't there yet. So I thought having internal anchors would be an easy workaround until I can tackle the better solution. I hope this helps, Rich

Unfortunately, every character sheet in the campaign is on the same page, so even if you could do links, it wouldn't work properly. (Without checking to confirm, I don't believe anchor tags function as expected on character sheets at all.) However, you do have the option of using radio buttons to create "tabs", or checkboxes to create collapsible sections. Several of the larger sheets have done this, for pretty much the same reason you wanted to make anchors. CSS Wizardry can show you how to: Make checkboxes/radios that look more interesting than their default Show/hide areas based on the state of the input Create tabs (basically an application of the show/hide technique) The basics of show/hide are to set the display property of an element to its default, and then flip it to its opposite when the checkbox/radio is checked. For example: <input type="checkbox" class="sheet-example" name="attr_example-show-hide" value="1" /> <div class="sheet-example-content"> <h1>Example Content</h1> <p>Some example text</p> </div> /* We set the default of the content to display:none, so that on page load it's hidden */ div.sheet-example-content { display: none; } /* When the checkbox is checked, any content div that is a sibling which comes after will be displayed */ input[type=checkbox].sheet-example:checked + div.sheet-example-content { display: block; } The key here is the +, which is one of the two sibling selectors. ~ looks for any sibling which comes later, while + looks for a sibling which is the very next element. In this example, either would have worked. Creating tabs is very similar. For example: <input type="radio" class="sheet-tab1" name="attr_example-tab" value="1" /> Tab 1 <input type="radio" class="sheet-tab2" name="attr_example-tab" value="2" /> Tab 2 <div class="sheet-example-content sheet-tab1"> <h1>Example Tab #1</h1> <p>Some example text</p> </div> <div class="sheet-example-content sheet-tab2"> <h1>Example Tab #2</h1> <p>Some other example text</p> </div> div.sheet-example-content { display: none; } input[type=radio].sheet-tab1:checked ~ div.sheet-tab1, input[type=radio].sheet-tab2:checked ~ div.sheet-tab2 { display: block; } Here, because the tab2 radio button is between the tab1 button and content, we must use ~; similarly, because the tab1 content is between the tab2 button and tab2 content, we must use ~. You can reverse the hidden/display behavior by swapping the two display property values. (There are also other values you can used besides "block" to display the element, but block is the default for divs.) Or, instead of using ":checked", you can use ":not(:checked)" -- it should be obvious what happens when you're looking for an input that isn't checked, vs. looking for an input that is checked. Make sure you remember that, without the assistance of JavaScript (which you don't have when making a character sheet), you can only match against siblings and descendants, not cousins and ancestors. The following HTML will NOT work, no matter what CSS tricks you apply: <label><input type="checkbox" class="sheet-example" name="attr_example-show-hide" value="1" /> Show/Hide</label> <div class="sheet-example-content"> <h1>Example Content</h1> <p>Some example text</p> </div>

Awesome! Thanks - this is the wizardy I was going to be researching, but hadn't gotten around to it. I'll mess around with this stuff. Thanks, again. Rich