Alinhamento de DIV

Rapha Designer · Julho 7, 2009

Fala Galera. Sei que sou novo aqui no fórum, e talvez essa dúvida já tenha sido respondida, mas eu juro que procurei em todo o fórum e o que eu achei não me ajudou.

Estou com problemas para alinhar uma Div em relação a outra Div. Na verdade ela fica alinhada, mas é só mudar o tamanho da tela e a resolução que tudo fica uma bagunça.

O site é esse: www.sferagestao.com.br/contato

Esse é o código do site, no qual o DIV principal não fica alinhado no centro, e pior, se eu alinho o DIV principal no centro usando o <div align center>, o DIV secundário de nome FORMAIL fica desalinhado.

Se alguem puder ler e ver o que tem de errado, ficaria muito grato. Estou o dia todo tentando resolver o problema mas não consigo. Já tentei usar %, mas se diminuo a janela do browser, ele come uma parte do meu site. Tá complicado...

Segue o código:

//<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sfera</title>
<style type="text/css">
#contato {
	position:absolute;
	width:860px;
	z-index:1;
	}
#formail {
	position:absolute;
	width:200px;
	z-index:2;
	margin:auto;
	left: 184px;
	top: 392px;
}
body,td,th {
	font-size: 14px;
	color: #666;
	font-weight: bold;
}
</style>

</head>
<body>

<div align="center" id="contato"><img src="contato.jpg" width="860" height="912" border="0" align="absmiddle" usemap="#Map">
  <map name="Map">
	<area shape="rect" coords="20,8,278,103" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="29,137,70,150" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="118,135,151,150" href="http://www.sferagestao.com.br/sped.html" target="_self" alt="sped">
	<area shape="rect" coords="194,136,247,150" href="http://www.sferagestao.com.br/gestao.html" target="_self" alt="gestão">
	<area shape="rect" coords="283,137,342,150" href="http://www.sferagestao.com.br/sistemas.html" target="_self" alt="sistemas">
	<area shape="rect" coords="373,134,471,151" href="http://www.sferagestao.com.br/planejamento.html" target="_self" alt="planejamento">
	<area shape="rect" coords="510,135,536,149" href="http://www.sferagestao.com.br/bpo.html" target="_self" alt="BPO">
	<area shape="rect" coords="587,137,713,150" href="http://www.sferagestao.com.br/projetos.html" target="_self" alt="Projetos">
	<area shape="rect" coords="766,136,829,150" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="contato">
	<area shape="rect" coords="799,56,843,120" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="17,299,48,312" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="57,300,106,314" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="conato">
	<area shape="rect" coords="414,554,609,581" href="mailto:contato@sferagestao.com.br" alt="contato@sferagestao.com.br">
	<area shape="rect" coords="767,824,807,836" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="contato">
	<area shape="rect" coords="714,842,837,893" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="135,787,173,802" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
  </map>
</div>

<div id="formail"> <!-- Início Código -->
<form action="http://www.sferagestao.com.br/formail.php" method="POST">
  <p>Envie sua mensagem.</p>
  <p><font size="2" face="Verdana">Nome:<br>
	<input type="text" name="nome" size="24"><br>
	E-Mail:<br>
	<input type="text" name="email" size="24"><br><br>
	Mensagem:</font><br>
	<textarea name="mensagem" rows="6" cols="25"></textarea>
	<br>
	<input type="submit" name="Enviar" value="Enviar">
	<input type="reset" value="Limpar">
  </p>
</form>
<!-- Final Código --></div>

</body>
</html>//

Thiago Retondar · Julho 7, 2009

Pode atualizar o link?

Aqui está falhando.

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

§ÜP®ËM3 (Daniel/Nerd) · Julho 8, 2009

Aí vai o cod... espero que goste* pd modificar ele aos poucos:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sfera</title>
<style type="text/css">
#contato {
	position:absolute;
	width:860px;
	z-index:1;
	left: 75px;
	top: 5px;
	}
body,td,th {
	font-size: 14px;
	color: #666;
	font-weight: bold;
}
</style>

</head>
<body>

