Ir para conteúdo

POWERED BY:

Arquivado

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

formigoni

[Resolvido] Div dentro de Div

Por , em Desenvolvimento frontend

Recommended Posts

formigoni    0

formigoni
Postado

Olá, boa a tarde a todos,

preciso de uma dica de vocês.

 

Possuo uma "div" com o nome "centralizada" e como o nome diz a mesma fica centralizada na página, o que preciso e sinceramente não estou conseguindo e posicionar algumas "divs" dentro da principal.

Essas "divs" que estou tentando posicionar são efeitos de "fade", vejam o que possuo:

 

duv "centralizada"

 


<!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>Top Rated - Centralizando elemento na página</title></script> 

<link href="estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.efeito_fade').append('<span class="hover"></span>').each(function () {
  		var $span = $('> span.hover', this).css('opacity', 0);
  		$(this).hover(function () {
    		$span.stop().fadeTo(500, 1);
 		}, function () {
   	$span.stop().fadeTo(500, 0);
  		});
	});
});
</script>

<style> 
.centralizado {
	width: 1000px; 
	height: 750px; 
	position: absolute; 
	top: 50%;
	left: 50%;
	margin: -375px 0 0 -500px; 				
}
</style> 
</head> 
<body> 
<div class="centralizado">
<h2><br>
 <a href="#" name="imagem1" class="efeito_fade" id="imagem1" ></a></h2>
</div> 
</body> 
</html>

 

e a div que estou tentando posionar é chamada pelo arquivo externo no link da página e é esse:

 

/* botao 1 */
#imagem1 {
clear: both;
position:relative;
display:block;
height: 330px;
width: 511px;
background:url(images/foto.png) no-repeat;
background-position:0 0;
cursor: pointer;
}
#imagem1 span.hover {
position: absolute;
display: block;
height: 330px;
width: 511px;
background: url(images/foto.png) no-repeat;
background-position: bottom;
}

 

como posso posicionar no centro da div essa outra div?

 

Valeu e fiquem na paz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vanilson    2

Vanilson
Postado

Formigoni, dentro da div centralizada deve estar as outras div's que desejas posicionar e seria bom que tu colocasses a forma como desejas que as div's estejam posicionadas porque isso é algo relativo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hünter    0

Hünter
Postado

Mano tá ai o codigo, eu acho que é isso que você quer.

 

<!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=iso-8859-1" />
<title>Documento sin título</title>
</head>
<style type="text/css">
.centrodiv {
width:600px;
background-color:#CCCCCC;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.dentrodiv {
width:300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #99FF00;
}
</style>

<body>
<div class="centrodiv">Div no centro do body 

<div class="dentrodiv">Div no centro de uma div</div>
</div>
</body>
</html>

 

Espero ter ajudado. Falou....

Compartilhar este post

Link para o post
Compartilhar em outros sites

formigoni    0

formigoni
Postado

Olá, boa tarde a todos.

Me perdoem pela demora em responder esse post, mas agradeço ao Hünter pela excelente dica, valeu mesmo.

Aproveitando, desejo um natal maravilhoso a todos.

 

Valeu e fiquem na paz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vanilson    2

Vanilson
Postado

Ainda da para simplificar mais o codigo, no caso das margens use apenas margin:0 auto, deixando o codigo do Hunter desse jeito:

 

<!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=iso-8859-1" />
<title>Documento sin título</title>
</head>
<style type="text/css">
.centrodiv {
       width:600px;
       background-color:#CCCCCC;
	margin:0 auto;
}
.dentrodiv {
       width:300px;
     	margin:0 auto;
       background-color: #99FF00;
}
</style>

<body>
<div class="centrodiv">Div no centro do body 

<div class="dentrodiv">Div no centro de uma div</div>
</div>
</body>
</html>

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