Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
tenho um formulario de contato, normal, nada fora do normal, tenho três inputs do tipo text um embaixo do outro, e gostaria que o textarea ficasse ao lado direito dos outros inputs, fiz isso usando o position: absolute, mas ai ocorreu um outro problema, minha validação ela fica oculta, mas quando o usuário clica em enviar o formulário e não estiver tudo ok mostra a mensagem do respectivo erro, e quando a mensagem aparece os inputs de texto descem normal mas o textarea fica no mesmo lugar, logicamente, e não consigo arrumar de nem um outro jeito.
meu css esta assim:
form {
font: 13px Verdana, Arial, Helvetica, sans-serif;
width: 747px;
}
fieldset {
background: #f5f5f5;
border: 1px solid #686868;
}
legend {
background: #686868;
color: #fff;
font-size: 15px;
font-weight: bold;
margin-left: 15px;
padding: 5px 10px;
text-transform: capitalize;
}
span {
display: block;
margin: 10px 15px;
width: 345px;
}
label {
color: #333;
display: block;
float: left;
text-transform: capitalize;
width: 345px;
}
input, textarea {
background: #fff;
border: 1px solid #686868;
color: #4a4a4a;
font: 13px Verdana, Arial, Helvetica, sans-serfi;
height: 30px;
padding: 0 5px;
width: 330px;
}
textarea {
height: 140px;
padding: 5px;
resize: none;
width: 314px;
}
.msn {
display: block;
width: 325px;
}
button {
background: #686868;
border: none;
color: #fff;
cursor: pointer;
font: 13px Verdana, Arial, Helvetica, sans-serfi;
margin: 10px 0 15px 15px;
padding: 5px 10px;
}
e meu xhtml assim:
<div id="status" style="background: #fd8383; color: #fff; display: none; margin: 0 0 10px 0; padding: 5px;"></div>
<form method="post" action="javascript:func()" id="formContato">
<fieldset>
<legend>informe seus dados</legend>
<span>
<label for="nome">nome</label>
<input type="text" name="formNome" id="formNome" />
</span>
<span>
<label for="email">email</label>
<input type="text" name="formEmail" id="formEmail" />
</span>
<span>
<label for="assunto">assunto</label>
<input type="text" name="formAssunto" id="formAssunto" />
</span>
<span class="msn">
<label for="mensagem">mensagem</label>
<textarea name="formMensagem" id="formMensagem"></textarea>
</span>
<button name="formEnviar" class="formContato">enviar</button>
</fieldset>
</form>Carregando comentários...