alguem pode me dar uma força?

danielswater · Janeiro 6, 2009

Galera boa tarde.

Estou com um problema aqui que n consigo resolver de jeito nenhum.

Fiz um formulario que esta funcionando direitinho, o problema e que ele está todo desalinhado e eu n consigo deixa-lo alinhado de jeito nenhum.

Sera que alguem pode me dar uma força?? já tentei de tudo mas n deu, ja procurei em outros tópicos tbem mas n resolveu meu problema.

Segue o html do form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style4 {font-size: 11px}
.style5 {	font-family: Tahoma;
	color: #7eae8e;
}
.style8 {font-size: 11px; font-family: Tahoma; color: #7eae8e; }
.style9 {color: #000000}
.style1 {	font-family: Tahoma;
	font-size: 70%;
}
.style2 {	color: #7eae8e;
	font-weight: bold;
}
-->
</style>
</head>
<form method="post" enctype="multpart/formdata" name="form1" action="enviar.asp">
<body>
<span class="style1"><br />
<br />
<br />
Para entrar em contato conosco, preencha os campos abaixo ou ligue para <span class="style2">11 5505.5525</span></span><br />
<br />
<br />
<table width="90%" border="0" cellspacing="5" cellpadding="5">
  <tr>
	<td width="92%"><span class="style4"><span class="style5"><span class="style9">Nome:</span><font face="Arial, Helvetica, sans-serif" size="2"><font face="Arial, Helvetica, sans-serif" size="2">
		  <input name="nomerem" type="text" style="border:1px solid green;" size="67" />
	</font></font></span></span></td>
	<td width="8%"> </td>
  </tr>
  <tr>
	<td width="92%"><span class="style8"><span class="style9">E-mail:</span><font face="Arial, Helvetica, sans-serif" size="2"><font face="Arial, Helvetica, sans-serif" size="2">
	  <input name="emailrem" type="text" style="border:1px solid green;" size="67" />
	</font></font></span></td>
	<td width="8%"> </td>
  </tr>
  <tr>
	<td width="92%"><span class="style8"><span class="style9">Telefone Comercial:</span><font face="Arial, Helvetica, sans-serif" size="2">
	  <input name="telefone" type="text" id="telefone" style="border:1px solid green;" size="20" />
	  </font><span class="style9">Empresa:</span><font face="Arial, Helvetica, sans-serif" size="2">
		<input name="empresa" type="text" id="empresa" style="border:1px solid green;" size="24" />
	  </font></span></td>
	<td width="8%"> </td>
  </tr>
  <tr>
	<td width="92%"><span class="style8"><span class="style9">Mensagem:</span>
		  <textarea name="recado" cols="50" rows="5" style="border:1px solid green;"></textarea>
	</span></td>
	<td width="8%"> </td>
  </tr>
  <tr>
	<td colspan="2"><div align="center">
	  <input type="submit" name="Submit" value="Enviar" />
	  <input type="reset" name="reset" value="Limpar" />
	</div></td>
  </tr>
</table>
</body>
</html>

Espero que alguem possa me ajudar galera.

fico no aguardo

Abraço a todos

William Bruno · Janeiro 6, 2009

Aqui não usamos tabelas para estruturar layout.

Sugiro que você refaça esse formulário usando as tags de formulário: <fieldset><label>..

pode limitar o width com o proprio <form> mesmo.. e controlar tudo com CSS.

danielswater · Janeiro 6, 2009

Só complementando a minha dúvida.

No IE ele fica certinho, mas no firefox fica todo tordo

Conto com vcs galera

Abraço

William Bruno · Janeiro 6, 2009

Aqui no meu IE6 ficou torto tb... refiz em Tableless.. dá uma olhada:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
	border: none;
}
body {
	font-size: 11px; 
	font-family: Tahoma; 
	color: #000; 
}
#formContato {
	margin: 0 auto; /* caso quiser o formulário no centro horizontal */
	margin-top: 60px;
	width: 500px;
}
#formContato input,
#formContato textarea{
	border: 1px solid #000;
	padding: 1px;
	background-color: #fff;
}
#formContato fieldset label {
	margin-left: 5px;
	display: block;
	text-align: right;
	margin-bottom: 18px; /* espaçamento entre campos */ 
}
#formContato fieldset .mesmaLinha label {
	float: right;
}
#formContato legend.contato {
	margin-bottom: 50px;
	color: #000;
}
.contato strong { color: #7eae8e; font-weight: bold;}
-->
</style>
</head>

<body>


<form method="post" enctype="multpart/formdata" name="form1" action="enviar.asp" id="formContato">
	<fieldset>
	<legend class="contato">
		Para entrar em contato conosco, preencha os campos abaixo ou ligue para <strong>11 5505.5525</strong>
	</legend>

		<label>Nome: <input type="text" size="67" /></label>
		<label>E-mail: <input type="text" size="67" /></label>
		
	<fieldset class="mesmaLinha">
		<label>Empresa: <input type="text" size="27" /></label>   
		<label>Telefone Comercial: <input type="text" size="20" /></label>
	</fieldset>
	
		<label>Mensagem:  <textarea name="" rows="5" cols="50"></textarea></label>
		
	<fieldset class="mesmaLinha">
		<label><input type="button" value="Enviar" /></label>   
		<label><input type="button" value="Limpar" /></label>
	</fieldset>
	
	</fieldset>
</form>


</body>
</html>

Controlar posiconamentos por CSS é o melhor.. tem umas falhas na marcação do código que você postou... o <form> abre antes do body... e não fecha..

danielswater · Janeiro 6, 2009

No meu ficou torto no 7 esse seu exemplo willian, mas mesmo assim muito obrigado pela atençao

William Bruno · Janeiro 6, 2009

Estranho.. estou sem o IE7 aqui..

ficou certo IE6 e FF2.. posta uma imagem para eu dar uma olhada...

Tenta ser mais específico.. ficou torto oquê??

Notei uma falha agora ... altera isso aqui:

#formContato {
	margin: 0 auto; /* caso quiser o formulário no centro horizontal */
	margin-top: 60px;
	width: 520px;
}

