CSS+HTML Question

Hi, I have been working in a caracter sheet for the past couple of weeks and I am having some question with HTML+CSS (I am pretty new to HTML+CSS), so I have a couple a questions: 1) How do I reduce the space between a Label and an Input? (the red space down below) 2) I don't know if it's posibble, but is there a way to save the size of a TextArea change by the user? 3) I have been trying for the past days but don't seem able to do it, I have stats and I want to put them each inside a little label that I made. I don't know how to do it, I have them split in section (show bellow) and I made an individual DIV for each one but can seem to be able to achive what I want (show bellow). HTML: &lt;div class="main"&gt; &lt;!-- LOGO SECTION --&gt; &lt;div class="logo"&gt;&lt;/div&gt;&lt;div class="estadisticas-general"&gt; &nbsp;&nbsp;&nbsp; &lt;div class="estadistica"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="estadisticas-total"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_fuerza" value="0" title="@{fuerza}" readonly&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="estadisticas-nombre"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button name="roll_fuerza" type="roll" value="&amp;{template:default} {{name=Fuerza}} {{Resultado=[[(@{fuerza}d10!!+@{fuerza_flat})]]}}"&gt;Fuerza&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="estadisticas-base"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_fuerza_base" value="1" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="estadisticas-fijo"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_fuerza_fijo" value="0" readonly&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="attr_fuerza_talent" value="0" readonly&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="attr_fuerza_item" value="0" readonly&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="attr_fuerza_buff" value="0" readonly&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&lt;div class="estadistica"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="estadisticas-total"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_f2" value="0" title="@{f2}" readonly&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="estadisticas-nombre"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button name="roll_2" type="roll" value="&amp;{template:default} {{name=Fuerza}} {{Resultado=[[(@{fuerza}d10!!+@{fuerza_flat})]]}}"&gt;Destreza&lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="estadisticas-base"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_fuerza_base" value="1" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="estadisticas-fijo"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_f2_fijo" value="0" readonly&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="attr_f2_talent" value="0" readonly&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="attr_f2_item" value="0" readonly&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="attr_f2_buff" value="0" readonly&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; CSS+IMAGE div.sheet-estadisticas-general{ grid-area: stat; display: flex; justify-content:center; align-items: center; flex-flow: column; margin: 0px; padding-top: 0px; } div.sheet-estadisticas-total{ text-align: center; justify-content:center; align-items: center; font-size: 10px; background-image: url(<a href="https://i.imgur.com/cUv7dXx.png" rel="nofollow">https://i.imgur.com/cUv7dXx.png</a>); background-size: 50%; background-repeat: no-repeat; } div.sheet-estadisticas-nombre{ text-align: left; justify-content:left; align-items: left; font-size: 10px; background-image: url(<a href="https://i.imgur.com/evWyeCz.png" rel="nofollow">https://i.imgur.com/evWyeCz.png</a>); background-size: 50%; background-repeat: no-repeat; } div.sheet-estadisticas-base{ text-align: center; justify-content:center; align-items: center; font-size: 50px; background-image: url(<a href="https://i.imgur.com/bgcixrk.png" rel="nofollow">https://i.imgur.com/bgcixrk.png</a>); background-size: 50%; background-repeat: no-repeat; } What i Want:

Your first question seems to be missing the example.&nbsp; Your second question, the answer is No. You might be able to let the player set the size of the textarea but it won't remember sizing by handles.&nbsp; Your third question, I copied your code into a custom game and just wanted to double check if this is roughly what you see and I'm not missing any CSS.&nbsp;

Richard T. said: Your first question seems to be missing the example.&nbsp; Your second question, the answer is No. You might be able to let the player set the size of the textarea but it won't remember sizing by handles.&nbsp; Your third question, I copied your code into a custom game and just wanted to double check if this is roughly what you see and I'm not missing any CSS.&nbsp; Thank for the response. 1) The image for the first example was this: (No idea why it didn't send) 2) Ahh thank you for the info! 3) Yeap, that's exactly what I am seeing.

Ah okay, so not seeing the html for the label, I imagine you are using some kinda header tag, like an &lt;h2&gt; or something. They are "padded" by having their line heights set larger than the font-size. Though your image looks like it could be additional padding or margins so I would double check that with the browser debugger (F12 key) For example, &lt;h2&gt; have a font size of 24px but have a line height of 36px.&nbsp; So you can go from this: To this by setting the line-height property to match the font size or even smaller: Now, as far as your skill labels, you first step is needing to strip all the styling of inputs and buttons.&nbsp; .charsheet .sheet-estadisticas-general input, .sheet-estadisticas-general button { border: none; outline: none; box-shadow: none; background: none; } .charsheet .sheet-estadisticas-general button::before { content: '' !important; } That will get you to here: To get them into rows I threw in a quick: .sheet-estadistica { &nbsp; &nbsp; display: flex; } I also commented an odd line in your CSS that set the font-size to 50px. I imagine you are trying to fix your layout with it but I would definitely not do that, just use explicit Heights. Hopefully from here you can wiggle things to where you actually want them. A couple tips as you wiggle things... setting your background-size to 50% is probably not going to help you align all the elements here and using fewer images would help you. Setting a background on the button div for example would get you 99% there without having to worry about your background being sized right.&nbsp;

I just realized that you were probably using background-size to scale down your original images. This is incorrect, when you use percentages its percentage of the size of the container not the image. So if the button was 40px x 26px, a 50% background is 20px wide. What you need is an explicit value. For your situation, since you aren't sure how wide you need it you can set the height with something like&nbsp; background-size: auto 30px; The above is setting the X and Y (width and height) of the image to 'auto' and an explicit pixel height.&nbsp;

This is with setting the background sizes as above and setting the container's heights to 30px.&nbsp;

Thank you so much, I would have never realize that. Is there a way to strip the entire HTML of any not set styling? Richard T. said: This is with setting the background sizes as above and setting the container's heights to 30px.&nbsp; Ahh my apologies, I forgot to paste the htmnl code name section, it looks something like this: &lt;div class="col"&gt;&lt;label&gt;Nombre&lt;/label&gt;&lt;input class="name" type="text" name="attr_nombre" placeholder="Nombre Completo" /&gt;&lt;/div&gt; I tried something like this but it didn't work. This are the lines that I added to the code: .charsheet .sheet-estadisticas-general input, .sheet-estadisticas-general button .sheet-estadisticas-general label { border: none; outline: none; box-shadow: none; background: none; } .charsheet .sheet-estadisticas-general button::before { content: '' !important; } .sheet-estadistica { display: flex; } label.sheet-estadisticas-general{ line-height: 5px; }

I think you can do something like: * {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;all: unset; } That being said, Roll20 has their own baseline CSS which will apply on top of that but that will get you most of the way there.&nbsp; The code you posted is missing a comma between button and&nbsp; .sheet-estadisticas-general label .charsheet .sheet-estadisticas-general input, .sheet-estadisticas-general button, .sheet-estadisticas-general label { border: none; outline: none; box-shadow: none; background: none; } Though, when you said it doesn't work, do you mean its not applying to your label or anything? Because even with missing the comma it should've applied to your inputs.&nbsp;

Nvm!! I got it! I did it like this: * {&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;all: unset; } .sheet-estadisticas-general{ line-height: 5px; } And that made it work. And now I can set the space between lines properly, thank you so much. Another question: I was using percentages before because I saw a couple of sheets that when expanded they didnt..keep an "static form".. rather they adepted to the increase in space. How could I do that? (Sorry if the wording is wrong, english isn't my main language)

That's a broad question about flexible layouts. I think it suffices to say that there's a whole lecture behind that. I can start you off by pushing you to research Flexbox and CSS Grid. Those both control how things are laid out in a sheet and instructs the layout on what to do with extra space.&nbsp;

Ah gotcha, I though I already undestard how Flexbox and CSS Grid worked but I shoul do some more research. I have another HTML related question, I have a repeating fieldset which adds a value to a Stat or Ablitiy, it looks like this: &lt;label&gt;Buffs&lt;/label&gt; &lt;fieldset class="repeating_buffs"&gt; &lt;input type="text" name="attr_buff_nombre" placeholder="Nombre" &gt; &lt;div class="buff"&gt; &lt;select name="attr_buff_stat"&gt; &lt;option value="-" selected&gt;(Elegir)&lt;/option&gt; &lt;option value="acck_flat"&gt;Presición Fisica&lt;/option&gt; &lt;option value="dmgt"&gt;Daño Fisico&lt;/option&gt; &lt;option value="dmgk"&gt;Daño Magico&lt;/option&gt; &lt;/select&gt; &lt;div class="buff_bonus"&gt;&lt;/div&gt; &lt;input type="number" name="attr_buff_bonus" value="1"&gt; &lt;input type="checkbox" name="attr_buff_active" value="1" checked&gt; &lt;/div&gt; &lt;/fieldset&gt; It works, adds the bonus and everything and the Script works perfecly. But I would like to know if, instead adding a "flat" value (1,2,3) if it would be posible to instead add the value of a Stat (STR, DEX, CHA).

Probably not through html, you'd have to use sheetworkers to do that kind of calculation which is out of my comfort zone.&nbsp;

Richard T. said: Probably not through html, you'd have to use sheetworkers to do that kind of calculation which is out of my comfort zone.&nbsp; Ahh okok, thank you anyways for your help!