Dear, I am trying to create a character sheet and I ran into the following problems: 1 - what command to use to change the color of the text of a label? 2 - I am using a table to better organize the attributes but I am not able to align them correctly with equal spacing between each attribute. What is the correct way to align a label or input or button inside a table cell? 3 - I would like to put a curved border in the attributes table as it is in the species, profession, etc lists, I am using the same code (border-radius) but it is not working. How could I solve it? 4 - the top edge of the table does not appear completely, as if an element is covering it, is there any way to solve it? CSS /* Muda fundo da ficha .sheet-main{ background-color: black; } */ /* Cabeçalho*/ .sheet-label{ font-family:Aero; font-size: 10px; } .sheet-input{ width: 130px; font-family:Aero; font-size: 10px; border: 1px solid; border-radius: 0.5em; border-left: 1px; border-right: 1px; background-color: none; text-align:center; } .sheet-list{ text-align:center; width: 130px; font-family:Aero; font-size: 10px; border: 1px solid; border-radius: 0.5em; border-left: 1px; border-right: 1px; background-color: none; text-align:center; } .sheet-roll{ width:30px; border: 1px solid; border-bottom-left-radius: 0.5em; border-bottom-right-radius:0.5em; border-top-left-radius: 0.5em; border-top-right-radius:0.5em; border-left: 2px; border-right: 2px; } .sheet-label-nome{ position:relative; top:0px; left:120px; } .sheet-input-nome{ position:relative; top:-27px; left:100px; } .sheet-label-especie{ position:relative; top:-20px; left:0px; } .sheet-list-especie{ position:relative; top:-47px; left:100px; } .sheet-label-profissao{ position:relative; top:-50px; left:0px; } .sheet-list-profissao{ position:relative; top:-77px; left:100px; } .sheet-label-gravidade{ position:relative; top:-80px; left:0px; } .sheet-list-gravidade{ position:relative; top:-107px; left:100px; } .sheet-label-planeta-natal{ position:relative; top:0px; left:120px; } .sheet-input-planeta-natal{ position:relative; top:-27px; left:220px; } .sheet-label-escolaridade{ position:relative; top:-20px; left:120px; } .sheet-list-escolaridade{ position:relative; top:-47px; left:220px; } .sheet-label-idade{ position:relative; top:-50px; left:120px; } .sheet-input-idade{ position:relative; top:-77px; left:220px; width: 130px; } .sheet-label-pontos-acumulados{ position:relative; top:-70px; left:120px; } .sheet-input-pontos-acumulados{ position:relative; top:-97px; left:220px; width: 130px; } /* Fim Cabeçalho*/ /* Atributos*/ .sheet-tabela-atributo{ position:relative; width:100%; top:-90px; left:0px; border: 1px solid; border-radius: 5px; border-left:1px; border-right:1px; } .sheet-label-atributos{ position:relative; top:10px; left:345px; font-size:12px; } .sheet-label-presenca{ font-size:12px; position:relative; top:10px; } .sheet-label-vontade{ font-size:12px; position:relative; top:10px; left:3px; } .sheet-label-intuicao{ font-size:12px; position:relative; top:10px; left:5px; } .sheet-label-saude{ font-size:12px; position:relative; top:10px; left:12px; } .sheet-label-reflexo{ font-size:12px; position:relative; top:10px; left:5.5px; } .sheet-label-forca{ font-size:12px; position:relative; top:10px; left:15px; } /* fim Atributos*/ /*----Configuração do modelo de rolagem----*/ .sheet-rolltemplate-millenia table { width:100%; background-color:white; border:1px solid #000; border-spacing: 0; border-collapse: separate; border-radius: 5px; -moz-box-shadow: 2px 2px 5px #000; -webkit-box-shadow: 2px 2px 5px #000; box-shadow:2px 2px 5px #000; overflow: hidden; background: rgb(245,246,246); /* Old browsers */ background: -moz-linear-gradient(-45deg, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(215,216,224,1) 49%, rgba(230,231,239,1) 56%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(215,216,224,1)), color-stop(56%,rgba(230,231,239,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(215,216,224,1) 49%,rgba(230,231,239,1) 56%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(215,216,224,1) 49%,rgba(230,231,239,1) 56%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(215,216,224,1) 49%,rgba(230,231,239,1) 56%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */ background: linear-gradient(135deg, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(215,216,224,1) 49%,rgba(230,231,239,1) 56%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */ } .sheet-rolltemplate-millenia th { background: rgb(69,72,77); /* Old browsers */ background: -moz-linear-gradient(45deg, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ margin: 2px 25px 2px 25px; border: none; color:white; font-family: Arial; font-size:1em; text-align: center; padding: 3px 3px 3px 3px; border-spacing: 0; font-weight: bold; vertical-align: middle; } .sheet-rolltemplate-millenia td { padding:5px;line-height:1.4em; vertical-align: middle; padding: 0px 3px 0px 3px; border-spacing: 0; color: black; } .sheet-rolltemplate-millenia .sheet-cheque-prof{ font-weight: bold; } .sheet-rolltemplate-millenia .sheet-cheque-atrib{ font-weight: bold; } .sheet-rolltemplate-millenia .sheet-barra { font-weight: bold; } .sheet-rolltemplate-millenia .sheet-dif { font-weight: bold; font-family: Aero; } .sheet-rolltemplate-millenia .sheet-val-prof{ font-weight: bold; font-family: Aero; } .sheet-rolltemplate-millenia .sheet-val-atrib { font-weight: bold; font-family: Aero; } .sheet-rolltemplate-millenia .sheet-roll { font-weight: bold; font-family: Aero; } HTML <!-- Cabeçalho da Ficha--> <div> <div> <div> <!--First column--> <span><img src="<a href="http://i1109.photobucket.com/albums/h426/trodurizen/logo%20millenia_zps0oyyx8wk.png"></span" rel="nofollow">http://i1109.photobucket.com/albums/h426/trodurizen/logo%20millenia_zps0oyyx8wk.png"></span</a>> </div> <div> <!--Second column--> <span "sheet-label-nome"><label for="name">Nome:</label></span> <input type="text" name="attr_nome"/> <span><label for="especie">Espécie:</label></span> <select name="attr_especie"> <option value="" selected> </option> <option value="1">Homo sapiens</option> <option value="2">Homo Habilis</option> <option value="3">Homo Campestris</option> <option value="4">Homo Urbanus</option> <option value="5">Baikan</option> <option value="6">Guiratan</option> <option value="7">Hasjari</option> <option value="8">Kuiher</option> <option value="9">Luminari</option> <option value="10">Makwi</option> <option value="11">Nícteo</option> <option value="12">Pierbodi</option> </select> <span><label for="profissao">Profissão:</label></span> <select name="attr_profissao"> <option value="" selected> </option> <option value="1">Soldado terrestre</option> <option value="2">Soldado do espaço</option> <option value="3">Explorador</option> <option value="4">Mercador do espaço</option> <option value="5">Oficial da lei</option> <option value="6">Acadêmico</option> <option value="7">Agente especial</option> <option value="8">Profissional liberal</option> <option value="9">Criminoso</option> </select> <span><label for="gravidade">Gravidade:</label></span> <select name="attr_gravidade"> <option value="" selected> </option> <option value="1">G-Normal</option> <option value="2">Alta-G</option> <option value="3">Baixa-G</option> <option value="4">Zero-G</option> </select> </div> <div> <!-- Third column --> <span><label for="planeta-natal">Planeta Natal:</label></span> <input name="attr_planeta-natal"/> <span><label for="escolaridade">Escolaridade:</label></span> <select name="attr_escolaridade"> <option value="" selected> </option> <option value="1">Não especializado</option> <option value="1">Técnico</option> <option value="1">Superior</option> </select> <span><label for="idade">Idade:</label></span> <input type="number" name="attr_idade"/> <span><label for="pontos-acumulados">Pontos acumul:</label></span> <input type="number" name="attr_pontos-acumulados"/> </div> </div> </div> <!-- Fim do cabeçalho--> <!--Corpo da Ficha--> <table> <tr> <th> <span><label for="atributos">Atributos</label></span> </th> </tr> <tr> <td> <span><label for="forca">Força</label></span> </td> <td> <span><label for="reflexo">Reflexo</label></span> </td> <td> <span><label for="saude">Saúde</label></span> </td> <td> <span><label for="intuicao">Intuição</label></span> </td> <td> <span><label for="vontade">Vontade</label></span> </td> <td> <span><label for="presenca">Presença</label></span> </td> </tr> <tr> <td> <input type="number" value="" name="attr_forca" /> <button type="roll" value="&{template:millenia} {{pj=@{selected|character_name}}} {{dif=?{Escolha a dificuldade|Rotineira, [Rotineira] (1d6) | Fácil, [Fácil] (2d6) | Normal, [Normal] (3d6) | Difícil, [Difícil] (4d6) | Muito Difícil, [Muito Difícil] (5d6) | Quase impossível, [Quase impossível] (6d6) }}} {{atrib=Força}} {{nivel=@{selected|forca}}} {{roll=[[?{Escolha a dificuldade}]]}}" name="roll_forca"></button> </td> <td> <input type="number" value="" name="attr_reflexo" /> <button type="roll" value="&{template:millenia} {{pj=@{selected|character_name}}} {{dif=?{Escolha a dificuldade|Rotineira, [Rotineira] (1d6) | Fácil, [Fácil] (2d6) | Normal, [Normal] (3d6) | Difícil, [Difícil] (4d6) | Muito Difícil, [Muito Difícil] (5d6) | Quase impossível, [Quase impossível] (6d6) }}} {{atrib=Reflexo}} {{nivel=@{selected|reflexo}}} {{roll=[[?{Escolha a dificuldade}]]}}" name="roll_reflexo"></button> </td> <td> <input type="number" value="" name="attr_saude" /> <button type="roll" value="&{template:millenia} {{pj=@{selected|character_name}}} {{dif=?{Escolha a dificuldade|Rotineira, [Rotineira] (1d6) | Fácil, [Fácil] (2d6) | Normal, [Normal] (3d6) | Difícil, [Difícil] (4d6) | Muito Difícil, [Muito Difícil] (5d6) | Quase impossível, [Quase impossível] (6d6) }}} {{atrib=Saúde}} {{nivel=@{selected|saude}}} {{roll=[[?{Escolha a dificuldade}]]}}" name="roll_saude"></button> </td> <td> <input type="number" value="" name="attr_intuicao" /> <button type="roll" value="&{template:millenia} {{pj=@{selected|character_name}}} {{dif=?{Escolha a dificuldade|Rotineira, [Rotineira] (1d6) | Fácil, [Fácil] (2d6) | Normal, [Normal] (3d6) | Difícil, [Difícil] (4d6) | Muito Difícil, [Muito Difícil] (5d6) | Quase impossível, [Quase impossível] (6d6) }}} {{atrib=Intuição}} {{nivel=@{selected|intuicao}}} {{roll=[[?{Escolha a dificuldade}]]}}" name="roll_intuicao"></button> </td> <td> <input type="number" value="" name="attr_vontade" /> <button type="roll" value="&{template:millenia} {{pj=@{selected|character_name}}} {{dif=?{Escolha a dificuldade|Rotineira, [Rotineira] (1d6) | Fácil, [Fácil] (2d6) | Normal, [Normal] (3d6) | Difícil, [Difícil] (4d6) | Muito Difícil, [Muito Difícil] (5d6) | Quase impossível, [Quase impossível] (6d6) }}} {{atrib=Vontade}} {{nivel=@{selected|vontade}}} {{roll=[[?{Escolha a dificuldade}]]}}" name="roll_vontade"></button> </td> <td> <input type="number" value="" name="attr_presenca" /> <button type="roll" value="&{template:millenia} {{pj=@{selected|character_name}}} {{dif=?{Escolha a dificuldade|Rotineira, [Rotineira] (1d6) | Fácil, [Fácil] (2d6) | Normal, [Normal] (3d6) | Difícil, [Difícil] (4d6) | Muito Difícil, [Muito Difícil] (5d6) | Quase impossível, [Quase impossível] (6d6) }}} {{atrib=Presença}} {{nivel=@{selected|presenca}}} {{roll=[[?{Escolha a dificuldade}]]}}" name="roll_presenca"></button> </td> </tr> </table> <div> <div> <!-- First column --> </div> </div> <!-- Fim do corpo da ficha--> <!-- Rolltemplate--> <rolltemplate> <table> <tr><th colspan="3" align="center">{{pj}}</th></tr> {{#prof}} <tr><td colspan="3" class= "cheque-prof" align="center"><span>Cheque de {{prof}}</td></tr> <tr><td><span>Dificuldade </td> <td>| </td> <td>{{dif}}</td></tr> <tr><td><span>Proficiência </td> <td>| </td> <td>{{nivel}}</td></tr> {{/prof}} {{#atrib}} <tr><td colspan="3" class= "cheque-atrib" align="center"><span>Cheque de {{atrib}}</td></tr> <tr><td><span>Dificuldade </td> <td>| </td> <td>{{dif}}</td></tr> <tr><td><span>Atributo </td> <td>| </td> <td>{{nivel}}</td></tr> {{/atrib}} <tr><td><span>Resultado </td> <td>| </td> <td>{{roll}}</td></tr> </table> </rolltemplate> <!-- Fim do rolltemplate-->
