Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wilherme

Layout diferente nos navegadores

Por , em Desenvolvimento frontend

Recommended Posts

Wilherme    0

Wilherme
Postado

Bom dia,

 

Gostaria de saber como posso fazer para ter o mesmo layout em navegadores diferentes.

 

No Chrome esta certo:

 

 

Contato-Google.jpg

 

No IE:

 

 

Contato-IE.jpg

 

No mozila:

 

 

Contato-Firefox.jpg

 

Qual a melhor forma de fazer para que posso deixar um padrão para os navegadores?

Compartilhar este post

Link para o post
Compartilhar em outros sites

zcommand    7

zcommand
Postado

esse é um problema realmente muito chato e que apresenta com uma certa frequência nos nossos projetos, o motivo é q os browser não interpretam os pixels da mesma forma. Mas como vc pode arrumar isso? geralmente fazemos o uso de hacks, mas c vc poder postar o código facilitará na orientação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wilherme    0

Wilherme
Postado 
<script> <!--***validar formulario***-->
			function validar(formulario){
				if(formulario.nome.value == ''){
					alert("O campo NOME é obrigatório.");
					return false;
				}
				if(formulario.email.value == ''){
					alert("O campo EMAIL é obrigatório.");
					return false;
				}
				if(formulario.email.value.indexOf(('@' && '.'),0)== -1){
					alert("EMAIL invalido.");
					return false;
				}
				if(formulario.assunto1.value == ''){
					alert("O campo ASSUNTO é obrigatório.");
					return false;
				}
				if(formulario.mensagem.value == ''){
					alert("O campo MENSAGEM é obrigatório.");
					return false;
				}
				if(formulario.mensagem.value.length < 10){
					alert("A MENSAGEM está muito curta.");
					return false;
				}
				return true;
			}
		</script> <!--***fim validar formulario***-->
	<div><font face="Trebuchet MS">
	<center>Para se comunicar conosco, basta preencher os dados logo abaixo, ou<br>
se preferir pode enviar um email para contato@aguinea.com.br</center>
<br><br>
</div>
<body>
<div style='margin:0px; margin-left:200px;'>
		<form id="formulario" name="contato" method="post" onsubmit="return validar(this);" action="enviar.php">
	<table>
			<tr>
			<td><label>Nome: </label></td>
			<td><input type="text" name="nome" size="51" /><small>*</small><br class="clear" /></td>
			</tr>
			
			<tr>
			<td><label>Telefone: </label></td>
			<td><input type="text" name="telefone" size="51" /><br class="clear" /></td>
			</tr>
			
			<tr>
			<td><label>Email: </label></td>
			<td><input type="text" name="email" size="51" /><small>*</small><br class="clear" /></td>
			</tr>
			
			<tr>
			<td><label>Assunto: </label></td>
			<td><input type="text" name="assunto" size="51" /><small>*</small><br class="clear" /></td>
			</tr>
			</table>
			<tr>
			<td><label>Mensagem:</label><textarea name="mensagem" cols="40" rows="7" ></textarea><small>*</small><br class="clear" /></td>
			<span>(<small>*</small>) Campos são obrigatórios.</span><br class="clear" />
			<td><input type="submit" class="botao" name="enviar" value="Enviar" /></td>
			<td><input type="reset" class="botao" name="limpar" value="Limpar" /><br class="clear" /></td>
			</tr>
			</form>
		</div>
	</body>

 

Estou com algumas dificuldades nessa fase de aprendizado e essa é uma duvida que há dias venho pensando como resolver

Compartilhar este post

Link para o post
Compartilhar em outros sites

zcommand    7

zcommand
Postado

Não utilize tabelas, vivem dando problemas, pq não essa a finalidade delas. uma pergunta pq tem uma DIV antes do body? na questão do layout vc consegue um efeito bem melhor só com css, posicionando os divs e label.

Compartilhar este post

Link para o post
Compartilhar em outros sites

zcommand    7

zcommand
Postado

Wilherme, vou dar um exemplo bem simples, só para vc ter uma ideia ok? o uso de tabelas para estruturar seu projeto nunca é recomendado. vou fazer de uma forma bem simples, mas vc vai pegar a ideia e conseguir adaptar conforme sua necessidade.

vou começar pelo HTML:

<div id="geral"><div id="formulario"><fieldset action="#"><label>Nome:</label><input type="text" /><label>E-mail:</label><input type="text" /><label>Assunto:</label><input type="text" /><label>Menssagem:</label><textarea></textarea></fieldset></div></div>
agora o css
* { margin:0; padding:0;}
body{ background:#FFF;}
#geral{ width:100%;}
#geral #formulario{ width:600px; margin:0 auto; position:relative;}
fieldset{height:400px; background:#f3f3f3; position:absolute; top:50px; display:table; }
label { padding:10px 10px; width:80px; float:left; clear:both;}
input { padding:5px 0;width:300px;float:right;}
textarea { padding:5px 0;width:300px;float:right; height:150px;}
vc não precisa seguir a risca o meu código, é so para vc ter uma base, pode verificar que o resultado será quase o mesmo q vc postou anteriormente, agora é so vc ajustar conforme deseje para ter o resultado pretendido.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito