Div's Escondidas, Uma Dentro da Outra

[RAFAELLA TEIXEIRA 0]

Boa Tarde,

Gostaria de uma ajuda, se possível meio urgente.

 

Estou trabalhando em um site onde tenho duas divs... ambas usando display: none; porém quando mando a div interna aparecer, a principal desaparece. Como posso resolver?

 

Obrigada!

[allex_carvalho 124]

Precisamos ver o html que envolve essas divs e o css desse bloco.

[RAFAELLA TEIXEIRA 0]

<div id="pct2" style="display: none; padding: 20px; margin-bottom: -50px; margin-top: -1000px; margin-right: 52px; width: 730px; height: 960px; float: right; background-color: #ffffff; opacity: 0.95; text-align: left; font-size: 18px;"><strong>Título</strong>

<hr />

<a href="#"><img src="imagem.jpg" alt="consciencia negra" width="852" height="286" class="alignnone size-full wp-image-1160" /></a>

<div id="tudo">

<div id="cabecalho">

Mais Detalhes

</div>

<div id="menu">

<ul>

<li><a href="#regras">Regras</a></li>

<li><a href="#meuDiv">Observações</a></li>

<li><a href="#tarDiv">Tarifas</a></li>

<li><a href="#inclusDiv">Incluso</a></li>

</ul>

</div>

<div id="regras" style="padding: 10px; display: none;">Oiiiiiiiiiiiiii</div>

<div id="meuDiv" style="padding: 10px; display: none;">Olá!!!!</div>

<div id="tarDiv" style="padding: 10px; display: none;">Hey There!!!!</div>

<div id="inclusDiv" style="padding: 10px; display: none;">Hello!!!!</div>

</div></div>

Acontece o seguinte... tenho 4 blocos desse que escrevi acima... tenho pct1, pct2, pct3 e pct4... conforme ele clica em um dos 4 botões os pacotes são selecionados... até aí tudo ok... mas as abas Reservas, observações, tarifas e incluso não funcionam pq a medida que seleciono uma delas, a div pct eh escondida novamente.

 

Obrigada pela ajudaaaaa!

[allex_carvalho 124]

Seu CSS está todo ai dentro? E como está alterando o display das divs?

[RAFAELLA TEIXEIRA 0]

Tenho mais isso de css..

 

body { background: #EEE;

color: #000; font-size: 11px;

font-family: Verdana, sans-serif;

margin: 0; padding: 0;

text-align: center;

}

#tudo {

background: #FFF;

border: #fff 1px solid;

width: 750px;

margin: auto;

text-align: left;

}

#cabecalho { opacity:1;background: #fff; font-size: 18px; text-align:

center; padding: 30px; }

#menu {

background: #fff;

margin: 0; padding: 0;

}

#menu ul {

margin: 0; padding: 0;

margin-left: 6px;

}

#menu ul li {

display: inline;

}

#menu ul li a {

background: #444;

color: #FFF;

border: 1px #FFF solid;

border-bottom: 1px #000 solid;

float: left;

padding: 5px 7px;

width:21.77%;

text-align: center;

margin: 2px;

text-decoration: none;

}

#menu ul li a:hover {

background: #FFF;

color: #000;

border: #000 1px solid;

border-bottom: none;

text-decoration: none;

}

#meuDiv {

display:none;

}

:target {display:block !important;}

[allex_carvalho 124]

Tem algum JS para alterar o display das DIV's?

[RAFAELLA TEIXEIRA 0]

Não

[allex_carvalho 124]

Tente assim:

<div id="pct2">
	<div id="topo">
		<strong>Título</strong>
		<hr />
		<a href="#">
			<img src="imagem.jpg" alt="consciencia negra" width="852" height="286" class="alignnone size-full wp-image-1160" />
		</a>
		<div id="cabecalho">
			Mais Detalhes
		</div><!-- cabecalho -->
		<div id="menu">
			<ul>
				<li><a href="#regras">Regras</a></li>
				<li><a href="#meuDiv">Observações</a></li>
				<li><a href="#tarDiv">Tarifas</a></li>
				<li><a href="#inclusDiv">Incluso</a></li>
			</ul>
		</div><!-- menu -->
	</div><!-- topo -->
	<div id="tudo">
		<div id="regras" style="padding: 10px; display: none;">Oiiiiiiiiiiiiii</div>
		<div id="meuDiv" style="padding: 10px; display: none;">Olá!!!!</div>
		<div id="tarDiv" style="padding: 10px; display: none;">Hey There!!!!</div>
		<div id="inclusDiv" style="padding: 10px; display: none;">Hello!!!!</div>
	</div><!-- tudo -->
</div><!-- pct2 -->

E no CSS acrescente isso:

 #topo {
	width: 100%;
	float: left;
 }

Só lembrando que nos meus testes tirei o conteúdo abaixo da div 'pct2'.

margin-bottom: -50px; margin-top: -1000px; margin-right: 52px;