<div id="contato"><img src="contato.jpg" width="860" height="912" border="0" align="absmiddle" usemap="#Map">
  <map name="Map">
	<area shape="rect" coords="20,8,278,103" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="29,137,70,150" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="118,135,151,150" href="http://www.sferagestao.com.br/sped.html" target="_self" alt="sped">
	<area shape="rect" coords="194,136,247,150" href="http://www.sferagestao.com.br/gestao.html" target="_self" alt="gestão">
	<area shape="rect" coords="283,137,342,150" href="http://www.sferagestao.com.br/sistemas.html" target="_self" alt="sistemas">
	<area shape="rect" coords="373,134,471,151" href="http://www.sferagestao.com.br/planejamento.html" target="_self" alt="planejamento">
	<area shape="rect" coords="510,135,536,149" href="http://www.sferagestao.com.br/bpo.html" target="_self" alt="BPO">
	<area shape="rect" coords="587,137,713,150" href="http://www.sferagestao.com.br/projetos.html" target="_self" alt="Projetos">
	<area shape="rect" coords="766,136,829,150" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="contato">
	<area shape="rect" coords="799,56,843,120" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="17,299,48,312" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="57,300,106,314" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="conato">
	<area shape="rect" coords="414,554,609,581" href="mailto:contato@sferagestao.com.br" alt="contato@sferagestao.com.br">
	<area shape="rect" coords="767,824,807,836" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="contato">
	<area shape="rect" coords="714,842,837,893" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="135,787,173,802" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
  </map>
</div>

<BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR>

<!-- Início Código -->
<div align="center"><form action="http://www.sferagestao.com.br/formail.php" method="POST">
  <p>Envie sua mensagem.</p>
  <p><font size="2" face="Verdana">Nome:<br>
	<input type="text" name="nome" size="24"><br>
	E-Mail:<br>
	<input type="text" name="email" size="24"><br><br>
	Mensagem:</font><br>
	<textarea name="mensagem" rows="6" cols="25"></textarea>
	<br>
	<input type="submit" name="Enviar" value="Enviar">
	<input type="reset" value="Limpar">
  </p></div>
</form>
<!-- Final Código -->

</body></html>

Rapha Designer · Julho 8, 2009

Obrigado pessoal, vou testar aqui o seu código Daniel, vlw!

Thiago, o link está funcionando novamente, problema no provedor Locaweb, como sempre...

Depois posto aqui se der tudo certo.

Abs!

Rapha Designer · Julho 8, 2009

Não deu certo o código... :(

Caramba, juro por deus que não sei aonde está o erro, já tentei de tudo e nada dá certo. Só tem um único erro que está acabando com tudo, quando você clica em "Restaurar abaixo" no browser, ou se você dimensiona a janela do browser pra ficar com um tamanho menor, o que acontece é que come parte do formulário... creio que isso seja problema de alinhamento.e

O problema é: o DIV "formail" não está reconhecendo o DIV "contato" como Div Pai, mas pq? Tenho certeza que o formail está alinhando referente a tela, ou body, e não ao Div CONTATO.

Como faço pra resolver isso, acho que resolvendo isso tudo dará certo.

segue o córdigo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sfera</title>
<style type="text/css">
#contato {
	left:50%;
	margin-left:-430px;
	z-index:1;
	}
  #formail {
	position:relative;
	Position: relative; /* deixando o elemento com uma posição relativa à seu “pai” */
	Top: -530px; /* deixando o topo do elemento 50 pixels mais abaixo do seu “pai” */
	Left: 140px; /* deixando o elemento 50 pixels mais a direita do seu “pai” */
	width:200px;
	height:115px;
	z-index:2;
}
</style>

</head>
<body>
<div align="center" id="breve"><img src="contato.jpg" width="860" height="912" border="0" align="absmiddle" usemap="#Map">
  <map name="Map">
	<area shape="rect" coords="20,8,278,103" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="29,137,70,150" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="118,135,151,150" href="http://www.sferagestao.com.br/sped.html" target="_self" alt="sped">
	<area shape="rect" coords="194,136,247,150" href="http://www.sferagestao.com.br/gestao.html" target="_self" alt="gestão">
	<area shape="rect" coords="283,137,342,150" href="http://www.sferagestao.com.br/sistemas.html" target="_self" alt="sistemas">
	<area shape="rect" coords="373,134,471,151" href="http://www.sferagestao.com.br/planejamento.html" target="_self" alt="planejamento">
	<area shape="rect" coords="510,135,536,149" href="http://www.sferagestao.com.br/bpo.html" target="_self" alt="BPO">
	<area shape="rect" coords="587,137,713,150" href="http://www.sferagestao.com.br/projetos.html" target="_self" alt="Projetos">
	<area shape="rect" coords="766,136,829,150" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="contato">
	<area shape="rect" coords="799,56,843,120" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="17,299,48,312" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="57,300,106,314" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="conato">
	<area shape="rect" coords="414,554,609,581" href="mailto:contato@sferagestao.com.br" alt="contato@sferagestao.com.br">
	<area shape="rect" coords="767,824,807,836" href="http://www.sferagestao.com.br/contato.html" target="_self" alt="contato">
	<area shape="rect" coords="714,842,837,893" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
	<area shape="rect" coords="135,787,173,802" href="http://www.sferagestao.com.br/index.html" target="_self" alt="principal">
  </map>
</div>

