[Help] html screw up

i did my sheet all by html  then becoem a pro in roll20 and wanted use my sheet.. but when i copyied andpasted the code the prevoew was nothing like what i had created...  any help.. cause when i did some other coding starting from the base star wars d6 sheet it was all messy and couldnt figure out the formatting of the sheet to make it beautiful again

Did you copy over the css file/code as well?  That's often where the information that defines the colors etc is.  Also, how does it look in game?  the preview pane does not always reflect how the sheet actually looks in game.

its a complete mess :)  ill chekc the css file

its still not as clean asi would like it..a s well im having problems with the autp rll feature for some stats/attributes.. not sure how to code it to make the roll

Rolls look something like:  <button type="roll" name="attr_checkname" title='checkname' value=" *****some roll in here***** " ></button> If you have problems with some particular code, post it and we can look at it and try to find what's wrong.

If you have a picture of what you want, and show us the code, we will be able to provide more accurate information to assist you. Okay, to be absolutely truthful, I can't figure out what went wrong form what you have said, but other folks are much better than I at fixing issues.  If I am to provide help, an image of what you want and the code of what you have will help me figure out what needs to happen.  The "we" part only refers to the other voices I hear, not necessarily those on the forum...but I'm pretty sure G.V. is one of them.    

thanks illl post some more info on what im trying to accomplish after my game im running

<!-- the roll button should be at the end of the line instead of below it, as well the button at the bottom doesnt seem to work, i dunno what else i can do.. alot of formating screw ups--> <div name="theforce" style="text-align:left; position:relative;"> <div class='sheet-2colrow'> <div class='sheet-col'> <table> <th><label>Force Skills</label></th> <tr> <td style="width:500px;"> <div> <button type='roll' value='/roll (@{control} - 1)d6 + 1d6! + @{controlpip}' > Control</button> <div style="float:left;"> <input type="number" name="attr_control" min="0" value="0"/>D +<input type="number" name="attr_controlpip" min="0" max="2" value="0"/> </div> <fieldset> <select class ="sheet-select" name="attr_CONTROL_select" value="0" style="width:250px"> <option value="0"> </option> <option value="ABSORB DISSIPATE ENERGY">ABSORB DISSIPATE ENERGY</option> <option value="ACCELERATE HEALING">ACCELERATE HEALING</option> <option value="CONCENTRATION">CONCENTARTION</option> <option value="CONTORT ESCAPE">CONTORT ESCAPE</option> <option value="CONTROL DISEASE">CONTROL DISEASE</option> <option value="CONTROL PAIN">CONTROL PAIN</option> <option value="DETOXIFY POISON">DETOXIFY POISON</option> <option value="EMPTINESS">EMPTINESS</option> <option value="ENHANCE ATTRIBUTE">ENHANCE ATTRIBUTE</option> <option value="FORCE OF WILL">FORE OF WILL</option> <option value="HIBERNATION TRANCE">HIBERNATION TRANCE</option> <option value="INSTINCTIVE ASTROGATION">INSTINCTIVE ASTROGATION</option> <option value="RAGE">RAGE</option> <option value="REDUCE INJURY">REDUCE INJURY</option> <option value="REMAIN CONSCIOUS">REMAIN CONSCIOUS</option> <option value="REMOVE FATIGUE">REMOVE FATIGUE</option> <option value="RESIST STUN">RESIST STUN</option> <option value="SHORT TERM MEMORY ENHANCEMENT">SHORT TERM MEMORY ENHANCMENT</option> <option value="Adrenaline Adjustment ">Adrenaline Adjustment</option> <option value="ANGER">ANGER</option> <option value="BLAKCNESS">BLACKNESS</option> <option value="BURST OF SPEED">BURST OF SPEED</option> <option value="CALCULATE">CALCULATE</option> <option value="CALM">CALM</option> <option value="CHANNEL ENERGY">CHANNEL ENERGY</option> <option value="CHANNEL RAGE">CHANNEL RAGE</option> <option value="CLOAKOF DARKNESS">CLOAKOF DARKNESS</option> <option value="COGNITIVE TRANCE">COGNITIVE TRANCE</option> <option value="COMBAT TRANCE">COMBAT TRANCE</option> <option value="THE DRAGON">THE DRAGON</option> <option value="ENHANCED SPEED">ENHANCED SPEED</option> <option value="FORCE CHARGED STRIKE">FORCE CHARGED STRIKE</option> <option value="HANDS OF THE JHEMADAN">HANDS OF THE JHEMADAN</option> <option value="HEAL">HEAL</option> <option value="IMITATE">IMITATE</option> <option value="PALL OF THE DARKSIDE">PALL OF THE DARKSIDE</option> <option value="PERCEPTIVE TRANCE">PERCEPTIVE TRANCE</option> <option value="REGENERATE">REGENERATE</option> <option value="REPEL FORCE LIGHTNING">REPEL FORCE LIGHTNING</option> <option value="RESIST FORCE">RESIST FORCE</option> <option value="SUPER LEAP">SUPER LEAP</option> <option value="UP THE WALLS">UP THE WALLS</option> <option value="WISDOM">WISDOM</option> </select> <input type="number" name="attr_control1" min="0" value="0"/>D +<input type="number" name="attr_controlpip1" min="0" max="2" value="0"/> <button style="float:left;" type='roll' value='/roll (@{attr_control1} - 1)d6 + 1d6! + @{attr_controlpip1}' ></button> </fieldset> </div> </div> </td> </tr>

