Still More Sheet Building Issues

Gah! Just when you think you have some problems solved, they multiply. Hopefully someone here can tell me what I'm doing wrong because I'm really scratching my head on this one. Ok, to start with, I'm using the CWoD sheets ( CWoD Werewolf specifically) as a sort of template, building off the existing formatting. Everything blows up in my face when I get to skills. Here's a simple picture of what I'm looking to create–or what it's SUPPOSED to look like anyway. Pretty simple, right? So the column is broken into two divs: the first div should contain the checkbox and the skill name, the second div should contain the input field and the roll button. This way, there is uniform space between the skill name and the input field. But when I plug it all in, this is the result. Prior to adding the roll buttons and the checkboxes, everything was lining up nicely. Now it's become a big swirling mess. It's as though the divs don't want to contain more than one element, regardless of their width. Now, I the issue with the checkboxes comes from adding <span></span> after the checkbox code. This seems to push everything else on the line to the next line. Naturally, without <span></span>, the checkbox doesn't show up at all. As to the issue with the roll button, I have no clue. Help? Here's the code I'm using for this if helps: <!-- Test What's Wrong --> <h1 style="text-align: center">SKILLS</h1> <div class='sheet-3colrow'> </div> <div style="width:90px" align="left"> <!-- Fighting Skills --> <input type='checkbox' name='attr_backskill' value='0'><span></span><h4 style="line-height:28px">Gunnery</h4> <input type='checkbox' name='attr_backskill' value='0'><span></span><h4 style="line-height:28px">Marksman</h4> </div> <div style="width:155px" align="right"> <!-- Fighting Skill Ranks and Rolls --> <select name="attr_gunnery" value="2"> <option value="1!">1</option> <option value="2!">2</option> <option value="3!">3</option> <option value="4!">4</option> <option value="5!">5</option> </select> <button type='roll' value='/roll [[@{gunnery}+@{reason}-?{Complexity|0}+?{Modifier|0}]]d10!10>7sd vs @{target|Avoidance} [Avoidance]' name='roll_gunnery'/> </div> <div> <select name="attr_marksman" value="2"> <option value="1!">1</option> <option value="2!">2</option> <option value="3!">3</option> <option value="4!">4</option> <option value="5!">5</option> </select> <button type='roll' value='/roll [[@{marksman}+@{agility}-?{Complexity|0}+?{Modifier|0}]]d10!10>7sd vs @{target|Avoidance} [Avoidance]' name='roll_marksman' /> </div> </div> </div> Thanks!

BTW, you'll notice there is a </div> line after each field/button combo. This could also be part of the issue however if I don't include it, the field and button are consumed into some strange brundlefly combo. So I suspect I'm doing that part right.

You're going to need to share your CSS as well. For example, h4 is normally a block-level element and thus won't let anything else be on the same line.

The CSS is available on the GitHub link I included.

Changes: Changed values of checkboxes from 0 to 1. This will make them more useful as attributes. (An unchecked checkbox is 0, while a checked checkbox is the value of the value attribute.) Put each "cell" in its own div, with the class sheet-row, to enable the margin between them. Put the entire section into a sheet-2colrow and sheet-col divs. The sheet-2colrow was also set to a specific width, instead of 100%. Removed extra closing div tags. Changed <button/> to <button></button> -- button is not supposed to be a self-closing tag. Also changed <input> to <input/> -- although omitting the self-closing of input is permitted, it's not recommended. Changed h4 to span with class sheet-skill-name. While CSS can make the h4 behave exactly as you want it to, it wasn't very idiomatic. HTML: <!-- Test What's Wrong --> <h1 style="text-align: center">SKILLS</h1> <div class='sheet-2colrow' style="width:250px"> <div class="sheet-col"> <!-- Fighting Skills --> <div class="sheet-row"> <input type='checkbox' name='attr_backskill' value='1' /><span></span> <span class="sheet-skill-name">Gunnery</span> </div> <div class="sheet-row"> <input type='checkbox' name='attr_backskill' value='1' /><span></span> <span class="sheet-skill-name">Marksman</span> </div> </div> <div class="sheet-col"> <!-- Fighting Skill Ranks and Rolls --> <div class="sheet-row"> <select name="attr_gunnery" value="2"> <option value="1!">1</option> <option value="2!">2</option> <option value="3!">3</option> <option value="4!">4</option> <option value="5!">5</option> </select> <button type='roll' value='/roll [[@{gunnery}+@{reason}-?{Complexity|0}+?{Modifier|0}]]d10!10>7sd vs @{target|Avoidance} [Avoidance]' name='roll_gunnery'></button> </div> <div class="sheet-row"> <select name="attr_marksman" value="2"> <option value="1!">1</option> <option value="2!">2</option> <option value="3!">3</option> <option value="4!">4</option> <option value="5!">5</option> </select> <button type='roll' value='/roll [[@{marksman}+@{agility}-?{Complexity|0}+?{Modifier|0}]]d10!10>7sd vs @{target|Avoidance} [Avoidance]' name='roll_marksman'></button> </div> </div> </div> Added CSS: span.sheet-skill-name { font-size: 14px; font-weight: bold; line-height: 28px; } select { margin-bottom: 0; } div.sheet-row { margin-bottom: 5px; } (No changes to the existing CSS.) Also, I realized this was basically the PM you sent me a little while ago that I hadn't gotten around to, so I apologize for being slow. =) Also also, I don't think your roll buttons are going to work. For example, /roll [[1!+0-0+0]]d10!10>7sd vs 0 [Avoidance] will fail because 1! is illegal syntax. I'm not familiar with the system you're creating the sheet for, but you should probably just remove the exclamation marks from the option values. If those numbers are at some point going to be used for dice sizes on exploding dice, you can add the exclamation marks back in for the roll, rather than on the attribute value.

