N�o consigo posionar div corretamente

28/03/2014

Este exemplo que estou usando peguei aqui no site mesmo, quero colocar uma div para apresentar um mapa ao lado da div conteudo, dentro da div content.

Meu c�digo:

<!DOCTYPE html>
<HTML>

<head>

<link rel="stylesheet" type="text/css" href="estilo.css" />

	<script type="text/javascript">
 	$(document).ready(function(){
 		$("#content div:nth-child(1)").show();
		$(".abas li:first div").addClass("selected");		
 		$(".aba").click(function(){
 			$(".aba").removeClass("selected");
 			$(this).addClass("selected");
 			var indice = $(this).parent().index();
 			indice++;
 			$("#content div").hide();
 			$("#content div:nth-child("+indice+")").show();
 		});
 		
 		$(".aba").hover(
 			function(){$(this).addClass("ativa")},
 			function(){$(this).removeClass("ativa")}
 		);				
 	});
 </script>
</head>

<body>
<div class="TabControl">
	<div id="header">
		<ul class="abas">
			<li>
				<div class="aba">
					<span>Tab 1</span>
				</div>
			</li>
			<li>
				<div class="aba">
					<span>Tab 2</span>
				</div>
			</li>
			<li>
				<div class="aba">
					<span>Tab 3</span>
				</div>
			</li>
			<li>
				<div class="aba">
					<span>Tab 4</span>
				</div>
			</li>
		</ul>
	</div>
	<div id="content">
		<div class="conteudo">
			Conte�do da aba 1
		</div>
		<div class="conteudo">
			Conte�do da aba 2
		</div>
		<div class="conteudo">
			Conte�do da aba 3
		</div>
		<div class="conteudo">
			Conte�do da aba 4
		</div>
		<div id="map">
				Mapa			
		</div>
	</div>
</div>

</body>
</HTML>

O css:

<style>

body{font-family:Calibri, Tahoma, Arial}

.TabControl{ 
	width:100%; 
	overflow:hidden; 
	height:900px}

.TabControl #header{ 
	width:100%; 
	border: solid 1px; 
	overflow:hidden; 
	cursor:hand
}

.TabControl #content{ 
	width:408px; 
	border: solid 1px;
	overflow:hidden; 
	height:100%; 
}

.TabControl .abas{display:inline;}

.TabControl .abas li{float:left}

.aba{
	width:100px; 
	height:30px; 
	border:solid 1px; 
	border-radius:5px 5px 0 0;
	text-align:center; padding-top:5px; 
	background:#3A5FCD}

.ativa{
	width:100px; 		
	height:30px; 
	border:solid 1 px; 
	border-radius:5px 5px 0 0;
	text-align:center; 
	padding-top:5px; 
	background:#27408B;}

.ativa span, .selected span{color:#fff}

.TabControl #content{background:#27408B}

.TabControl .conteudo{width:100%;  background:#27408B; display:none; height:100%;color:#fff}

.selected{width:100px; height:30px; border:solid 1 px; border-radius:5px 5px 0 0;
		text-align:center; padding-top:5px; background:#27408B}

.TabControl #map{
	width:800px; 
	border: solid 1px;
	overflow:hidden; 
	height:100%;
	float: left;
}		

</style>

Resultado a div map est� por cima da conte�do:

[img:descricao=P�gina]http://arquivo.devmedia.com.br/forum/imagem/343679-20140328-161123.png[/img]

C�ssia Freitas

Curtir t�pico + 0

Responder

Posts

28/03/2014

Marcelo Pastore

Cassia, tentei fazer um teste rapido aqui, n�o deu certo, me diz uma coisa, � carregado alguma imagem?

olha o que apareceu no meu:

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20140328-172526.jpg[/img]

Responder

Gostei + 0

28/03/2014

C�ssia Freitas

N�o tem imagem n�o, acho que vc esqueceu o arquivo css.

Responder

Gostei + 0

28/03/2014

Marcelo Pastore

exatamente isso, desculpa, agora ficou assim:

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20140328-181003.jpg[/img]

Responder

Gostei + 0

31/03/2014

C�ssia Freitas

Isso ai a div map que quero que fique ao lado da control est� por cima.
Olha nessa imagem estp� selecionada a div map ela est� por cima da control
[img]http://arquivo.devmedia.com.br/forum/imagem/343679-20140331-091637.png[/img]

Responder

Gostei + 0

31/03/2014

Marcelo Pastore

desculpa Cassia, n�o entendi.

Responder

Gostei + 0

31/03/2014

C�ssia Freitas

Abre no Firebug que vc vai ver que tem uma div map que est� por cima da conteudo quero colocar um mapa nessa div e que fique ao lado do conteudo.
No Firebug vc vai entender.. na imagem do post a area selecionada � a div deslocada

Responder

Gostei + 0

01/04/2014

Marcelo Pastore

mais uma vez desculpa, esse firebug, pela minha pesquisa � um complemento do firefox, n�o �? me desculpe mesmo.

Responder

Gostei + 0

02/04/2014

C�ssia Freitas

SIm para poder ver os elementos HTML na p�gina, ou ent�o no Chrome tecla F12 na aba "Elements" aparece todo HTML e vc vai clicando e ele marca na tela o elemento.
Assim se vc clicar na div map vai ver que ela est� deslocada.

Responder

Gostei + 0