<div name"attributes"> <table> <tr> <td> <div> <button type='roll' value='/roll (@{perception} - 1)d6 + 1d6! + @{perceptionpip}' >Perception</button> <div style="float:right;"> <input type="number" name="attr_perception" min="1" value="3"/>D +<input type="number" name="attr_perceptionpip" min="0" max="2" value="0"/> </div> </div> <fieldset> <button type="roll" value="/r (@{perckilldice} - 1)d6 + 1d6! + @{perckillpip}"></button> <!--<input type="text" name="attr_perckillname"/>--> <!--<fieldset>--> <select class ="sheet-select" name="attr_PERCEPTION_select" value="0" style="width:200px"> <option value="0"> </option> <option value="BARGAIN">BARGAIN</option> <option value="S-SPICE">Spec-Spice</option> <option value="S-WEAPONS">Spec-Weapons</option> <option value="S-DROIDS">Spec-Droids</option> </select> <!-- perception end --> <div> <input type="number" name="attr_perckilldice" min="1" value="3"/>D +<input type="number" name="attr_perckillpip" min="0" max="2" value="0"/> </div> </fieldset> </td> <td> <div> <button type='roll' value='/roll (@{strength} - 1)d6 + 1d6! + @{strengthpip}' >Strength</button> <div style="float:right;"> <input type="number" name="attr_strength" min="1" value="3"/>D +<input type="number" name="attr_strengthpip" min="0" max="2" value="0"/> </div> </div> <fieldset> <button type="roll" value="/r (@{strskilldice} - 1)d6 + 1d6! + @{strskillpip}"></button> <!--<input type="text" name="attr_strskillname"/>--> <div> <select class ="sheet-select" name="attr_STRENGTH_select" value="0" style="width:200px"> <option value="0"> </option> <option value="BRAWLING">BRAWLING</option> <option value="S-Boxing">Spec-Boxing</option> <option value="S-Martial Arts">Spec-Martial Arts</option> <option value="climbing and jumping">CLIMBING AND JUMPING</option> </select> <input type="number" name="attr_strskilldice" min="1" value="3"/>D +<input type="number" name="attr_strskillpip" min="0" max="2" value="0"/> </div> </fieldset> </td> <td> <div> <button type='roll' value='/roll (@{technical} - 1)d6 + 1d6! + @{technicalpip}' >Technical</button> <div style="float:right;"> <input type="number" name="attr_technical" min="1" value="3"/>D +<input type="number" name="attr_technicalpip" min="0" max="2" value="0"/> </div> </div> <fieldset> <button type="roll" value="/r (@{techskilldice} - 1)d6 + 1d6! + @{techskillpip}"></button> <!--<input type="text" name="attr_techskillname"/>--> <div> <select class ="sheet-select" name="attr_TECHNICAL_select" value="0" style="width:300px"> <option value="0"> </option> <option value="ARMOR REPAIR">ARMOR REPAIR</option> <option value="S-Stormtrooper Armor">Spec-stormtrooper Armor</option> <option value="S-Bounty hunter armor">Spec-Bounty Hunter Armor</option> <option value="S-Dark Trooper armor">Spec-Darktrooper Armor</option> <option value="A-ARMOR ENGINEERING">ADVANCED-ARMOR ENGINEERING</option> </select> <input type="number" name="attr_techskilldice" min="1" value="3"/>D +<input type="number" name="attr_techskillpip" min="0" max="2" value="0"/> </div> </fieldset> </td> </tr> <tr> <td> <div> <button type='roll'value='/roll (@{dexterity} - 1)d6 + 1d6! + @{dexteritypip}' >Dexterity</button> <div style="float:right;"> <input type="number" name="attr_dexterity" min="1" value="3"/>D +<input type="number" name="attr_dexteritypip" min="0" max="2" value="0"/> </div> </div> <fieldset> <button type="roll" value="/r (@{dexskilldice} - 1)d6 + 1d6! + @{dexskillpip}"></button> <!--<input type="text" name="attr_dexskillname"/>--> <select class ="sheet-select" name="attr_dexterity_select" value="0" style="width:200px"> <option value="0"> </option> <option value="Blasters">BLASTER</option> <option value="S-Blaster pistol">Spec-Blaster Pistol</option> <option value="S-Blaster heavy pistol">Spec-Heavy Blaster Pistol</option> <option value="S-Blaster rifle">Spec-Blaster rifle</option> </select> <div> <input type="number" name="attr_dexskilldice" min="1" value="3"/>D +<input type="number" name="attr_dexskillpip" min="0" max="2" value="0"/> </div> </fieldset> </td> <td> <div> <button type='roll' value='/roll (@{knowledge} - 1)d6 + 1d6! + @{knowledgepip}' >Knowledge</button> <div style="float:right;"> <input type="number" name="attr_knowledge" min="1" value="3"/>D +<input type="number" name="attr_knowledgepip" min="0" max="2" value="0"/> </div> </div> <fieldset> <button type="roll" value="/r (@{knowskilldice} - 1)d6 + 1d6! + @{knowskillpip}"></button> <!--<input type="text" name="attr_knowskillname"/>--> <select class ="sheet-select" name="attr_KNOWLEDGE_select" value="0" style="width:200px"> <option value="0"> </option> <option value="ALIEN SPECIES">ALIEN SPECIES</option> <option value="S-Wookie">Spec-Wookies</option> <option value="S-Gamoreans">Spec-Gamoreans</option> <option value="S-Cathar">Spec-Cathar</option> <option value="S-Chiss">Spec-Chiss</option> <option value="S-Givin">Spec-Givin</option> </select> <div> <input type="number" name="attr_knowskilldice" min="1" value="3"/>D +<input type="number" name="attr_knowskillpip" min="0" max="2" value="0"/> </div> </fieldset> </td> <td> <div> <button type='roll' value='/roll (@{mechanical} - 1)d6 + 1d6! + @{mechanicalpip}' >Mechanical</button> <div style="float:right;"> <input type="number" name="attr_mechanical" min="1" value="3"/>D +<input type="number" name="attr_mechanicalpip" min="0" max="2" value="0"/> </div> </div> <fieldset> <button type="roll" value="/r (@{mechskilldice} - 1)d6 + 1d6! + @{mechskillpip}"></button> <!--<input type="text" name="attr_mechskillname"/>--> <select class ="sheet-select" name="attr_MECHANICAL_select" value="0" style="width:200px"> <option value="0"> </option> <option value="ARCHAIC STARSHIP PILOTING">ARCHAIC STARSHIP PILOTING</option> <option value="ASTROGATION">ASTROGATION</option> <option value="S-Kessel run">Spec-Kessel run</option> <option value="S-tatooine to Coruscant">Spec-Tatooine to Corascant</option> </select> <div> <input type="number" name="attr_mechskilldice" min="1" value="3"/>D +<input type="number" name="attr_mechskillpip" min="0" max="2" value="0"/> </div> </fieldset> <!--- <div> <textarea name="attr_mechSkills"></textarea> </div> ---> </td> </tr> </table> </div>

On a slight side note, I rarely use the preview pane to check progress, it is better and more reliable to have a second browser tab open with the game loaded which you can refresh and check a journal's character sheet tab to see an accurate representation of the sheet in progress.

