Jump to content


mi7chael

Member Since 05/07/2005
Offline Last Active 26/04/2010, 15:26
-----

#863853 Colocar Div Sobreposta Em Layout Ajustável

Posted by mi7chael on 02/08/2007, 19:20

Pessoal, estou com um problema.

Estou fazendo uma pagina, em que eu quero colocar uma imagem passando tipo um slideshow, e sobreposta a essa imagem, um quadro com um texto, no canto. Eu consegui definindo "position", só que se eu colocar como absolute, eu consigo colocar ela em qualquer lugar da página, pois a div passa a se "alinhar" tendo como base a página. Só que o layout fica centralizado, logo, quando o cara diminuir o tamanho da janela do navegador (ou usar em outra resolução) o quadro vai pro lugar errado. Se eu colocar position como relative, ele fica no lugar onde eu quero e acompanhando o layout, só que a imagem não fica embaixo dele de jeito nenhum. Abaixo segue o código simplificado:

<style>
body {margin:0; margin-top:30px; margin-bottom:20px; padding:0; text-align:center; background-color:#000000;}

#tudo {width: 720px; margin:0 auto; text-align:left;}
#conteudo {width:720px; height:666px; float:left; background-color:#FFFFFF;}

#quadro_imagem {width:510px; height:260px; padding-left:10px; padding-bottom:10px; margin-left:50px; float:left; background-color:#000000;}
#quadro_branco {position:relative; top:0px; left:10px; width:128px; padding-left:2px; height:250px; z-index:1; background-color:#FFFFFF;}
#imagem {width:500px; height:260px; float:left;}

</style>
</head>

<body>
<div id="tudo">
	<div id="conteudo">
		<div id="quadro_imagem">
			<div id="quadro_branco"></div>
			<div id="imagem"><img src="teste.jpg" /></div>
		</div>
	</div>
</div>
</body>

Basicamente o que eu preciso é:

Se usar absolute, tenho que fazer a div "quadro_branco" se alinhar pela "quadro_imagem", aí dá certinho.

Se usar relative, tenho que fazer a div "imagem" ficar por baixo da div "quadro_branco".

E aí, alguém se habilita ??? rsss
Valew pessoal


IPB Skin By Virteq