Brian, Thanks. Actually my next post was probably going to be how to put a two column section into an otherwise 3-column sheet. My previous attempts at that didn't work out too well. So thank you! As to the dice rolling, not sure where the ! In 1! Is coming from. So maybe I'm putting in my values wrong. That seems to be the way other sheets have done it. I was hoping to finish the formatting before diving into the dice functions. here is a typical roll in witch hunter: /roll [[@{skill}+@{ability}+?{modifier|0}]]d10!10>7 so roll a number of d10s equal to your skill+ability, +/- any bonuses or penalties. Rolls of 7 or better are successes. Rolls of 10 are rerolled for a chance at an additional success(es). Combat skill rolls are a bit more complex, but follow the same basic procedure. Any advice on working that into the character sheet? Do I just need to go through my input fields and remove my exclamation points? Thanks!

Oh, one more thing. say I wanted to set up a 1-column div section amongst the 3-columns and 2-columns. Is there any additional CSS code that would be helpful? I haven't found any existing column code, but I do know that the style sheet creates a slight margin with the 3-column designation (about 10px, I think). Thanks!

Well that all seems to be working! Huzzah! Thanks Brian! Now, a couple of related questions: 1) What do I have to do to get this to work as part of a three column spread? The column width is roughly the same (250px). I have plans for one more column of skill-related materials (languages, trained knowledges, etc.) 2) I want to add a blank input field into the skills scheme. I tried just dropping in: <input type="text" name="attr_skill" /> But that bumped everything off column again. I think it's because the default input width is too large. Is there a way to override the CSS code on this? I tried adding "maxsize" and "size" definitions to the style, but that didn't work. 3) Am I right that this sets the skill rank default at 2? If I want to add a "0" rank (for untrained) and want that to be the default, would I simply change the input html as follows: <select name="attr_skill" value="0"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> Thanks.

Tom said: Well that all seems to be working! Huzzah! Thanks Brian! Now, a couple of related questions: 1) What do I have to do to get this to work as part of a three column spread? The column width is roughly the same (250px). I have plans for one more column of skill-related materials (languages, trained knowledges, etc.) The stylesheet by default comes with sheet-3colrow. sheet-2colrow, and sheet-col. The way they work is that sheet-col is an inline-block element, and if it's inside a 2colrow, it will be approximately 50% of the parent div's width (approximately 33% inside a 3colrow). To have three columns, you simply put three sheet-col elements inside a sheet-3colrow element. Similarly, two sheet-col elements inside a sheet-2colrow makes a two-column layout. Whenever you want to change your column count, simply end the 2colrow or 3colrow. For example, you could do three columns, one column, then two columns: <div class="sheet-3colrow"> <div class="sheet-col">Column 1</div> <div class="sheet-col">Column 2</div> <div class="sheet-col">Column 3</div> </div> <div> Single column </div> <div class="sheet-2colrow"> <div class="sheet-col">Column A</div> <div class="sheet-col">Column B</div> </div> It gets a little bit more complicated if you try to have a sheet-2colrow or sheet-3colrow inside of a sheet-col element, so I would recommend against it unless you really need it. Tom said: 2) I want to add a blank input field into the skills scheme. I tried just dropping in: <input type="text" name="attr_skill" /> But that bumped everything off column again. I think it's because the default input width is too large. Is there a way to override the CSS code on this? I tried adding "maxsize" and "size" definitions to the style, but that didn't work. You can set the width of an element with the width property. For something with a dynamic width (eg, width: 50% or width: 5em ), you can also limit how wide it can get with max-width . Remember to include the units on the width. Generally, a percentage, px (for pixels), or em (approximately with width of "M" in the current font size) are useful units for width. (Height often finds ex more useful than em -- approximately the height of "x" in the current font size.) Tom said: 3) Am I right that this sets the skill rank default at 2? If I want to add a "0" rank (for untrained) and want that to be the default, would I simply change the input html as follows: <select name="attr_skill" value="0"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> Thanks. No. To set the default value of a select, you need to set the selected attribute of one of the option elements. For example: <!-- default value is 2 --> <select name="attr_skill"> <option value="0">0</option> <option value="1">1</option> <option value="2" selected="true">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> If you want the default value to be the first element in the list, you don't need to do anything at all.

[quote]It gets a little bit more complicated if you try to have a sheet-2colrow or sheet-3colrow inside of a sheet-col element, so I would recommend against it unless you really need it.[/quote] i don't think I'm trying to do that. Here is what I'm envisioning: background (3-column) — abilities (3-column) — skills (3-column) — combat & defense (2-column) — sorcery (2-column) — other stuff (3-column) make sense? Flirting with disaster?

Yeah, that's fine. Pretty simple. If you want divisions between each section, you'll need 6 sheet-Xcolrow elements. If you don't want divisions, you can do it in 3.