curtis w. said: <!-- the roll button should be at the end of the line instead of below it, as well the button at the bottom doesnt seem to work, i dunno what else i can do.. alot of formating screw ups--> Typically if a something is showing up underneath smoother where it should be at the end, that means you've run out of space, so you widths are set up incorrectly.  At least that has been my experience. <div name="theforce" style="text-align:left; position:relative;"> <div class='sheet-2colrow'> <div class='sheet-col'> <table> <th><label>Force Skills</label></th> <tr> <td style="width:500px;"> <div> Just wondering what you are trying to accomplish with the <div> inside a <td> tag? Not saying it can't be done, but I'm not understanding what you're trying to accomplish.  I use <div>s to create tables without the the <table>,<tr>, and <td> tags. Also, a <div> without a class, or css styling will be unpredictable in terms of layout. Actually, just about any element in the html character sheet will be unpredictable if you aren't explicit in your styling...which is likely lending to some of the layout struggles (some elements are going to longer than expected, "pushing" everything to the right (and wrapping below), or shorter, causing the opposite reaction. Also, in my experience, to keep everything nicely on a page with not left/right scrolling, the typical width is around 810px (I think Brian has mentioned 840px, so it may also depend on how much padding and spacing and margins you have going on). I mention that, because a <td> tag that's 500px is already more than half of your available character sheet width. <button type='roll' value='/roll (@{control} - 1)d6 + 1d6! + @{controlpip}' > Control</button> Your button needs a name.  If you look above, Diana P gave an example of what the <button> should look like. <div style="float:left;"> Another <div> inside the same <td> tag...I really feel this where a lot of your formatting issues are coming from. <input type="number" name="attr_control" min="0" value="0"/>D +<input type="number" name="attr_controlpip" min="0" max="2" value="0"/> </div> <fieldset> This fieldset is not going to work, because it is missing all the necessary information.   This part of the wiki will show you how to format a repeating section...the fieldset needs a class... <select class ="sheet-select" name="attr_CONTROL_select" value="0" style="width:250px"> <option value="0"> </option> <option value="ABSORB DISSIPATE ENERGY">ABSORB DISSIPATE ENERGY</option> <option value="ACCELERATE HEALING">ACCELERATE HEALING</option> <option value="CONCENTRATION">CONCENTARTION</option> <option value="CONTORT ESCAPE">CONTORT ESCAPE</option> <option value="CONTROL DISEASE">CONTROL DISEASE</option> <option value="CONTROL PAIN">CONTROL PAIN</option> <option value="DETOXIFY POISON">DETOXIFY POISON</option> <option value="EMPTINESS">EMPTINESS</option> <option value="ENHANCE ATTRIBUTE">ENHANCE ATTRIBUTE</option> <option value="FORCE OF WILL">FORE OF WILL</option> <option value="HIBERNATION TRANCE">HIBERNATION TRANCE</option> <option value="INSTINCTIVE ASTROGATION">INSTINCTIVE ASTROGATION</option> <option value="RAGE">RAGE</option> <option value="REDUCE INJURY">REDUCE INJURY</option> <option value="REMAIN CONSCIOUS">REMAIN CONSCIOUS</option> <option value="REMOVE FATIGUE">REMOVE FATIGUE</option> <option value="RESIST STUN">RESIST STUN</option> <option value="SHORT TERM MEMORY ENHANCEMENT">SHORT TERM MEMORY ENHANCMENT</option> <option value="Adrenaline Adjustment ">Adrenaline Adjustment</option> <option value="ANGER">ANGER</option> <option value="BLAKCNESS">BLACKNESS</option> <option value="BURST OF SPEED">BURST OF SPEED</option> <option value="CALCULATE">CALCULATE</option> <option value="CALM">CALM</option> <option value="CHANNEL ENERGY">CHANNEL ENERGY</option> <option value="CHANNEL RAGE">CHANNEL RAGE</option> <option value="CLOAKOF DARKNESS">CLOAKOF DARKNESS</option> <option value="COGNITIVE TRANCE">COGNITIVE TRANCE</option> <option value="COMBAT TRANCE">COMBAT TRANCE</option> <option value="THE DRAGON">THE DRAGON</option> <option value="ENHANCED SPEED">ENHANCED SPEED</option> <option value="FORCE CHARGED STRIKE">FORCE CHARGED STRIKE</option> <option value="HANDS OF THE JHEMADAN">HANDS OF THE JHEMADAN</option> <option value="HEAL">HEAL</option> <option value="IMITATE">IMITATE</option> <option value="PALL OF THE DARKSIDE">PALL OF THE DARKSIDE</option> <option value="PERCEPTIVE TRANCE">PERCEPTIVE TRANCE</option> <option value="REGENERATE">REGENERATE</option> <option value="REPEL FORCE LIGHTNING">REPEL FORCE LIGHTNING</option> <option value="RESIST FORCE">RESIST FORCE</option> <option value="SUPER LEAP">SUPER LEAP</option> <option value="UP THE WALLS">UP THE WALLS</option> <option value="WISDOM">WISDOM</option> </select> <input type="number" name="attr_control1" min="0" value="0"/>D +<input type="number" name="attr_controlpip1" min="0" max="2" value="0"/> <button style="float:left;" type='roll' value='/roll (@{attr_control1} - 1)d6 + 1d6! + @{attr_controlpip1}' ></button> button is missing a name. </fieldset> </div> </div> </td> </tr> At a quick glance those are the things I'm seeing. A couple other things that will help... When pasting your code into the forum post, it's best to click the paragraph icon in the upper right corner of the box your typing in, and select "code". That will make the code easier to read within the forum. As Coal Powered Puppet said, if you can take a screenshot of what your character sheet looks like, wand what it should look like, that will also make it easier for us (and by "us" I mean CPP and myself in particular, as CPP mentions others may be able to without that) to help.

G V. said: Just wondering what you are trying to accomplish with the <div> inside a <td> tag? Not saying it can't be done, but I'm not understanding what you're trying to accomplish.  I use <div>s to create tables without the the <table>,<tr>, and <td> tags. Also, a <div> without a class, or css styling will be unpredictable in terms of layout. Actually, just about any element in the html character sheet will be unpredictable if you aren't explicit in your styling...which is likely lending to some of the layout struggles (some elements are going to longer than expected, "pushing" everything to the right (and wrapping below), or shorter, causing the opposite reaction. Omitting a style or class attribute is always predictable. All elements have some default style set by the browser (which is 99% identical across browsers), and Roll20 has some styling that it applies to things before our character sheet CSS (eg, default widths on input fields, a margin-bottom on select, etc.) A div (the "document division" element) with no specified styles is simply a block-level element. It will fill the width of its parent and its height will be the height of its combined children.

LOL—I knew I wasn't being clear, but was too lazy (and rushed) to correct it. I should have said, "unpredictable to me..." I have no idea what the default styles will look like, so it's I never know until I use it and see that's screwed up. Which brings me to a question... A div (the "document division" element) with no specified styles is simply a block-level element . It will fill the width of its parent and its height will be the height of its combined children. Ok, the bold is mine, but when you say that, does that mean the if there are things before the <div> with block-level styling, the <div> will "line break" to be under that stuff? Because, it is not "inline"?   <div> <button type='roll' value='/roll (@{control} - 1)d6 + 1d6! + @{controlpip}' > Control</button> <div style="float:left;"> <input type="number" name="attr_control" min="0" value="0"/>D  +<input type="number" name="attr_controlpip" min="0" max="2" value="0"/> </div> <fieldset stuff> </fieldset> </div> So, given the above, the button would be on top, then a sort of line break (because the default <div> is block), and under the button (because it's in the div) would be the input field+input field, then a sort of line break (because the <div> is closed, and thus the block element is closed), and the fieldset stuff under the input field. Did I get that correct?

"what you are trying to accomplish with the inside a tag?" actually most of that isnt my fault.. icopied and pasted from the  GitHub web site.. soo this is the coding they use in games, the opre generated char sheet

This is what my sheet looks like when i open up in abrowser.. Full of roll errors.

as well i saw this code froma friend of mine.. and tried tounderstand hat was going on.. for i like the idea of tab selection,  but its really messy,  and it certainly doesnt come out right in the custom sheet..  no as needed but would like it :)

Diana P said: Rolls look something like:  <button type="roll" name="attr_checkname" title='checkname' value=" *****some roll in here***** " ></button> If you have problems with some particular code, post it and we can look at it and try to find what's wrong. tried entering it, but im not sure if it gets the info from a dice box,  not sure what the value should be, how to set it up from the info takin fron the input

<!-- turns out messy, can be put into 1 line--> <th><label>Weapons</label></th>             <fieldset class="repeating_weapons">             <b><label>Weapon<input class="sheet-smalltext sheet-shorttext" name="attr_age" style="width:155px" type="text"></label></b>                 DMG<input type="number" name="attr_DAMAGE" class="sheet-smallnumber" min="1" value="3" style="width:50px"/>D          +<input type="number" name="attr_DAMAGEpip" class="sheet-smallnumber" min="0" max="2" value="0" style="width:50px"/>           <button type='roll' style="float:left;" class="astext" value='/roll [[(@{DAMAGE} - 1)d6]] + [[1d6! + @{DAMAGEpip}]]' ></button>                              <b><label>RANGE<input class="sheet-smalltext sheet-shorttext" name="attr_age" style="width:155px" type="text">          <input class="sheet-smalltext sheet-shorttext" name="attr_RANGE" style="width:155px" type="text">          <input class="sheet-smalltext sheet-shorttext" name="attr_RANGE" style="width:155px" type="text">          </label></b></fieldset><br><br>

