Ir para conteúdo

POWERED BY:

Arquivado

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

Anderson Coutinho

DIV'S nao ficam sobrepostas :(

Por , em Desenvolvimento frontend

Recommended Posts

Anderson Coutinho    7

Anderson Coutinho
Postado

Olá ! ,

Como o título diz , as div's não ficam sobrepostas ,

 

A imagem topo.png (A faixa preta com a logo) mede 1300x180 px

 

A imagem corpo.png (As duas barras de conteúdo, o fundo é transparente) mede 1300x700 px

 

A div #tudo mede 1300x700

 

Eu quero que a imagem corpo.png fique sobreposta à DIV #tudo , as duas tem a mesma resolução , e quero que a imagem topo fique sobreposta à imagem corpo.png ,

 

A seguir 2 imagens para entender melhor :

 

29479632.png

Como vocês podem ver , o body.png , não está no início , não está passando por baixo da topo.png. . .

 

86087644.png

Nessa , mostra o body.png fora dos limites , e na indicação verde dentro dos limites , como eu quero que fique . .. .

 

Código HTML da página :

 

<!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>Mein Haustier</title>

<style type="text/css">

#tudo {	
z-index:1;
align:auto;
margin:auto;
width:1300px;
height:700px;
z-index:1;
background-color:#FFF	
}

#topo {
align:auto;
margin:auto;
width:1300px;
height:118px;
z-index:3;
background-image:url(Imagens/topo.png)

}
#corpo {
margin:auto;
align:auto;
width:1300px;
height:700px;
z-index:2;
background-image:url(Imagens/body.png)

}

body {
background-color: #CCC;
}
</style>

</head>

<body>

<div id="tudo"> 

<div id="topo"></div>

<div id="corpo"></div>

</div>

</body>

</html>

 

OBS: Na print , foi reduzido o tamanho do site no navegador e no dream, ou seja, não está mostrando o site em 100%.

 

 

 

 

 

Desde já , agradecido :nataltongue:

Compartilhar este post

Link para o post
Compartilhar em outros sites

gisaPP    0

gisaPP
Postado

Olá Anderson,

 

Primeiro, você não pode especificar a altura (height) de #tudo. O máximo q você pode colocar é o parâmetro min-height, ou seja, a altura mínima q seu site vai ter, pois na maioria das vezes, com o conteúdo q você colocar, a página tende a aumentar.

No seu caso, o min-height seria a altura do #topo mais a altura do #corpo.

 

Além disso, coloque um <br clear="all" /> depois de fechar a div de #corpo.

 

Corrige aí depois você me fala.

 

Gisele

 

 

Olá ! ,

Como o título diz , as div's não ficam sobrepostas ,

 

A imagem topo.png (A faixa preta com a logo) mede 1300x180 px

 

A imagem corpo.png (As duas barras de conteúdo, o fundo é transparente) mede 1300x700 px

 

A div #tudo mede 1300x700

 

Eu quero que a imagem corpo.png fique sobreposta à DIV #tudo , as duas tem a mesma resolução , e quero que a imagem topo fique sobreposta à imagem corpo.png ,

 

A seguir 2 imagens para entender melhor :

 

29479632.png

Como vocês podem ver , o body.png , não está no início , não está passando por baixo da topo.png. . .

 

86087644.png

Nessa , mostra o body.png fora dos limites , e na indicação verde dentro dos limites , como eu quero que fique . .. .

 

Código HTML da página :

 

<!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>Mein Haustier</title>

<style type="text/css">

#tudo {	
z-index:1;
align:auto;
margin:auto;
width:1300px;
height:700px;
z-index:1;
background-color:#FFF	
}

#topo {
align:auto;
margin:auto;
width:1300px;
height:118px;
z-index:3;
background-image:url(Imagens/topo.png)

}
#corpo {
margin:auto;
align:auto;
width:1300px;
height:700px;
z-index:2;
background-image:url(Imagens/body.png)

}

body {
background-color: #CCC;
}
</style>

</head>

<body>

<div id="tudo"> 

<div id="topo"></div>

<div id="corpo"></div>

</div>

</body>

</html>

 

OBS: Na print , foi reduzido o tamanho do site no navegador e no dream, ou seja, não está mostrando o site em 100%.

 

 

 

 

 

Desde já , agradecido :nataltongue:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson Coutinho    7

Anderson Coutinho
Postado

Olá Anderson,

 

Primeiro, você não pode especificar a altura (height) de #tudo. O máximo q você pode colocar é o parâmetro min-height, ou seja, a altura mínima q seu site vai ter, pois na maioria das vezes, com o conteúdo q você colocar, a página tende a aumentar.

No seu caso, o min-height seria a altura do #topo mais a altura do #corpo.

 

Além disso, coloque um <br clear="all" /> depois de fechar a div de #corpo.

 

Corrige aí depois você me fala.

 

Gisele

 

Não funcionou ,

O que aconteceu foi que aumentou a parte de baixo , isso ajudou :D , mas não é só isso que eu quero , eu quero poder coloca uma div que seja livre para você mover ela , que possa ficar por cima das outras divs ou por baixo . . .

Quando eu tiro a position:absolute , a div perde isso , e não pode mais ficar por baixo de outras divs :(

 

Quero poder colocar divs com a definição position:absolute (para que eu possa mover livremente , e colocar por cima de outras div's) MAS , que ela fique exatamente no lugar que deixei . . .

 

Fica ULTRA dificil de trabalhar com divs sem a definição position , :natalsad:

Compartilhar este post

Link para o post
Compartilhar em outros sites

gisaPP    0

gisaPP
Postado

 

Quero poder colocar divs com a definição position:absolute (para que eu possa mover livremente , e colocar por cima de outras div's) MAS , que ela fique exatamente no lugar que deixei . . .

 

 

Ok, mas a propriedade Position não serve para fazer a estrutura do site. Primeiro você monta a estrutura com as divs q você já criou (tudo, topo e corpo), depois trabalha com outras divs em cima dessas, aí sim você brinca com o position.

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