Alinhando Formulario com CSS

[Freisleben 0]

Ola Pessoal

 

Como eu poderia alinhar melhor esse formulario?

 

Gostaria de alguns campos ficasse um do lado do outro.

Exemplo abaixo, porem gostaria que os input também ficasse alinhados.Como poderia fazer isso?

 

 

Obrigado

[Eliseu M. 2]

Fácil: com tabela. Crie quatro colunas, duas para os textos e outras duas para os INPUTs. E, na linha do botão enviar, acrescente um botão reset e coloque <td colspan="4">os inputs aqui</td>

Ah, não esqueça de definir widths. Vou fazer aqui e já te mando.

[Thiago Retondar 18]

Fácil: com tabela. Crie quatro colunas, duas para os textos e outras duas para os INPUTs. E, na linha do botão enviar, acrescente um botão reset e coloque <td colspan="4">os inputs aqui</td>

Ah, não esqueça de definir widths. Vou fazer aqui e já te mando.

 

http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif Tabelas? http://forum.imasters.com.br/public/style_emoticons/default/dormindo.gif http://forum.imasters.com.br/public/style_emoticons/default/dormindo.gif http://forum.imasters.com.br/public/style_emoticons/default/dormindo.gif

 

Olhem esses tópicos:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Formulários na web: Experiência Rica

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Formulários

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Eliseu M. 2]

É, nem tinha me lembrado disso, mas o display: table; ainda não é compatível com todos navegadores. Mas ta aí, boa dica. Té mais!

[Freisleben 0]

To tentando fazer só com CSS, sem usar tabelas. Mais to vendo que não tem outra solução se não usar tabelas para alinhar esse formulario!!

 

Não queria usar tabelas!

 

Olha só meu codigos

HTML

<form id="cadastroLoja" method="post" action="teste.html">

<fieldset>

<label class="txtRazao">Razão Social: <input name="campoRazao" type="text" class="txtrazao" class="txtRazao" /> </label>

<label class="txtCnpj">CNPJ: <input name="campoCnpj" type="text" class="txtCnpj" /> </label>

<label>Endereço: <input name="campoEnd" type="text" class="txtEnd" /> </label>

<label>Numero: <input name="campoNum" type="text" class="txtNum" /> </label>

<label class="complemento">Complemento: <input name="campoCompl" type="text" /> </label>

<label>Bairro: <input name="campoBairro" type="text" /> </label>

<label class="Cep">CEP: <input name="campoCep" type="text" /> </label>

<label class="txtEstado">Estado: <input name="campoEstado" type="text" /> </label>

<label class="Cidade">Cidade:  <input name="campoCidade" type="text" /> </label>

<label>Telefone: <input name="campoTel" type="text" class="txtTel" /> </label>

<label>Celular: <input name="campoCelular" type="text" class="txtTel" /> </label>

<label>Fax: <input name="campoFax" type="text" /> </label>

<label>Email: <input name="campoEmail" type="text" class="txtEmail" /> </label>

<label class="Site">Site: <input name="campoSite" type="text" class="txtSite" /> </label>

<label> <input class="submit" type="submit" value="Enviar" />  </label>

</form>

</fieldset>

CSS

 

fieldset{
 width: 582px;
 padding: 10px;
}

label {
 font: 13px Arial, Verdana, sans-serif;
 margin: 6px;
 border: 1px solid red;
 display: block;
 float: left;
}

input {
  font: 13px Arial, Verdana, sans-serif;
  border: 1px solid gray;
}
.error{
	font: 9px Arial, Verdana, sans-serif;
	color: #FF0000;
	border: 1px solid black;
	}

.txtrazao {width: 250px;}
.txtEnd {width: 250px;}
.txtNum {width: 50px;}
.txtTel {width: 100px;}
.txtEmail {width: 250px;}
.txtSite {width: 250px;}
.txtEstado {}
.Cidade {padding: 0 50px 0 0;}
.Cep {padding: 0 250px 0 0;}
.Site {padding: 0 50px 0 0;}

[Thiago Retondar 18]

Não rodei teu código, mas já vi um erro de fechamento da tag form e fieldset. Estão ao contrário.

 

Para facilitar em algumas coisa, você pode usar span.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Eliseu M. 2]

Esse form aí tbm precisa duma organização melhor... que bordas vermelhas são essas aí? Olha um exemplo que eu montei rapidin:

 

<style type="text/css">
body {font:13px segoe ui;}
#label {width:100px; height:25px; float:left; padding-top:8px;}
#form input {margin:6px;}
#right {display: block; position: absolute; top: 6px; left:280px;}
</style>
<form action="" name="" method="" id="form">
<span id="label">Razão Social: </span>
<input type="text" name="name"><br>
<span id="label">Endereço: </span>
<input type="text" name="name"><br>
<span id="label">Complemento: </span>
<input type="text" name="name"><br>
<span id="label">CEP: </span>
<input type="text" name="name"><br>
<span id="label">Estado: </span>
<input type="text" name="name"><br>
<span id="label">Telefone: </span>
<input type="text" name="name"><br>
<span id="label">Fax: </span>
<input type="text" name="name"><br>
<span id="right">
<span id="label">CPNJ: </span>
<input type="text" name="name"><br>
<span id="label">Número: </span>
<input type="text" name="name"><br>
<span id="label">Bairro: </span>
<input type="text" name="name"><br>
<span id="label">Cidade: </span>
<input type="text" name="name"><br>
<span id="label">Site: </span>
<input type="text" name="name"><br>
<span id="label">Celular: </span>
<input type="text" name="name"><br>
<span id="label">E-mail: </span>
<input type="text" name="name"><br>
</span>
<input type="submit"> <input type="reset">
</form>

 

Se for usá-lo, cuidado com a posição, alinhe a DIV #right com os atributos ali em cima no CSS. Até mais!