<!-- almost have what i want here, just need to move one button to the right of the control to the new select feature--> <th><label>Force Skills</label></th>                     <!--<tr>-->                         <td style="width:800px;">                             <!--<div class="sheet-bold">-->                                 <button class="sheet-forcebutton" type='roll' class="astext" value='/roll (@{control} - 1)d6 + 1d6! + @{controlpip}' > Control</button>                                 <!--<div style="float:left;">-->                                     <input type="number" name="attr_control" class="sheet-smallnumber"  min="0" value="0"/>D                                     +<input type="number" name="attr_controlpip" class="sheet-smallnumber" min="0" max="2" value="0"/>                                 <!--</div>-->                                 <fieldset class="repeating_CONTROLskills">                                                                <select class ="sheet-select" name="attr_CONTROL_select" value="0" style="width:250px">                                     <option value="0"> </option>                                     <option value="ABSORB DISSIPATE ENERGY">ABSORB DISSIPATE ENERGY</option>                                     <option value="ACCELERATE HEALING">ACCELERATE HEALING</option>                                     <option value="CONCENTRATION">CONCENTARTION</option> </select>                                                          <button type="roll" name="attr_checkname" title='secondcontrol' class="sheet-forcebutton" style="float:left;"  class="astext" value='/roll (@{attr_control1} - 1)d6 + 1d6! + @{attr_control1pip1}' ></button>                                                                    <input type="number" name="attr_control1" class="sheet-smallnumber"  min="0" value="0"/>D                                     +<input type="number" name="attr_control1pip1" class="sheet-smallnumber" min="0" max="2" value="0"/>                                 <!-- try out stuuff-->                                                                  <select class ="sheet-select" name="attr_CONTROL_select" value="0" style="width:250px">                                     <option value="0"> </option>                                     <option value="ABSORB DISSIPATE ENERGY">ABSORB DISSIPATE ENERGY</option>                                     <option value="ACCELERATE HEALING">ACCELERATE HEALING</option>                                     <option value="CONCENTRATION">CONCENTARTION</option> </select>                                                   <button type="roll" name="attr_checkname" title='secondcontrol' class="sheet-forcebutton" style="float:left;"  class="astext" value='/roll (@{attr_control1} - 1)d6 + 1d6! + @{attr_control1pip1}' ></button>                                                                    <input type="number" name="attr_control1" class="sheet-smallnumber"  min="0" value="0"/>D                                     +<input type="number" name="attr_control1pip1" class="sheet-smallnumber" min="0" max="2" value="0"/>                                                             </fieldset>                                                              <!--</div>                             </div>-->                         </td>

ooo another question... is there a way i could state what is being rolled when the button is hit.  for isntance... button<dexterity> thats a roll it give just numbers,  where as i would like it to show that Dexterity is being rolled instead of just a numbered roll. thanks

ok what ever i did made it the way i want.. for both sense and alter.. but not control.. the control buttons are side by side instead of to the right of the first control..

ok ran into a spot.. i had 2 selections in control  and when one was filled the other got filled up with it

found an error when using the button info No attribute was found for @{Eesrek Eeghiiwu|RESISTENERGYpip} <!-- Resists Energy, roll and D and Pips-->     <button type="roll" name="attr_checkname" title='checkname' value="/roll [[(@{RESISTENERGY} - 1)d6]] + [[1d6! + @{RESISTENERGYpip}]]" >Resist Energy</button>         <!--<button type='roll' style="float:left;" class="astext" value='/roll [[(@{RESISTENERGY} - 1)d6]] + [[1d6! + @{RESISTENERGYpip}]]' >RESIST ENERGY</button>-->                               <input type="number" name="attr_RESISTENERGY" class="sheet-smallnumber" min="1" value="3" style="width:50px"/>D          +<input type="number" name="attr_RESIST ENERGYpip" class="sheet-smallnumber" min="0" max="2" value="0" style="width:50px"/>           <br><BR><!-- Resists Physical roll and D and Pips-->

well i figured out my fromating issues.. looks GREAT..  now i nee dto fix my "roll" the dice functions.. as well i am wanting to put in the following ---- when someone selects a race then i want that races special ablities to show upin the special abilities section.

kk i think i figured it out..the button that is.. my next question is this... i want to be able to select from adrop down menu and have that selection fill up special abilities.... as well.. is there anyway to mode the character sheet so it shows who is rolling and what they area rolling.. as well i would like to know how to do tabs... whenever the roll20 checks the html it screws up the other character sheet

curtis w. said: kk i think i figured it out..the button that is.. my next question is this... What was the button fix? I have a similar issue on my custom sheet.

G V. said: LOL—I knew I wasn't being clear, but was too lazy (and rushed) to correct it. I should have said, "unpredictable to me..." I have no idea what the default styles will look like, so it's I never know until I use it and see that's screwed up. Which brings me to a question... A div (the "document division" element) with no specified styles is simply a block-level element . It will fill the width of its parent and its height will be the height of its combined children. Ok, the bold is mine, but when you say that, does that mean the if there are things before the <div> with block-level styling, the <div> will "line break" to be under that stuff? Because, it is not "inline"?   <div> <button type='roll' value='/roll (@{control} - 1)d6 + 1d6! + @{controlpip}' > Control</button> <div style="float:left;"> <input type="number" name="attr_control" min="0" value="0"/>D  +<input type="number" name="attr_controlpip" min="0" max="2" value="0"/> </div> <fieldset stuff> </fieldset> </div> So, given the above, the button would be on top, then a sort of line break (because the default <div> is block), and under the button (because it's in the div) would be the input field+input field, then a sort of line break (because the <div> is closed, and thus the block element is closed), and the fieldset stuff under the input field. Did I get that correct? No, because float:left removes the element from the normal page flow. If you removed the style attribute from that div, you would be correct.

Erik L. said: curtis w. said: kk i think i figured it out..the button that is.. my next question is this... What was the button fix? I have a similar issue on my custom sheet. had to make sure that the names were calling.. for example the name is called without the ATTR_ abreviation, as i used anothers idea for rolling, need the title and name and where the @ are take the input without the attr.  hope this helps <button type="roll" name="attr_CHECKNAME" title="checkname" value="/roll (@{RESISTENERGY} - 1)d6 + 1d6! + @{RESISTENERGYpip}" >Resist Energy</button>         <!--<button type='roll' style="float:left;" class="astext" value='/roll [[(@{RESISTENERGY} - 1)d6]] + [[1d6! + @{RESISTENERGYpip}]]' >RESIST ENERGY</button>-->                               <input type="number" name="attr_RESISTENERGY" class="sheet-smallnumber" min="1" value="2" style="width:50px"/>D          +<input type="number" name="attr_RESISTENERGYpip" class="sheet-smallnumber" min="0" max="2" value="0" style="width:50px"/>         

