Não consigo posionar div corretamente

Front-end

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

Cássia Freitas

Curtidas 0

Respostas

Marcelo Pastore

Marcelo Pastore

28/03/2014

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]
GOSTEI 0
Cássia Freitas

Cássia Freitas

28/03/2014

Não tem imagem não, acho que vc esqueceu o arquivo css.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

28/03/2014

exatamente isso, desculpa, agora ficou assim:

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20140328-181003.jpg[/img]
GOSTEI 0
Cássia Freitas

Cássia Freitas

28/03/2014

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]
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

28/03/2014

desculpa Cassia, não entendi.
GOSTEI 0
Cássia Freitas

Cássia Freitas

28/03/2014

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
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

28/03/2014

mais uma vez desculpa, esse firebug, pela minha pesquisa é um complemento do firefox, não é? me desculpe mesmo.
GOSTEI 0
Cássia Freitas

Cássia Freitas

28/03/2014

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.
GOSTEI 0
POSTAR