O teu com tabelas, ficou totalmente desalinhado aqui no meu IE6, cada campo para um lado... começando e terminando em lugares diferentes.... por isso refiz em Tableless, que é o correto.

danielswater · Janeiro 6, 2009

OOOO Wilian deu certo cara...muito obrigado.

Agora me diz uma coisa, se eu quiser alinhar a esquerda?..como eu faço??

Abraço amigo e ate mais

danielswater · Janeiro 6, 2009

Melhor dizendo.

Eu preciso que os textos tambem fiquem alinhados entende? Pelo menos aqui no meu IE 7 e no firefox 3 estao desalinhados, ou seja a frase "Para entrar em contato conosco..." esta p um lado...o telefone p outro...

mas ta joia...ja ajuda bastante.

Mas se puder me ajudar a endireitar os textos tbem irei agradecer e muito

danielswater · Janeiro 6, 2009

Para mostrar direito eu dei um print p você poder dar uma olhada

Segue ai:

http://img392.imageshack.us/my.php?image=19644682tl8.jpg

Aprendiz CSS · Janeiro 7, 2009

coloque um

<br style="clear: both;" />

após o input do telefone comercial

abraço

danielswater · Janeiro 7, 2009

coloque um
<br style="clear: both;" />
após o input do telefone comercial

abraço

Aprendiz agradeço pela ajuda mas infelizmente nao deu certo, nao alinhou. Ou eu estou colocando no lugar errado?

Aonde exatamente coloco esse cod que você passou??

Abraço

Aprendiz CSS · Janeiro 7, 2009

tem link disso

danielswater · Janeiro 7, 2009

tem link disso

Oi Aprendiz

não entendi a sua resposta. Voce está me perguntando se eu tenho o link do formulario ou você está dizendo que existe link a respeito disso?

Aprendiz CSS · Janeiro 7, 2009

link para visualizar o formulario!

danielswater · Janeiro 7, 2009

A tem sim Aprendiz

Segue o link ai

http://www.duma.com.br/formulario1.html

Abraçao

Aprendiz CSS · Janeiro 7, 2009

remova o fieldset mesma linha

abraço

danielswater · Janeiro 7, 2009

remova o fieldset mesma linha

abraço