Brian said: G V. said: LOL—I knew I wasn't being clear, but was too lazy (and rushed) to correct it. I should have said, "unpredictable to me..." I have no idea what the default styles will look like, so it's I never know until I use it and see that's screwed up. Which brings me to a question... A div (the "document division" element) with no specified styles is simply a block-level element . It will fill the width of its parent and its height will be the height of its combined children. Ok, the bold is mine, but when you say that, does that mean the if there are things before the <div> with block-level styling, the <div> will "line break" to be under that stuff? Because, it is not "inline"?   <div> <button type='roll' value='/roll (@{control} - 1)d6 + 1d6! + @{controlpip}' > Control</button> <div style="float:left;"> <input type="number" name="attr_control" min="0" value="0"/>D  +<input type="number" name="attr_controlpip" min="0" max="2" value="0"/> </div> <fieldset stuff> </fieldset> </div> So, given the above, the button would be on top, then a sort of line break (because the default <div> is block), and under the button (because it's in the div) would be the input field+input field, then a sort of line break (because the <div> is closed, and thus the block element is closed), and the fieldset stuff under the input field. Did I get that correct? No, because float:left removes the element from the normal page flow. If you removed the style attribute from that div, you would be correct. ya i removed the <div> completely and went with <table> s</table>

question with code.. i have a select menu, but i lose the ability to enter straight text into the area.. what do i do <table>             <tr>                 <td class="sheet-tdborder" style="width:800px;">                     <!--<div class="sheet-bold">-->                         <button type='roll'value="/roll (@{dexterity} - 1)d6 + 1d6! + @{dexteritypip} @{charactername}'s DEX ROLL" >Dexterity</button>                         <!--<div style="float:right;">-->                             <input type="number" name="attr_dexterity" class="sheet-smallnumber" min="1" value="3"/>D                             +<input type="number" name="attr_dexteritypip" class="sheet-smallnumber" min="0" max="2" value="0"/>                         <!--</div>                     </div>-->                     <fieldset class="repeating_dexskills">                         <button  name="dexspec" type="roll" value="/r (@{dexskilldice} - 1)d6 + 1d6! + @{dexskillpip} @{charactername}'s @{dexterity_select} ROLL:"></button>                           <!--<input class="sheet-skilltext" type="text" name="attr_dexskillname"/>-->                           <select class ="sheet-select" name="attr_dexterity_select" value="0" style="width:200px">                                     <option type="text" value="0"> </option>                                                                                  <option value="Blasters">BLASTER</option>                                     <option value="S-Blaster pistol">Spec-Blaster Pistol</option>                                     <option value="S-Blaster heavy pistol">Spec-Heavy Blaster Pistol</option>                                     <option value="S-Blaster rifle">Spec-Blaster rifle</option>                                     <option value="S-Blaster Hold Out">Spec-Hold out Blaster</option>                                     <option value="S-Blaster Repeating">Spec-Repeating Blaster</option>                                             <option value="Archaic Guns">ARCHAIC GUNS</option>                                     <option value="S-Black Powder Pistol">Spec-Black powder pistol</option>                                     <option value="S-musket">Spec-Musket</option> </select>                           <!--<div class="sheet-right">-->                           <input type="number" name="attr_dexskilldice" class="sheet-smallnumber sheet-shortnumber" min="1" value="3"/>D                           +<input type="number" name="attr_dexskillpip" class="sheet-smallnumber sheet-shortnumber" min="0" max="2" value="0"/>                           <!--</div>-->                     </fieldset>                 </td>

well i have been solving my coding issues.. but i still would like the help 1- when using a select (menu) function how do i code in being able to enter ones own option like a text box.. for isntance i wana make alist of species, but whnei do that i cannot seem to enter my own species from the page like a text. 2- as well with species i would like to select a species and have the special abities textarea filled with that species info 3- im using teh defualt template and would like to change simple thinsg liek background and what not.

curtis w. said: 1- when using a select (menu) function how do i code in being able to enter ones own option like a text box.. for isntance i wana make alist of species, but whnei do that i cannot seem to enter my own species from the page like a text. This is not possible with the tools available for Roll20 character sheets.

quick coding question--The way its set up they are all belowe eachother.. how can i make them  side by side <b><label>WEAPONS</label></b>                 <!--<u><b><label>WEAPON 1</label></u><br><br>-->                 <table>                 <fieldset class="repeating_wpntype">                                  <label>Type                 <select class ="sheet-select" name="attr_wpn_select" value="0" style="width:290px">                                     <option value="0"> </option>                                     <option value="1">Assault Cannons</option>                                     <option value="2">Light Laser Cannon</option>                                     <option value="3">Laser Cannon</option>                                     <option value="4">Heavy Laser Cannon</option>                                     <option value="5">Double Heavy Laser Cannon</option>                                     <option value="6">Light Blaster</option>                                     <option value="7">Triple Blaster</option>                                     <option value="8">Blaster Cannon</option>                                     <option value="9">Heavy Blaster Cannon</option>                                     <option value="10">Light Ion Cannon</option>                                     <option value="11">Ion Cannon</option>                                     <option value="12">Heavy Ion Cannon</option>                                     <option value="13">Concussion Missile Launcher</option>                                     <option value="14">Proton Torpedo Launcher</option>                                     <option value="15">Warhead Launcher</option>                                     <option value="16">Light Tractor Beam</option>                                     <option value="17">Tractor Beam</option>                                     <option value="18">Heavy Tarctor Beam</option>                                     <option value="19">CSW-Laser Cannon</option>                                     <option value="20">CSW-Heavy Laser Cannon</option>                                     <option value="21">CSW-Light TurboLaser</option>                                     <option value="22">CSW-Heavy TurboLaser</option>                                     <option value="23">CSW-Double TurboLaser</option>                                     <option value="24">CSW-TurboLaser Battery</option>                                     <option value="25">CSW-Heavy TurboLaser Battery</option>                                     <option value="26">CSW-Light Ion Cannon</option>                                     <option value="27">CSW-Ion Cannon</option>                                     <option value="28">CSW-Heavy Ion Cannon</option>                                     <option value="29">CSW-Proton Torpedo Tube</option>                                     <option value="30">CSW-Concussion Missile Tube</option>                                     <option value="31">CSW-Light Tractor Beam</option>                                     <option value="32">CSW-Tractor Beam</option>                                     <option value="33">CSW-Heavy Tractor Beam</option>                                     <option value="34">CSW-Gravity Well Projector</option>                                     </select></label>                                                                                        <label>Weapon System<select class ="sheet-select" name="attr_WS_select" value="0" style="width:100px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Fire-Linked</option>                                     </select>                                     <select class ="sheet-select" name="attr_WS1_select" value="0" style="width:100px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Fire-linked</option>                                     </select></label>                                                                                    <table>                                                   <label>Amount<input type="number" name="attr_quant1" class="sheet-smallnumber" min="0" value="3" style="width:50px"/></label>                                                   <label>Fire Arc                                              <select class ="sheet-select" name="attr_FA_select" value="0" style="width:70px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Front</option>                                     <option value="2">Rear</option>                                     <option value="2">Right</option>                                     <option value="2">Left</option>                                                                          </select></label>                                                                          <label>Amount<input type="number" name="attr_quant2" class="sheet-smallnumber" min="0" value="3" style="width:50px"/></label>                                          <label>Fire Arc                                          <select class ="sheet-select" name="attr_fa2_select" value="0" style="width:70px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Front</option>                                     <option value="2">Rear</option>                                     <option value="2">Right</option>                                     <option value="2">Left</option>                                                                          </select></label>                                                                  <label>Amount<input type="number" name="attr_quant3" class="sheet-smallnumber" min="0" value="3" style="width:50px"/></label>                                  <label>Fire Arc                 <select class ="sheet-select" name="attr_fa3" value="0" style="width:70px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Front</option>                                     <option value="2">Rear</option>                                     <option value="2">Right</option>                                     <option value="2">Left</option>                                                                          </select></label>                                                                               <label>Amount<input type="number" name="attr_quant4" class="sheet-smallnumber" min="0" value="3" style="width:50px"/></label>                                  <label>Fire Arc                 <select class ="sheet-select" name="attr_fa4select" value="0" style="width:70px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Front</option>                                     <option value="2">Rear</option>                                     <option value="2">Right</option>                                     <option value="2">Left</option>                                                                          </select></label>                                                                          </fieldset>                                                                                                                                                              <label>Skill<select class ="sheet-select" name="attr_Wpnskill_select" value="0" style="width:170px">                                     <option value="0"> </option>                                     <option value="1">Starship Gunnery</option>                                     <option value="2">Capital Ship Gunnery</option>                                                                          </select></label>                         <button type='roll' style="float:right;" class="astext" value='/roll [[(@{FIREC} - 1)d6]] + [[1d6! + @{FIREC}]]' >FIRE CONTROL</button>                             <input type="number" name="attr_fcc1" class="sheet-smallnumber" min="0" value="3" style="width:50px"/>D                             +<input type="number" name="attr_fcc1pip" class="sheet-smallnumber" min="0" max="2" value="0" style="width:50px"/>                             <!--<input type="Text" name="attr_DEXTERITYpip" class="sheet-smallnumber" value="0" style="width:50px"/>-->                                                                         <label>Space Range<input class="sheet-smalltext sheet-shorttext" name="attr_Sapce" style="width:80px" type="text">                     <input class="sheet-smalltext sheet-shorttext" name="attr_space" style="width:80px" type="text">                     <input class="sheet-smalltext sheet-shorttext" name="attr_space1" style="width:80px" type="text">                                     </select></label>                                  <label>Atmosphere Range<input class="sheet-smalltext sheet-shorttext" name="attr_atmos" style="width:80px" type="text">                     <input class="sheet-smalltext sheet-shorttext" name="attr_ar1" style="width:80px" type="text">                     <input class="sheet-smalltext sheet-shorttext" name="attr_ar2" style="width:80px" type="text">                                     </select></label>                                          <button type="roll" style="float:right;" class="astext" value="/roll [[(@{DAMAGE} - 1)d6]] + [[1d6! + @{DAMAGE}]]" >DAMAGE</button>                             <input type="number" name="attr_ssdmg" class="sheet-smallnumber" min="0" value="3" style="width:50px"/>D                             +<input type="number" name="attr_ssdmgpip" class="sheet-smallnumber" min="0" max="2" value="0" style="width:50px"/>                          </fieldset></table>

