Ir para conteúdo

POWERED BY:

Arquivado

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

eronventer

Centralizar div

Por , em Desenvolvimento frontend

Recommended Posts

eronventer    2

eronventer
Postado

Ae galera,

 

Seguinte, eu tenho a seguinte página:

 

<style type="text/css">#foto_ampliada {	position:absolute;	margin:0 auto;	width: 400px;	height: 400px;	background-color: #FFFFFF;	border: 1px solid #996600;	display:none;}</style><div id="foto_ampliada"></div><table width="400" border="0" cellspacing="8" cellpadding="0">  <tr>	<td><a href="java script:carregaFoto('foto.php?id=1');"><img src="imgagem.jpg" width="132" height="136" border="0" /></a></td>	<td><a href="java script:carregaFoto('foto.php?id=2');"><img src="imgagem.jpg" width="132" height="136" border="0"/></a></td>	<td><a href="java script:carregaFoto('foto.php?id=3');"><img src="imgagem.jpg" width="132" height="136" border="0"/></a></td>	<td><a href="java script:carregaFoto('foto.php?id=4');"><img src="imgagem.jpg" width="132" height="136" border="0"/></a></td>  </tr></table>

Devido a a minha table a div não fica centralizada, é possível corrigir isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

thescente, o position:absolute normalmente é utilizado para layout laterais, não no centro...já q muda a resolução da tela, vai tudo pelas ares, literalmente.

 

Esses artigos de posicionamento explicam bem isso!

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

provavelmente ele deve estar querendo centralizar verticalmente tb gio... eu naum recomendo naum...

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

Bom, mudei geral agora!

 

Estou postando o html completo pq to me quebrando pra quando eu clicar na foto a div "foto_ampliada" aparecer no centro da tela ou intão no centro da div "conteudo".

 

Alguém pode dar um help?

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script src="ajax.js"></script><style type="text/css">body {	margin: 0px;	height: 100%; 	background-image: url(fundo_rodape.jpg);	background-position: bottom;	background-repeat: repeat-x;}td {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	text-align: justify;	color: #666666;}#total {	width: 100%;	height: 100%;}#topo {	width: 100%;	height: 184px;	background-image: url(fundo_topo.jpg);	background-repeat: repeat-x;}#conteudo {	padding-left: 28px;}#foto_ampliada {	position:absolute;	margin:0 auto;	text-align: left;	width: 400px;	background-color: #FFFFFF;	border: 1px solid #996600;	display:none;}</style></head><body><div id="total">	<div id="topo"><img src="logotipo.jpg"></div>	<div id="foto_ampliada"></div>	<div id="conteudo">		<table width="708" border="0" cellpadding="0" cellspacing="14">		  <tr>			<td height="55" colspan="5" valign="top">Os desfiles da moda prêt-à-porter de Milão têm mostrado 			que a primavera-verão 2007 européia será dos microshorts e saias. Desde o primeiro dia da semana de 			moda italiana, os estilistas apontam que mostrar as pernas - e às vezes, algo mais - será o hit da 			estação.</td>		  </tr>		  <tr>			<td width="132"><a href="java script:carregaFoto('foto.php?id=1');"><img src="imgagem.jpg" width="132" height="136" border="0" /></a></td>			<td width="132"><a href="java script:carregaFoto('foto.php?id=2');"><img src="imgagem.jpg" width="132" height="136" border="0" /></a></td>			<td width="132"><a href="java script:carregaFoto('foto.php?id=3');"><img src="imgagem.jpg" width="132" height="136" border="0" /></a></td>			<td width="132"><a href="java script:carregaFoto('foto.php?id=3');"><img src="imgagem.jpg" width="132" height="136" border="0" /></a></td>			<td width="132"><a href="java script:carregaFoto('foto.php?id=4');"><img src="imgagem.jpg" width="132" height="136" border="0" /></a></td>		  </tr>	  </table>			</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

você precisa setar margens negativas com a metade do valor da altura e largura e left e top com 50%

 

#foto_ampliada {	position:absolute;	text-align: left;	width: 400px;	left: 50%;	height: 400px;	top: 50%;	margin: -200px 0 0 -200px;	background-color: #FFFFFF;	border: 1px solid #996600;	display:none;}

detalhe q você precisa setar um valor pra altura, senaum você naum consegue colocar centralizada no centro verticalmente

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

Hmm vlw, nao so mtu familiarizado com layout em cssmas damo um jeito heheheuma coisa que notei é que ao gerar scroll na página as imagens la debaixo não abrem na posição do scroll, elas ficam no topo.mas assim ja ta beleza.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

hmm beleza, mas ta tranquilo assim sem galho.

olha só outra duvida, eu coloquei uma div rodape

 

#rodape {	background-image: url(_img/fundo_rodape.jpg);	background-position: bottom;	background-repeat: repeat-x;	height: 32px;}

coloquei logo abaixo da da conteudo

ficou assim:

 

<div id="conteudo"></div><div id="rodape"></div>

Porém o rodapé nao fica bem no rodape da página ele

vai descendo mediante a altera da div conteudo, nao tem

como deixar ela (div rodape) no final da página?

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