<div id="formail"> <!-- Início Código -->
<form action="http://www.sferagestao.com.br/formail.php" method="POST">
  <p>Envie sua mensagem.</p>
  <p><font size="2" face="Verdana">Nome:<br>
	<input type="text" name="nome" size="24"><br>
	E-Mail:<br>
	<input type="text" name="email" size="24"><br><br>
	Mensagem:</font><br>
	<textarea name="mensagem" rows="6" cols="25"></textarea>
	<br>
	<input type="submit" name="Enviar" value="Enviar">
	<input type="reset" value="Limpar">
  </p>
</form>
</div>
</body>
</html>

Giovani · Julho 8, 2009

O link continua quebrado.

Recomendo estudar sobre posicionamento.

Com certeza irá resolver o seu problema.

Rapha Designer · Julho 8, 2009

Já conferi os meus arquivos, estão corretos, mas mesmo assim enviei tudo denovo pra Locaweb. Isso com certeza não fui eu que fiz, pois uma hora estava funcionando, um minuto depois sem eu mexer em nada parou de funcionar, essa Locaweb é complicada...

Testem o link agora, aperta F5 pra dar refresh que agora vai.

Eu to a dois dias estudando posicionamento mas ainda não encontrei um tutorial que me ajude.

Se alguem puder ajduar, vou tentar ver o link quebrado.

Giovani · Julho 8, 2009

Rapha Designer, este links sobre posicionamento, com certeza, devem ajudar.

http://forum.imasters.com.br/index.php?showtopic=152734

Rapha Designer · Julho 8, 2009

Giovani, uma coisa eu sei, comecei um arquivo novo, a parte de posicionar a Div formail com a Div pai Contato deu certo, agora falta deixar a Div Pai centralizada sempre, vou olhar os artigos pra ver se consigo fazer isso, mas segue o novo código, agora bem mais limpo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sfera Gestão e Soluções</title>
<style type="text/css">
<!--
#index {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
#formail {
	position:relative;
	Top: 365px; /* deixando o topo do elemento 50 pixels mais abaixo do seu “pai” */
	Left: 70px; /* deixando o elemento 50 pixels mais a direita do seu “pai” */
	width:200px;
	height:115px;
	z-index:2;
}
-->
</style>
</head>

<body>
<div id="index"><img src="file:///S|/Markting/03 - Site Sfera/contato.jpg" width="860" height="912" /></div>
<div id="formail"><form action="http://www.sferagestao.com.br/formail.php" method="POST">
  <p>Envie sua mensagem.</p>
  <p><font size="2" face="Verdana">Nome:<br>
	<input type="text" name="nome" size="24"><br>
	E-Mail:<br>
	<input type="text" name="email" size="24"><br><br>
	Mensagem:</font><br>
	<textarea name="mensagem" rows="6" cols="25"></textarea>
	<br>
	<input type="submit" name="Enviar" value="Enviar">
	<input type="reset" value="Limpar">
  </p>
</form>
</div>
</body>
</html>

Henrique Barcelos · Julho 8, 2009

Está esquecendo de definir um DOCTYPE http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Rapha Designer · Julho 8, 2009

o Doctype tá definido, eu só não coloquei ai porque achei que não importava.

To testando e testando aqui e nada, não consigo centralizar a DIV Pai... de jeito nenhum, e se eu uso % na largura da Div Pai, ai a div "formail" perde todo o alinhamento, principalmente se dimensionar a tela.

Rapha Designer · Julho 8, 2009

agora ficou alinhado, porém não sei porque, ficou um espaço na parte de baixo.

segue o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Teste</title>
<style type="text/css">
body {
margin: 0; /* zerando as margens do body */
padding: 0; /* zerando os paddings do body */
text-align: center; /* deixando o alinhamento do texto centralizado */
}

#primeiro {
margin: 0 auto; /* deixando o alinhamento do elemento de acordo com alinhamento do texto do body, que é seu “pai” */
width: 860px; /* definindo 500px de largura pro div */
height: 200px; /* definindo 200px de altura pro div */
}

#segundo {
position: relative; /* deixando o elemento com uma posição relativa à seu “pai” */
top: -550px; /* deixando o topo do elemento 50 pixels mais abaixo do seu “pai” */
left: -250px; /* deixando o elemento 50 pixels mais a direita do seu “pai” */
width: 200px; /* definindo 100px de largura pro div */
}
</style>
</head>
<body>
	<div id="primeiro"><img src="contato.jpg" alt="" width="860" height="912" />
		<div id="segundo"><form action="http://www.sferagestao.com.br/formail.php" method="POST">
  <p>Envie sua mensagem.</p>
  <p><font size="2" face="Verdana">Nome:<br>
	<input type="text" name="nome" size="24"><br>
	E-Mail:<br>
	<input type="text" name="email" size="24"><br><br>
	Mensagem:</font><br>
	<textarea name="mensagem" rows="6" cols="25"></textarea>
	<br>
	<input type="submit" name="Enviar" value="Enviar">
	<input type="reset" value="Limpar">
  </p>
		</form></div>
	</div>