It might help if you used <table> correctly. Invalid HTML makes the browser try to guess your meaning, which it's rarely good at and no two browsers are going to guess the same thing for the same bad code, generally. <table> permits the following elements, in order: Zero or one <caption> Zero or more <colgroup> Zero or one <thead> Either: One <tfoot> Either: Zero or more <tbody> Or: One or more <tr> Or: Either: Zero or more <tbody> Or: One or more <tr> Zero or one <tfoot> <colgroup> contains either nothing (with the span attribute) or zero or more <col> (without the span attribute). <thead>, <tfoot>, and <tbody> contain zero or more <tr>. <tr> contains zero or more <th> and/or <td>. You have <table><fieldset>...</fieldset></table>, which is an error. (You've also got two closing </fieldset> with only one opening <fieldset>.)

curtis w. said: well i have been solving my coding issues.. but i still would like the help 2- as well with species i would like to select a species and have the special abities textarea filled with that species info The only way I'd know to do this would be with multiple textareas (one for each of the different species).  You'd have to get tricky and use a combination of select menus and checkboxes, and each textarea would have to have a unique name. To do this you'd do something like: HTML: <select class ="sheet-select" name="attr_species" style="width:250px;"> <option value="1">Human</option> <option value="2">Android</option> <option value="3">Wampa</option> </select> <!-- More HTML stuff --> <input class="sheet-species1" type="checkbox" name="attr_species" value="1" style="display: none;"> <input class="sheet-species2" type="checkbox" name="attr_species" value="2" style="display: none;"> <input class="sheet-species3" type="checkbox" name="attr_species" value="3" style="display: none;"> <textarea class="sheet-spec1" name="attr_specialAbilities1">ability1, ability2</textarea> <textarea class="sheet-spec2" name="attr_specialAbilities2">ability1, ability2</textarea> <textarea class="sheet-spec3" name="attr_specialAbilities3">ability1, ability2</textarea> CSS: /*hide the textareas*/ .sheet-spec1, .sheet-spec2, .sheet-spec3{ display: none; } /*show the proper text area based on selection*/ .sheet-species1:checked ~ .sheet-spec1, .sheet-species2:checked ~ .sheet-spec2, .sheet-species3:checked ~ .sheet-spec3{ display: inline-block; } That hides each text area by default and then when one race selected, the appropriate checkbox also becomes checked, and then appropriate textarea becomes visible. I think that should work, if it doesn't then there's a slightly different variant where all the checkboxes have the same class, but the CSS is a little trickier, so I'd try that first.  If that doesn't work, then we can try something different.

curtis w. said: as well i would like to know how to do tabs... whenever the roll20 checks the html it screws up the other character sheet Here's what I use: 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="Edges & Hindrances" />  <span class="sheet-tab sheet-tab2" style='line-height: 20px;'>EDGES & HINDRANCES</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="Equipment" />  <span class="sheet-tab sheet-tab4" style='line-height: 40px;'>EQUIPMENT</span> <input type="checkbox" class="sheet-hideArcanum" name="attr_ArcanumTab" style="width: 15px; display: none;"> <input type="radio" class="sheet-tab sheet-tab5" name="attr_core-tab" value="5" title="Arcanum" />  <span class="sheet-tab sheet-tab5" style='line-height: 40px;'>ARCANUM</span> <input type="radio" class="sheet-tab sheet-tab6" name="attr_core-tab" value="6" title="Journal" />  <span class="sheet-tab sheet-tab6" style='line-height: 40px;'>JOURNAL</span> <input type="radio" class="sheet-tab sheet-tab99" name="attr_core-tab" value="99" title="All" /> <span class="sheet-tab sheet-tab99" style='line-height: 40px;'>ALL</span> <!-- End Tab setup --> <div class="sheet-section-core"><!-- Core Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-edges"><!-- Edges Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-skills"><!-- Skills Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-gear"><!-- gear Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-arcanum"><!-- arcanum Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-journal"><!-- Journal Tab --> <!-- Stuff on the tab --> </div> </div> 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-core, .charsheet input.sheet-tab2:checked ~ div.sheet-section-edges, .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-arcanum, .charsheet input.sheet-tab6:checked ~ div.sheet-section-journal { display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { 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, .charsheet input.sheet-tab99:checked + span.sheet-tab99 {          background: #2c424e;     color: #bfc4c6; border-radius: 4px; } /*----------- End Tab Setup -----------*/ I tried to show what the CSS is doing in relation to the html, but take a look and let us know what questions you have.

