[Resolvido] Centralizar div ao centro

marcelocardoso · Janeiro 27, 2009

Amigos!

Estou tomando 10 x 0 para esta div, já lí varias coisas que consegui na net, mas nao consigo deixar esta div no centro para diversos tipos de monitores, sabem como posso deixa-la sempre AO CENTRO independente da resolução?????

CODIGO:

<!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>BANNER FLUTUANTE CENTRALIZADO AO MEIO INDEPENDENTE DAS RESOLUÇÕES DE VIDEO</title>
<script>
function Esconde(){
		 document.getElementById('banner').style.visibility="hidden";
}
</script>
</head>
<body>

<div id="banner" style="position:absolute; left:385px; top:300px;">
	<table width="495" border="0" cellpadding="0" cellspacing="0">
	 <tr>
	   <td width="450"><img src="imagembanner.gif" width="472" height="350" border="0"></td>

	   <td width="21" valign="top"><div align="center"><strong><a href="#" onClick="java script:Esconde();"> X </a></strong></div></td>
	 </tr>
	</table>
</div>

</body>
</html>

E se possível também gostaria que ela ficasse FIXA mesmo que a pagina rolasse, tem como também???

quem puder me ajudar agradeço.

Obrigado!

wills · Janeiro 27, 2009

cara, isso é xhtml não javascript...

mas vamos lá

#banner{
margin:0 auto;
width:200px;
height:200px;
background:#000;
position:fixed;
}

Raficcha · Janeiro 27, 2009

bom, se a dica do amigo ai de cima não funcinar tenta esta

.classedadiv{

/* centralizar */

position:relative; //retirar (deixei pq peguei de um sistema que eu to fazendo)

width:500px; /* tamanho */

margin-left:-250px; /* metade do tamanho (negativo) */

left:50%;

/* centralizar */

}

MaktubBruno · Janeiro 27, 2009

Bom e se mesmo assim não funcionar tenta isso

#banner {
width:778px;
height:auto;
margin:auto;
text-align:center;
}

ions · Janeiro 28, 2009

poxa... não sei se você já resolveu, mais fiz um live preview aqui pra você:

LivePreview: http://www.beatsteam.com.br/cen.php

source code:

<!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>

BANNER FLUTUANTE CENTRALIZADO AO MEIO INDEPENDENTE DAS RESOLUÇÕES DE VIDEO

</title>

<script>

function Esconde(){
		 document.getElementById("fora").style.display="none";
}

</script>

<style type="text/css">
body {
	background: #1E1E1E;
	height: 1000px;
}
a.link {
	color: #FFFFFF;
}
a.link:hover {
	color: #960000;
}
a {
	cursor: pointer;
	text-decoration: none;
}
#fora {
	width: 474px;	/* 472" height="350 */
	height: 370px;
	background: #AFAFAF;
	border: 1px solid #CDCDCD;
	padding: 5px;

/* ATENÇÃO AQUI, POIS AQUI COMEÇA O POSICIONAMENTO */

	position: fixed !important;
	top: 50%;
	left: 50%;

	margin-top: -175px;
/* Formula: Altura(height)/2 = -Resultado de Altura/2 neste caso: 350/2 = 175, passa-se negativo por que ele estará recuando para a margem superior */


	margin-left: -236px;
/* Formula: Largura(width)/2 = -Resultado de Altura/2 neste caso: 350/2 = 175, passa-se negativo por que ele estará recuando para a margem esquerda */
}
#titulo {
	font-family: "Verdana", "Trebuchet MS", "Arial";
	font-size: 11px;
	font-weight: bold;
	color: #FFFFFF;
	float: left;
	position: relative;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: -5px;
	padding-bottom: 5px;
	cursor: default;
}
#fechar {
	font-family: "Verdana", "Trebuchet MS", "Arial";
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	float: right;
	position: relative;
	padding-right: -5px;
	padding-left: 5px;
	padding-top: -5px;
	padding-bottom: 5px;
	cursor: default;
}
#conteudo {
	background: transparent url(http://www.beatsteam.com.br/abstract.jpg) top left no-repeat;
	width: 472px;
	height: 350px;
	border: 1px solid #CBCBCB;
	position: relative;
	clear: both;
}
</style>

</head>

<body>

<div id="fora">

		<div id="titulo" title="Aqui você pode por o título que quiser">

		:: Seu Título aqui! ::

		</div>

		<div id="fechar" title="Fechar">

		[<a href="#" onClick="Esconde()" class="link">x</a>]

		</div>

	<div id="conteudo" title="Tente redimensionar a janela :D">

	

	</div>

</div>

</body>

</html>

espero que ajude ;)

berkowitz · Janeiro 28, 2009

Bom e se mesmo assim não funcionar tenta isso
#banner {
width:778px;
height:auto;
margin:auto;
text-align:center;
}

Henrique Barcelos · Janeiro 28, 2009

Outra coisa, é no IE q você está testando???

Se for, verifique se existe o DOCTYPE na página...

Não sei pq cargas d'agua o IE não lê o CSS corretamente se não tiver o DOCTYPE definido...

Otata · Janeiro 28, 2009

tópico movido: origem Javascript http://forum.imasters.com.br/public/style_emoticons/default/seta.gif destino Webstandards: CSS / XML / XHTML / HTML

William Bruno · Janeiro 28, 2009

Não sei pq cargas d'agua o IE não lê o CSS corretamente se não tiver o DOCTYPE definido...

Porque a Microsoft inventou um modo de renderização chamado: "Quirks mode".

Ou seja, renderiza tudo do jeito que ela bem quiz... totalmente fora dos padrões e recomendações... Box Model Quebrado... não reconhece: margin: 0 auto...

E por ai vai... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Henrique Barcelos · Janeiro 28, 2009

William Bruno, o IE reconhece sim o margin: 0 auto, mas o doctype tem que estar definido. Pelo menos em tudo o que eu faço funciona.

William Bruno · Janeiro 28, 2009

Exatamente.. foi oque eu disse.

Veja o quote que fiz. "Se o DOCTYPE não estiver definido, o IE renderiza em Quirks mode, ai, coisas como o margin: 0 auto; não funcionam.

marcelocardoso · Janeiro 29, 2009

PEssoal!

Valeu, demorei para responder, mas consegui fazer com as dicas dos colegas....

Arquivado

[Resolvido] Centralizar div ao centro

Recommended Posts

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

wills 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Raficcha 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

MaktubBruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ions 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Otata 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

lendo RSS com PHP mostrando a imagem de preview

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

Fóruns

Tempo Real

Informação importante