</body>
</html>

Será que é porque eu to trabalhando com imagem? Olhem no link: www.sferagestao.com.br/contato

Por favor, preciso muito publicar esse site hoje. Só falta agora saber porque tá ficando esse espaço embaixo...

Olha o que eu achei: "Bom, agora estou com mais um problema que atrapalha ainda mais isso:

Utilizando uma DIV dentro de outra div, o IE nunca deixa a div de dentro passar e sair para fora da div externa. Para isso ele aumenta as dimensões da div externa, de acordo com a interna. Já no FF, isso nao acontece. Se a div que está dentro é maior do que a externa, ela simplesmente sai para fora.. Isso está me dando problemas sérios, pois isso junto com o problema do padding, ta deixando quase impossivel eu fazer um código que apareça igual tanto no FF quanto no IE..

"

Agora complicou...

Tiago Sabadini · Julho 8, 2009

Olá, aqui me parece estar errado somente o css...então fiz uma pequena modificação

<style type="text/css"> 
		body { text-align: center; } /* deixando o alinhamento do body centralizado */
		
		#geral {
			width: 860px;
			margin: 0 auto; /* o correto é colocar 0 auto para centralizar*/
		}
		
		#conteudo {/* veja se vai ficar correto não use mto position, prefira float para estrutura */
			float:left;
			margin-left:10px;
			width: 200px; 
		}
	#geral #conteudo form p {
	text-align: left;
}
	</style>

tire o position do #formmail e use float: left;

Rapha Designer · Julho 8, 2009

Ficou na posição horizontal correta, porém não consigo definir uma posição vertical para o Div conteudo. Não existe float para vertical, correto!? Então como posicionar ele pra ficar em cima da imagem?

Rapha Designer · Julho 8, 2009

Agora consegui posicionar ela na vertical, vlw tiago!

Só tem um problema: olhem o código:

body {
	text-align: center;
	z-index: 1;
} /* deixando o alinhamento do body centralizado */

		#conteudo {
			float:left;
			height:280px;
			width: 200px; /* definindo 530px para a largura do div */
			margin-left:50px;
			margin-top:-550px;
			z-index:3;
		}
		
		#geral {
	width: 860px; /* definindo 530px para a largura do div */
	margin: 0 auto; /* colocando auto, para que o #geral fique de acordo com o alinhamento do body, ou seja, centralizado */
	z-index:2;
	display: block;
		}

O problema é que no Internet Explorer ele funciona perfeitamente, mas no Firefox, ele deixa o formulário atrás da Div da imagem, que é a Div Geral. Mais um problema. Parece que o z-index não funciona...

olhem no link www.sferagestao.com.br/contato

Testem no IE e no FF, vocês verão que no FF não aparece o formulário, pois o mesmo fica atrás da imagem da Div "geral", a div "contato" tá ficando por trás no FF.

Esse é o último problema a ser resolvido.

Thiago Retondar · Julho 8, 2009

A propriedade z-index só funciona junto à um position.

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

Rapha Designer · Julho 13, 2009

Bom, agora o meu problema é como deixar a Div "conteudo" por cima da Div "geral" no FF. Alguem tem alguma idéia, ou sabe como resolver isso?

É complicado, pois o site só está funcionando no Internet Explorer.

ps: Sei que já postaram muitos tópicos sobre alinhamento de Div, e que o pa_bruno já postou vários tutoriais sobre isso, porém nenhum deles me ajudou a resolver os problemas ocorridos, não achei resposta para os meus problemas em nenhum deles, de certo me ajudaram em algo, mas os principais erros eu não consegui arrumar se não fosse esse tópico que abri. Agora há mais um problema, e eu já procurei não só no Imasters, mas como também no Baboo, no MxStudio, e pelo Google e não encontrei nada que resolvesse o meu problema, pois agora que consegui finalmente alinhar a DIV, vem outro problema, citado acima. Então peço que se alguém saiba como resolver isso, ou tem uma ídeia ou conheça algum artigo que possa resolver meu problema, por favor me ajude, pois o site que estou desenvolvendo é para a empresa na qual trabalho, e meu prazo está acabando.

Desde já agradeço pela ajuda. Obrigado!

Thiago Retondar · Julho 13, 2009

Pode atualizar o site e passar o link da página?

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

Rapha Designer · Julho 13, 2009

o link é www.sferagestao.com.br/contato

Vlw!

Thiago Retondar · Julho 13, 2009

Mas aí só tem uma imagem. :blink:

Arquivado

Alinhamento de DIV

Recommended Posts

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

§ÜP®ËM3 (Daniel/Nerd) 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Tiago Sabadini 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Rapha Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18