G V. said: curtis w. said: as well i would like to know how to do tabs... whenever the roll20 checks the html it screws up the other character sheet Here's what I use: 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="Edges & Hindrances" />  <span class="sheet-tab sheet-tab2" style='line-height: 20px;'>EDGES & HINDRANCES</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="Equipment" />  <span class="sheet-tab sheet-tab4" style='line-height: 40px;'>EQUIPMENT</span> <input type="checkbox" class="sheet-hideArcanum" name="attr_ArcanumTab" style="width: 15px; display: none;"> <input type="radio" class="sheet-tab sheet-tab5" name="attr_core-tab" value="5" title="Arcanum" />  <span class="sheet-tab sheet-tab5" style='line-height: 40px;'>ARCANUM</span> <input type="radio" class="sheet-tab sheet-tab6" name="attr_core-tab" value="6" title="Journal" />  <span class="sheet-tab sheet-tab6" style='line-height: 40px;'>JOURNAL</span> <input type="radio" class="sheet-tab sheet-tab99" name="attr_core-tab" value="99" title="All" /> <span class="sheet-tab sheet-tab99" style='line-height: 40px;'>ALL</span> <!-- End Tab setup --> <div class="sheet-section-core"><!-- Core Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-edges"><!-- Edges Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-skills"><!-- Skills Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-gear"><!-- gear Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-arcanum"><!-- arcanum Tab --> <!-- Stuff on the tab --> </div> <div class="sheet-section-journal"><!-- Journal Tab --> <!-- Stuff on the tab --> </div> </div> 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-core, .charsheet input.sheet-tab2:checked ~ div.sheet-section-edges, .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-arcanum, .charsheet input.sheet-tab6:checked ~ div.sheet-section-journal { display: block; } .charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { 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, .charsheet input.sheet-tab99:checked + span.sheet-tab99 {          background: #2c424e;     color: #bfc4c6; border-radius: 4px; } /*----------- End Tab Setup -----------*/ I tried to show what the CSS is doing in relation to the html, but take a look and let us know what questions you have. ok using ur tabs.. but when i goto my  ship sheet , when its ended it will show the continuation of the first tab or info tab as the case may be

ok i also added the ship to the tab structure and it doesnt show up on its tab..

You're going to need to show the code.  It sounds like you may have some <div>s out of place and if you haven't modified the CSS to accommodate the new Ships piece, that will also cause a problem.

ok problem...  at the start my ship sheet showed, but when i added my character info to the tab it totaly hides the ship sheet and other tabs.. rather what is supposed to be in the tabs.. ill keep messing aorund with it, but help is awsome

i tried to paste the code put it came out as an error.. guess i tried sending all my code.. any othe suggestions ill check over the code and hopefully it doesnt mess things up too bad

well i figured somthing out.. i got rid of all the divs in the middle and kept the only beginning and ending on.. well almost all of them..  but the tabs are working again... just need to redo the fromating so it looks pretty..

G V. said: curtis w. said: well i have been solving my coding issues.. but i still would like the help 2- as well with species i would like to select a species and have the special abities textarea filled with that species info The only way I'd know to do this would be with multiple textareas (one for each of the different species).  You'd have to get tricky and use a combination of select menus and checkboxes, and each textarea would have to have a unique name. To do this you'd do something like: HTML: <select class ="sheet-select" name="attr_species" style="width:250px;"> <option value="1">Human</option> <option value="2">Android</option> <option value="3">Wampa</option> </select> <!-- More HTML stuff --> <input class="sheet-species1" type="checkbox" name="attr_species" value="1" style="display: none;"> <input class="sheet-species2" type="checkbox" name="attr_species" value="2" style="display: none;"> <input class="sheet-species3" type="checkbox" name="attr_species" value="3" style="display: none;"> <textarea class="sheet-spec1" name="attr_specialAbilities1">ability1, ability2</textarea> <textarea class="sheet-spec2" name="attr_specialAbilities2">ability1, ability2</textarea> <textarea class="sheet-spec3" name="attr_specialAbilities3">ability1, ability2</textarea> CSS: /*hide the textareas*/ .sheet-spec1, .sheet-spec2, .sheet-spec3{ display: none; } /*show the proper text area based on selection*/ .sheet-species1:checked ~ .sheet-spec1, .sheet-species2:checked ~ .sheet-spec2, .sheet-species3:checked ~ .sheet-spec3{ display: inline-block; } That hides each text area by default and then when one race selected, the appropriate checkbox also becomes checked, and then appropriate textarea becomes visible. I think that should work, if it doesn't then there's a slightly different variant where all the checkboxes have the same class, but the CSS is a little trickier, so I'd try that first.  If that doesn't work, then we can try something different. OK  this is my next step in making my ultimate star wars d6 sheet..  and once it ois all finished i would like to upload my file for all to use.

ok gothca.. and it works for the first three. i tried adding in a 4th and it didnt work fully.. how do i go by adding more

had to check my css  thats where the porblem was

question again..  can i load up a picture of the specific race.. or do i leave it to the "Edit" tab within the game

curtis w. said: question again..  can i load up a picture of the specific race.. or do i leave it to the "Edit" tab within the game There is no way to upload a picture into the custom character sheet you are coding—it would have to remain in the Edit screen.

Thanks for all ur help  the caharcter sheet is looking GREAT

ok its simple formatting that i cant remeber... i want to be able to place them side by side eachother instead o f vertical listings  here is some of the code <b><label>WEAPONS</label></b>                 <u><label>WEAPON 1</label></u>                                  <fieldset class="repeating_wpntype">                 <label>Type                 <select class ="sheet-select" name="attr_wpn_select" value="0" style="width:290px">                                     <option value="0"> </option>                                     <option value="1">Assault Cannons</option>                                     <option value="2">Light Laser Cannon</option>                                     <option value="3">Laser Cannon</option>                                     <option value="4">Heavy Laser Cannon</option>                                     <option value="5">Double Heavy Laser Cannon</option>                                     <option value="6">Light Blaster</option>                                     <option value="7">Triple Blaster</option>                                     <option value="8">Blaster Cannon</option>                                     <option value="9">Heavy Blaster Cannon</option>                                     <option value="10">Light Ion Cannon</option>                                     <option value="11">Ion Cannon</option>                                     <option value="12">Heavy Ion Cannon</option>                                     <option value="13">Concussion Missile Launcher</option>                                     <option value="14">Proton Torpedo Launcher</option>                                     <option value="15">Warhead Launcher</option>                                     <option value="16">Light Tractor Beam</option>                                     <option value="17">Tractor Beam</option>                                     <option value="18">Heavy Tarctor Beam</option>                                     <option value="19">CSW-Laser Cannon</option>                                     <option value="20">CSW-Heavy Laser Cannon</option>                                     <option value="21">CSW-Light TurboLaser</option>                                     <option value="22">CSW-Heavy TurboLaser</option>                                     <option value="23">CSW-Double TurboLaser</option>                                     <option value="24">CSW-TurboLaser Battery</option>                                     <option value="25">CSW-Heavy TurboLaser Battery</option>                                     <option value="26">CSW-Light Ion Cannon</option>                                     <option value="27">CSW-Ion Cannon</option>                                     <option value="28">CSW-Heavy Ion Cannon</option>                                     <option value="29">CSW-Proton Torpedo Tube</option>                                     <option value="30">CSW-Concussion Missile Tube</option>                                     <option value="31">CSW-Light Tractor Beam</option>                                     <option value="32">CSW-Tractor Beam</option>                                     <option value="33">CSW-Heavy Tractor Beam</option>                                     <option value="34">CSW-Gravity Well Projector</option>                                     </select></label>                                                                                        <!--<label>-->Weapon System<select class ="sheet-select" name="attr_WS_select" value="0" style="width:100px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Fire-Linked</option>                                     </select>                                     <select class ="sheet-select" name="attr_WS1_select" value="0" style="width:100px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Fire-linked</option>                                     </select><!--</label>-->                                                                                    <table>                                                   <label>Amount<input type="number" name="attr_quant1" class="sheet-smallnumber" min="0" value="3" style="width:50px"/></label>                                                   <label>Fire Arc                                              <select class ="sheet-select" name="attr_FA_select" value="0" style="width:70px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Front</option>                                     <option value="2">Rear</option>                                     <option value="2">Right</option>                                     <option value="2">Left</option>                                                                          </select></label>                                                                          <label>Amount<input type="number" name="attr_quant2" class="sheet-smallnumber" min="0" value="3" style="width:50px"/></label>                                          <label>Fire Arc                                          <select class ="sheet-select" name="attr_fa2_select" value="0" style="width:70px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Front</option>                                     <option value="2">Rear</option>                                     <option value="2">Right</option>                                     <option value="2">Left</option>                                                                          </select></label>                                                                  <label>Amount<input type="number" name="attr_quant3" class="sheet-smallnumber" min="0" value="3" style="width:50px"/></label>                                  <label>Fire Arc                 <select class ="sheet-select" name="attr_fa3" value="0" style="width:70px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Front</option>                                     <option value="2">Rear</option>                                     <option value="2">Right</option>                                     <option value="2">Left</option>                                                                          </select></label>                                                                               <label>Amount<input type="number" name="attr_quant4" class="sheet-smallnumber" min="0" value="3" style="width:50px"/></label>                                  <label>Fire Arc                 <select class ="sheet-select" name="attr_fa4select" value="0" style="width:70px">                                     <option value="0"> </option>                                     <option value="1">Turret</option>                                     <option value="2">Front</option>                                     <option value="2">Rear</option>                                     <option value="2">Right</option>                                     <option value="2">Left</option>                                                                          </select></label>                                                                          </fieldset>