Puts amigo removi mas nao deu certo, ele foi todo para a esquerda...desalinhou ainda mais :(

William Bruno · Janeiro 7, 2009

Hum... tenta mudar isso aqui:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
	border: none;
}
body {
	font-size: 11px;
	font-family: Tahoma;
	color: #000;
}
#formContato {
	margin: 10px; /* caso quiser o formulário no centro horizontal */
	margin-top: 60px;
	width: 520px;
}
#formContato input,
#formContato textarea{
	border: 1px solid #000;
	padding: 1px;
	background-color: #fff;
}
#formContato fieldset label {
	margin-left: 5px;
	display: block;
	text-align: right;
	margin-bottom: 18px; /* espaçamento entre campos */
}

#formContato fieldset .mesmaLinha label {
	float: right;
}
#formContato legend.contato {
	margin-bottom: 50px;
	color: #000;
}
.contato strong { color: #7eae8e; font-weight: bold;}
#formContato fieldset label span {
	float: left;
	line-height: 22px;
}
-->
</style>
</head>

<body>


<form method="post" enctype="multpart/formdata" name="form1" action="enviar.asp" id="formContato">
	<fieldset>
	<legend class="contato">
		Para entrar em contato conosco, preencha os campos abaixo ou ligue para <strong>11 5505.5525</strong><br />
	</legend>

		<label><span>Nome: </span><input type="text" size="67" /></label>
		<label><span>E-mail: </span><input type="text" size="67" /></label>
		
	<fieldset class="mesmaLinha">
		<label>Empresa: <input type="text" size="27" /></label>  
		<label>Telefone Comercial: <input type="text" size="20" /></label>
	</fieldset>
	
		<label><span>Mensagem:  </span><textarea name="" rows="5" cols="50"></textarea></label>
		
	<fieldset class="mesmaLinha">
		<label><input type="button" value="Enviar" /></label>  
		<label><input type="button" value="Limpar" /></label>
	</fieldset>
	
	</fieldset>
</form>


</body>
</html>

Adicionei um span em cada texto de cada label.. para poder flutuar ele... esse alinhamento ?

Aprendiz CSS · Janeiro 7, 2009

aqui tem coisas desnecessarias

mas dê uma olhada e arrume o codigo

abraço

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
	border: none;
}
body {
	font-size: 11px;
	font-family: Tahoma;
	color: #000;
}
#formContato {
	margin: 10px; /* caso quiser o formulário no centro horizontal */
	margin-top: 60px;
	width: 600px;
}

#formContato input,
#formContato textarea{
	border: 1px solid #000;
	padding: 1px;
	background-color: #fff;
	width:350px;
}

#formContato input.botao {
	width: 100px;
	margin-top: 18px;
	margin-left: 103px;
}

#formContato fieldset label {
	float:left;
	display: block;
	margin-right:5px;
	text-align: right;
	margin-bottom: 18px; /* espaçamento entre campos */
	width:100px;
}
#formContato legend.contato {
	margin-bottom: 50px;
	color: #000;
}
.contato strong { color: #7eae8e; font-weight: bold;}
.clear{
clear: both;
}
-->
</style>
</head>

<body>


<form method="post" enctype="multpart/formdata" name="form1" action="enviar.asp" id="formContato">
	<fieldset>
		<legend class="contato">

			Para entrar em contato conosco, preencha os campos abaixo ou ligue para <strong>11 5505.5525</strong><br />
		</legend>

		<label>Nome: </label>
		<input type="text" size="67" />
		<br class="clear" />
		<label>E-mail: </label>
		<input type="text" size="67" />
		<br class="clear" />
		<label>Empresa: </label>
		<input type="text" size="27" />  
		<br class="clear" />
		<label>Telefone Comercial: </label>
		<input type="text" size="20" />
		<br class="clear" />
		<label>Mensagem:</label>
		<textarea name="" rows="5" cols="50"></textarea>
		<input type="button" class="botao" value="Enviar" />
		<input type="button" class="botao" value="Limpar" />
	</fieldset>
</form>

</body>
</html>

William Bruno · Janeiro 7, 2009

Estranho Aprendiz CSS... não me parece nem um pouco "semântico" usar br para estruturar um formulário.

E veja que pelo primeiro código dele, o telefone e a empresa ficam numa mesma linha...

Enfim, vamos esperar ele voltar... achei que fosse alinhar os textos à esquerda e os inputs à direita... como fiz no meu código acima do teu...variando automaticamente o espaço entre input e texto... acho que fiz da melhor forma "sem gambiarra".

Arquivado

alguem pode me dar uma força?

Recommended Posts

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

danielswater 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501