Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno Cobra

com tamanho do layer

Por , em Desenvolvimento frontend

Recommended Posts

Bruno Cobra    0

Bruno Cobra
Postado

Galera, to com uma dúvida que creio ser um pouco simples, espero que alguém saiba ajudar...É o seguinte: tenho duas layers, uma chamada de primeira e outra de segunda... A primeira possui simplesmente uma imagem (que seria a imagem de fundo do site) e a segunda possui um include de um arquivo php... em virtude do include, o tamanho total (height) da página varia, pois pega os dados do banco...Portanto, o que eu preciso é simplesmente que a layer primeira fique com o tamanho total da página...Creio que esteja de fácil entendimento o tópico... se alguém souber ajudar, fico grato!Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Cobra    0

Bruno Cobra
Postado

Paulo, valeu pela dica, mas infelizmente, pelo que li neste e em outros artigos sobre as Faux Columns, elas não podem me ajudar... Vou postar um exemplo melhor de como esta o meu código:Css:

#central { left: 25px; position: absolute; top: 155px; width: 595px; z-index: 3;}#lateral { background-image: url(../img/menuFundo.jpg); left: 629px; position: relative; top: -4px; width: 141px; z-index: 2;}#site { background-image: url(../img/fundoCentro.jpg); left: 50%; margin-left: -390px; position: absolute; top: 0px; z-index: 0;}#topo { height: 240px; position: relative; top: 0px; width: 780px; z-index: 1;}

Html:

<div id="site"> <div id="topo"> AQUI HÁ UM FLASH DE 780x240px </div> <div id="central"> AQUI HÁ O PRIMEIRO PHP INCLUDE </div> <div id="lateral"> AQUI HÁ O SEGUNDO PHP INCLUDE </div></div>

Eu preciso que fiquem mantidas estas posições para as layers, mas de outra forma não sei como fazer... :SAlguém tem alguma idéia?Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Cobra    0

Bruno Cobra
Postado

Imagem Postada

 

Preciso que a layer #site (preto) acompanhe o tamanho das layers #lateral (azul) e #central (amarela)...

Do modo como postei no código anteriormente, #site está acompanhando apenas o tamanho de #lateral...

 

Acho que agora está de fácil entendimento...

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Para conseguir fazer o que você precisa, a princípio te adianto que terá que trabalhar de outra maneira diferente de position: absolute... Qdo se trabalha com essa propriedade, seria mais ou menos que dizer ao browser que "tal div é independente de qualquer outra coisa na página"...

 

Não sei se você conseguiu entender, mas o fato é que você tem q ter uma estrutura mais ou menos assim:

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif estrutura (HTML):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<link href="estilos.css" rel="stylesheet" type="text/css" />		<title>Título do Site</title>	</head>	<body>	<div id="site"> <!-- Aqui é a área preta -->		<div id="topo"><h1>Área Vermelha</h1></div>		<div id="central">			<h2>Área Amarela</h2>			<br /><br /><br /><br /><br /><br /><br />			<br /><br /><br /><br /><br /><br /><br />		</div>		<div id="lateral"><h2>Área Azul</h2></div>	</div>	</body></html>
http://forum.imasters.com.br/public/style_emoticons/default/seta.gif CSS => estilos.css
* {	margin: 0;	padding: 0;}#site {	width: 680px;	background-color: #000;	padding: 20px;}#topo {	width: 680px;	height: 100px;	background-color: #f00;}#central {	float: left;	width: 530px;	background-color: #ff0;}#lateral {	float: left;	width: 150px;	background-color: #00f;}
Salve os códigos e veja se é mais ou menos isso que precisa... Ou se preferir, visualize o exemplo on-line.

 

(O link para o arquivo CSS: estilos.css)

 

Para visualizar se está funcionando ou não, basta adicionar ou retirar <br /> da div "central" ou acrescentar na div "lateral"...

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Cobra    0

Bruno Cobra
Postado

Eaí Paulo! Cara, muito obrigado mesmo pela sua ajuda, mas continuo com um problema... :s um deles é que isso não ficou certo no firefox (mas isso é o de menos no momento, pois pra isso dou um jeito)...O principal problema é: eu precisei adicionar um "margin-left: -20px" à camada #central, pois ela precisa ficar um pouco acima... como eu já disse, na div #topo (vermelho), há um arquivo flash, mas essa camada acaba ficando por cima da central... como não há possibilidade de usar o z-index nessa forma que me passou (ou há?) sabes de outra forma que eu poderia utilizar para fazer funcionar?Resumindo: preciso simplesmente que a camada central fique 20px acima, "cortando" o layout, e que fique com o seu conteúdo acima da camada top...Novamente, muito obrigado pela ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

não ficou certo no firefox

Sério? Putz, q estranho... É q eu só podia testar no IE6 qdo postei, mas depois tentamos resolver isso então...

como não há possibilidade de usar o z-index nessa forma que me passou (ou há?) sabes de outra forma que eu poderia utilizar para fazer funcionar?

Tente fazer assim (não sei se dá certo! Mas não custa nada tentar...):

 

No CSS, altere:

#topo {	position: relative;	width: 680px;	height: 100px;	background-color: #f00;}#flash {	position: absolute;	top: 0;	left: 0;	z-index: 1000;	width: 680px;	height: 100px;}
Adicionado position: relative, top, left, z-index e criado mais uma id: flash... E tb altere:
#central {	float: left;	width: 530px;	background-color: #ff0;	margin-top: -20px;}
Adicionado margin-top: -20px à div central...

 

Agora, no HTML:

<div id="topo">	<div id="flash"> [Aqui você coloca o seu SWF ] </div></div>
E teste! Veja se surte algum efeito...

 

(Embora venho acompanhando este tipo de situação envolvendo sobreposição de Flash e tals, me parece que o z-index não funciona corretamente nessas situações, mas como eu ainda não cheguei a um veredicto final, tente a e...)

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Cobra    0

Bruno Cobra
Postado

Falae de novo Paulo! heheCara, muito obrigado pelo seu empenho em ajudar... infelizmente, esta sua última dica não funcionou, mas eu consegui dar um jeito: pude mudar o flash para transparente e coloquei simplesmente 'position: absolute;' no div #site... funcionou perfeitamente...Muito obrigado pela ajuda cara, valeu mesmo!Abraço

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