I know i ahev asked this question before, but considering the amazing help i have had, maybe an answer could be found..  below is some code.. all options there, but i need to have player input in the field icase i didnt put in an option myself..  thanks <fieldset class="repeating_dexskills">                         <button  name="dexspec" type="roll" value="&{template:default} {{name=@{charactername}'s @{dexterity_select} Roll }} {{[[(@{dexskilldice} - 1)d6 + 1d6! + @{dexskillpip}]]}}"></button>                           <!--<input class="sheet-skilltext" type="text" name="attr_dexskillname"/>-->                           <select class ="sheet-select" name="attr_dexterity_select" value="0" style="width:200px">                                                                                                                <option value="0"> </option>                                                                                  <option value="Blasters">BLASTER</option>                                     <option value="S-Blaster pistol">Spec-Blaster Pistol</option>                                     <option value="S-Blaster heavy pistol">Spec-Heavy Blaster Pistol</option>                                     <option value="S-Blaster rifle">Spec-Blaster rifle</option>                                     <option value="S-Blaster Hold Out">Spec-Hold out Blaster</option>                                     <option value="S-Blaster Repeating">Spec-Repeating Blaster</option>                                             <option value="Archaic Guns">ARCHAIC GUNS</option>                                     <option value="S-Black Powder Pistol">Spec-Black powder pistol</option>                                     <option value="S-musket">Spec-Musket</option>                                             <option value="Blaster Artillery">BLASTER ARTILLERY</option>                                     <option value="S-Anti-Infantry">Spec-Anti-Infantry</option>                                     <option value="S-Anti-Vehicle">Spec-Anti-Vehicle</option>                                     <option value="S-Surface to air">Spec-Surface to air</option>                                     <option value="S-Surafce to space">Spec-surface to space</option>                                     <option value="S-Surafce to Surface">Spec-surface to suraface</option>                                             <option value="BOWCASTER">BOWCASTER</option>                                             <option value="BOWS">BOWS</option>                                     <option value="S-Long bow">Spec-Long Bow</option>                                     <option value="S-XBow">Spec-X-Bow</option>                                             <option value="BRAWLING PARRY">BRAWLING PARRY</option>                                     <option value="S-VS Martial Arts">Spec-vs Martial arts</option>                                     <option value="S-VS Boxing">Spec-VS Boxing</option>                                             <option value="DODGE">DODGE</option>                                     <option value="S-VS energy">Spec-VS Energy</option>                                     <option value="S-VS missile weapons">Spec-VS missile weapons</option>                                             <option value="FIREARMS">FIREARMS</option>                                     <option value="S-Verpine Shatter Gun">Spec-Verpine Shatter Gun</option>                                     <option value="S-Machine Guns">Spec-Machine Guns</option>                                     <option value="S-Rifles">Spec-Rifles</option>                                     <option value="S-Sniper Rifles">Spec-Sniper Rifles</option>                                             <option value="GRENADE">GRENADES</option>                                     <option value="S-Thermal Detonators">Spec-Thermal Detonators</option>                                             <option value="Lightsabers">LIGHTSABERS</option>                                     <option value="S-Base Lightsabers">Spec-Base Lightsabers</option>                                     <option value="s-Duel Lightsabers">Spec-Duel Lightsabers</option>                                     <option value="s-Lightstaff">Spec-Lightstaff</option>                                     <option value="s-Great LS">Spec-Great LS</option>                                     <option value="s-Duel Phase LS">Spec-Duel Phase LS</option>                                             <option value="Melee Combat">MELEE COMBAT</option>                                     <option value="S-Vibroblades">Spec-VibroBlades</option>                                     <option value="S-Knife">Spec-Knife</option>                                             <option value="MELEE PARRY">MELEE PARRY</option>                                     <option value="S-vs Lightsabers">Spec-vs Lightsabers</option>                                     <option value="S-vs knives">Spec-VS Knives</option>                                             <option value="MISSILE WEAPONS">MISSILE WEAPONS</option>                                     <option value="S-Concusion missile">Spec-Concusion Missile</option>                                     <option value="S-Grenade launcher">Spec-Grenade Launcher</option>                                             <option value="PICKPOCKET">PICKPOCKET</option>                                             <option value="RUNNING">RUNNING</option>                                             <option value="VEHICLE BLASTERS">VEHICLE BLASTERS</option>                                     <option value="S-Heavy Blaster Cannon">Spec-Heavy Blaster Cannon</option>                                     <option value="S-Heavy Laser Cannon">Spec-Heavy Laser Cannon</option>                                     <option value="S-Light Blaster Cannon">Spec-Light Blaster Cannon</option>                                     <option value="S-Light Laser Cannon">Spec-Light Laser Cannon</option>                                     <option value="S-Heavy Blaster Cannon">Spec-Heavy Blaster Cannon</option>                                     <option value="S-Medium Blaster Cannon">Spec-Medium Blaster Cannon</option>                                             <option value="DANCING">DANCING</option>                                             <option value="THROWN WEAPONS">THROWN WEAPONS</option>                                     <option value="S-Knife">Spec-Knife</option>                                                                                                                          </select>                           <!--<div class="sheet-right">-->                           <input type="number" name="attr_dexskilldice" class="sheet-smallnumber sheet-shortnumber" min="1" value="3"/>D                           +<input type="number" name="attr_dexskillpip" class="sheet-smallnumber sheet-shortnumber" min="0" max="2" value="0"/>                           <!--</div>-->                     </fieldset>                 </td>

here is a scree shot.. i would liek to put them all side by side and then if needed a new section with more side by side..  basic foramtting eludes me