Alinhamento de DIV

[Rapha Designer 0]

Então, é esse o problema, abre o código e dá uma olhada, a div de conteudo que é o formulário está lá, porém ela fica por trás da imagem. Não consigo coloca-la para cima.

[Thiago Retondar 18]

Tente colocar a imagem depois do formulário ou faça-a de background. :blink:

 

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

[Rapha Designer 0]

Não funcionou... http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

[Thiago Retondar 18]

Se você colocar como background do body é certeza que vai funcionar, mas é estranho isso que quer fazer. O_O

 

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

[Rapha Designer 0]

Então, não é estranho, é só imaginar o seguinte... isso fica mais fácil de imaginar se você conhece flash, photoshop etc.

 

A imagem que está ao fundo na div "geral" não pode ser colocada como plano de fundo, pois ela é uma imagem mapeada, ou seja, eu coloquei vários mapas de links na imagem.

 

Portanto, qualquer outra informação que adiciono, preciso colocar sobre essa imagem, e o formulário é uma delas, e por isso ele é uma div também.

 

O problema aqui, que está acontecendo agora, é como se fossem camadas, preciso deixar a imagem atrás do formulário, e está acontecendo justo o contrário.

 

Tem uma outra página que eu comecei a fazer mas parei que é a www.arboreengenharia.com.br nessa página eu consegui deixar as divs por cima da div maior que tem a imagem, porém não consegui centralizar a Div. Assim fica mais fácil também de vocês verem o proposito e como eu quero que fique, porém centralizado, claro.

 

Todo tutorial só ensina a montar divs, posicionar divs de acordo com textos e cores de plano de fundo nas divs, porém nenhum tutorial ensina a posicionar uma div, em cima de outra div que tenha uma imagem. No ponto de vista dos tutoriais, é como se fosse um jogo de Tetris, aonde você encaixa uma peça na outra. No meu caso, é imaginar como camadas, aonde o posicionamento não é só X e Y, horizontal e vertical, e sim X, Y e Z. Percebi que todos conseguem fazer isso com divs que não são imagens, mas e com uma imagem como a que eu uso, alguem já viu?

 

Eu fiz esse site pra ser mais simples, porque geralmente trabalho com Flash. No caso do flash ele trabalha camadas muito bem, então você posiciona o conteudo aonde você quiser.

Mas não queria usar flash no momento, mas to vendo que tá me tomando mais tempo do que um site em flash.

[Thiago Retondar 18]

Não entendi muito bem, e ainda acho estranho, mas tente trabalhar com position e z-index. O z-index não funciona sem position.

 

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

[Rapha Designer 0]

Eu vou deixar do jeito que está mesmo, pois vou começar a desenvolver o site em Flash. Até agora não consegui de jeito nenhum arrumar isso, e parece que ninguem conseguiu também.

[Thiago Retondar 18]

Nem com position/z-index deu? O_O

 

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

[Rapha Designer 0]

Então Thiago, coloquei o position em relative, ele está alinhado a div da imagem, olha no link: www.sferagestao.com.br/contato (visualise no Internet Explorer)

 

Porém, agora, fica um espaço em branco logo abaixo de todo o layout. Aqui não acontece, mas acho que o IE 7 corrige esse problema, mas no IE6 fica sobrando espaço pra baixo da tela.

 

E no FireFox ele fica pra fora do layout (dá uma olhada com o FF).

 

To pra ver alguem desenvolver um programa de desenvolvimento Web que trabalhe bem com camadas, pra um dia poder fazer isso que estou tentando.

[Thiago Retondar 18]

Aqui o formulário está aparecendo em cima da imagem, pela primeira vez. Agora só definir o left.

 

Não tenho como testar no Internet Explorer.

 

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

[Rapha Designer 0]

Rsss

 

O FF desloca a vertical (left) sempre... isso eu sei porque acontece, pois aqui no Dreamweaver, pra deixar o formulário no local certo, usando o position:relative; eu defini uma posição fora da Div pai, que é a div da imagem, pois no IE só assim funcionou, aí quando abre do FF, o formulário desloca para fora da Div pai, assim como está no DreamWeaver, ou seja, o FF é mais fiel ao conteudo do que o IE, mas como a maioria ainda usa o IE.

 

Acho que a parte mais difícil é essa, deixar o conteudo que funcione nos dois navegadores. Vou tirar um print da tela pra mostrar como fica no IE e no FF.

 

no IE 7:

 

no FF 3:

[Thiago Retondar 18]

Tente trocar por position: absolute.

 

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

[Rapha Designer 0]

absolute não dá certo tb, o formulário muda de lugar conforme a resolução e dimensão da tela do navegador.

[Thiago Retondar 18]

Mas você colocou position: relative na div que engloba o site?

 

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

[Rapha Designer 0]

Não, na Div "geral" não coloquei nada... nenhum tipo de posição. Mas já tentei colocar antes e não deu certo, pois logo a div geral vai pra esquerda e não consigo mais centraliza-la.

[Rapha Designer 0]

Olha, o formulário fica sempre no local correto utilizando position absolute para ambos. Dessa vez ele não fica dançando e fugindo pela tela, e está sempre visível e junto a div pai que é a "geral".

 

Porém, colocando position:absolute; para a div "geral", ela não fica centralizada de jeito nenhum, ou vai pra direita, ou vai pra esquerda, olhem a figura abaixo e o código:

 

 

código:

* { margin: 0; padding: 0; } /* Zerando as margens e preenchimentos de todas as tags */
	
	body { text-align: center; } /* definindo o alinhamento do texto para o centro */
	
	p { margin: 0 0 15px 0; } /* definindo a margem dos parágrafos */

	#conteudo {
	position:absolute;
	height:280px;
	width: 200px;
	z-index:3;
	left:85px;
	top: 380px;
		}
		
	#geral {
		position:absolute;
	width: 860px;
	z-index:2;
	display: block;
	margin: auto;
		}

[Rapha Designer 0]

Ontem cheguei em casa e entrei no site, estava com o div pai sem position, e o div contato com relative, aqui tava aparecendo tudo certo, mas em casa tava uma caca, nada alinhado. Tive que voltar a usar o float:left; e ai deu certo no IE mas no FF não...

 

Terminando de colocar o conteudo no site, vou começar a desenvolver o site em flash, já que não é um site com muitas imagens e não é um site de vendas pela internet, ficará melhor.

[Thiago Retondar 18]

Bem, o correto é colocar position: relative no #geral e no #conteudo colocar position: absolute.

 

Faça uma pesquisa sobre essa propriedade e verá como funciona.

 

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

[Eliseu M. 2]

Tente colocar margin: o auto; ou em body ou na DIV geral.