HTML - I can’t align a textarea, all other items are aligned

Asked

Viewed 840 times

2

HTML:

<body>
<table class="Cabecalho" width="100%">
    <tr>
        <th width="33%"><a href="Home.html">Home</a></th>
        <th width="33%"><a href="PaginaContato.html">Atendimento</a></th>
        <th width="33%"><a href="Empresas.html">Empresas Filiadas</a></a></th>
    </tr>
</table>
<br><br><br><br>
<div class="textored centro"><br>
    Empresa
    <br><br>
<select required>
    <option value="Intel">Intel</option>
    <option value="AMD">AMD</option>
    <option value="NVIDIA">NVIDIA</option>
    <option value="Oi">Oi</option>
    <option value="Vivo">Vivo</option>
    <option value="Tim">Tim</option>
    <option value="Claro">Claro</option>
    <option value="NET">NET</option>
</select><br><br>
    Assunto
    <br>
<select id="assunto" onchange="f(this)">
    <option value="info">Informações</option>
    <option value="elog">Elogio</option>
    <option value="recl">Reclamação</option>
    <option value="suge">Sugestão</option>
    <option value="outro">Outro</option>

</select><br><br>
<div id="mOutro" style="display:none"></div>
<textarea  rows="5" cols="40" id="tOutro" style="display: none;"></textarea><br id="pulaLinha" style="display:none">


    Digite sua mensagem <br><br>
<textarea required rows="10" cols="40"></textarea><br><br>

<button type="button" id="submit" onclick="botao()";">Enviar</button><br><br>

</div>
</body>

CSS:

  <style type="text/css">
        body {
            background-image: url("http://www.forhdwallpapers.com/wp-content/uploads/2015/08/technology-wallpapers-hd-and-technology-background-22.jpg");
        }

        .Cabecalho{
            background-color: rgba(0,0,0,0.5);
            border-style: dashed;
            text-align: match-parent;
            border-color: darkorange;
        }
        a:link {
            color: darkorange;
        }
        a:hover{
            color: orange;
        }
        a:visited{
            color: #ff5f1c;
        }

        .textored {
            color: white;
            background-color: rgba(0,0,0,0.5);

        }
        div {
            font-weight: bold;
        }
        .centro{
           text-align: center;
        }

    </style>

Javascript:

<script>
    function f(g){
        if(g.options[g.selectedIndex].value == 'outro'){
            document.getElementById('mOutro').style.display = 'block';
            document.getElementById('mOutro').innerHTML += "Especifique seu assunto <br><br>"
            document.getElementById('pulaLinha').style.display = 'block'
            document.getElementById('tOutro').style.display = 'block';
        }else{
            document.getElementById('mOutro').style.display = 'none';
            document.getElementById('mOutro').innerHTML = ""
            document.getElementById('pulaLinha').style.display = 'none'
            document.getElementById('tOutro').style.display = 'none';
        }
    }
    function botao(){
        document.getElementById('submit').onclick = location.href='PaginaFim.html';

    }
</script>

All the code is on the same page.

When the subject of the tag (ID: subject) is "other" a textarea will appear asking to specify the subject better, and that textarea (ID: tOther) is not aligned with the div.

I’ve tried using text-align: center; on the tag but it didn’t work and I’m out of ideas.

If you want to test to understand more easily what I’m saying:

https://repl.it/Hxbj

just put the subject as another to view.

javascript html css

1 answer

1


Add to your css the rule for id="tOutro"

#tOutro{margin: 0 auto;}

And you have a syntax error in the following line:

<th width="33%"><a href="Empresas.html">Empresas Filiadas</a></a></th>

Has an end tag </a> leftover...

  • Thank you, it worked perfectly!

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.