Ir para conteúdo

POWERED BY:

Arquivado

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

- KbeçãO -

Banner fica por cima

Por , em Desenvolvimento frontend

Recommended Posts

- KbeçãO -    0

- KbeçãO -
Postado

Boa tarde !

estou terminando uma pagina.

na parte de "Prêmios", tem 2 fotos, nelas, apliquei o efeito popbox, em js,

que, ao clicar nas fotos, as mesmas ampliam na tela.

Mas ao ser apliadas, as fotos ficam por baixo do banner e ñ era pra isso acontecer !!

 

olha só:

pagina normal:

erromenu.gif

 

foto ampliada:

erromenu2.gif

 

e agora os css e html do banner

 

banner:

/css #banner{

float: left;
width: 615px;
height: 140px;
margin: 5px;
border: 1px solid #EAEAEA;	

}

//html
<div id="banner">
<?php include('banner_maes.html'); ?>
</div>

 

tentei com z-index: -1;

mas n deu...

oq eu faço ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

HUm caro colega, vejoamos...

 

Primeiramente as imagens possuem css?

Se sim, post aqui o codigo pra eu ver.

 

Esta faltando mais codigo para podermos analizar, porem pelo que observei voce esta utilizando um float:left na div do banner, muitas veses isso resulta no ocorrido com voce.

 

Preciso de mais detalhes do codigo onde esta a imagem(o css) posta ai que respondo rapidinho.

Compartilhar este post

Link para o post
Compartilhar em outros sites

- KbeçãO -    0

- KbeçãO -
Postado

então vamos la ...

div da foto:

 

<div id="ft">

	<a href="#"><img src="imgs/premio_ascon.jpg" pbshowcaption="true" 
	pbcaption="Da esquerda p/ direita:<strong>Dr Luiz Henrique</strong> (proprietário da residencia),
	<strong>Dra Melissa Paro (arquiteta)</strong>, <strong>Dra.Vanessa Paro</strong> (proprietárias da residencia), 
	<strong>Paulo Silas</strong> e <strong>Ricardo Maciel</strong> (Proprietários da SIM Engenharia)."
	style="width: 300px; height: 221px;"
	class="PopBoxImageSmall" title="Clique para almentar / diminuir"
	onclick="Pop(this,50,'PopBoxImageLarge');"></a><br/> //esse mundarel de codigo aqui, e do efeito popbox.js

	<p>
	Da esquerda p/ direita: <strong>Dr Luiz Henrique</strong> (proprietário da residencia), 
	<strong>Dra Melissa Paro (arquiteta)</strong>, <strong>Dra.Vanessa Paro</strong> (proprietárias da residencia), 
	<strong>Paulo Silas</strong> e <strong>Ricardo Maciel</strong> (Proprietários da SIM Engenharia).
	</p>



</div>

//css dessa div:
#ft{

width: 300px;
margin: 10px;
float: left;

}

#ft img{

float: left;
width: 300px;

}
#ft p{

float: left;
font-size: 8pt;

}

 

a div topo da index.php

<div id="topo">

				<div id="logo">
					<a href="?pg=boasvindas"><img src="imgs/sim logo.png" width="150" border="0" alt="" /></a>
				</div>

				<div id="banner">
				<?php include('banner_maes.html'); ?>
				</div>
					<div id="acesso" align="center">

					   <?php 
							if(!isset($_SESSION["usuariologado"])){

							echo "

								<form method='post' action='resp_log.php'>
									<fieldset align='center'>
										<legend>..:: Área Restrita ::..</legend>
										<label><strong>Login:</strong>
										</label><br /><input type='text' name='nome'/><br />
										<label><strong>Senha:</strong>
										</label><br /><input type='password' name='senha'/><br />
									</fieldset>

									<div id='button_container'>

										<button id='enviar' class='but' type='submit'>Entrar</button>
										<button class='but type='reset'>Limpar</button>

									</div>
								</form>

							";

							}else{


							echo "

									<legend>.:: Bem Vindo(a) ::.</legend>


										{$ico} <br /><br />

										{$nome}

									<a href='logout.php'><img src='imgs/icones/logout.png' width='60' border='0' alt='' class='out' /></a>
								";
							}
						?>

					</div>
</div>

 

agora todo o css do topo:

/* -- // -- */

#topo{

width: 960px;
height: 154px;
float: left;
padding: 5px;



}

/* -- // -- */	

#banner{

float: left;
width: 615px;
height: 140px;
margin: 5px;
border: 1px solid #EAEAEA;	

}

#acesso { /* Area Login */

       width: 157px;
       height: 133px;
       float: right;
       border: 2px #EAEAEA solid;
       margin: 3px;
	padding: 3px;

}

#acesso fieldset {

       float: right;
       overflow: hidden;
	border: 0px;


}

#acesso legend{

     font-size: 10pt;
  width: 157px;
  margin-bottom: 10px;  


}

#acesso label {

font-size: 9pt;
float: left;
margin-left: 5px;

}

#acesso input {

float: left;
margin-right: 5px;
width: 152px;
height: 15px;

}

#button_container {

	width: 157px;      


}
#button_container button {

       float: left;
       width: 50px;
	height: 20px;
	margin: 5px 3px 0 3px;

}

.but {

font: 13px Arial, sans-serif; 
font-style:inherit;
border: 1px solid;

}

 

quais outros codigos precisam?

so pra constar, usei esse mesmo efeito popbox em outras fotos, e o mesmo erro ocorreu.

 

olha como esta o z index do zoom do pop box, se tiver pelo menos 10, joga z-index:1 na div do banner ou aumenta a z-index do popbox

 

cara...

o js e muuuuuuuuuuuuuuito grande...

e eu num intendo nda de js...

x/

to procurando na net aqui o efeito pra mostrar pra vcs...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

Esquece o JS, seu problema eh CSS, tenta colocar no css, na classe ft, um position:absolute; e um z-index:99;

 

OBS: Se ja estiver utilizando z-index, coloque o da classe ft como o maior.

 

Testa e me avisa vlw.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jhony ZaM    1

Jhony ZaM
Postado

achei o site onde baixei...

 

http://www.c6software.com/Products/PopBox/documentation.aspx

 

aqui tem os detalhes, e a parte de download

 

#ft img{

float: left;
width: 300px;
position: absolute;
z-index: 99;

}

 

nda....

 

Nao na ft img e sim na ft

#ft{

       width: 300px;
       margin: 10px;
       float: left;
position: absolute;
z-index: 99;

}

 

Se ainda sim nao funcionar vou revisar o codigo depois com mais calma e posto

Compartilhar este post

Link para o post
Compartilhar em outros sites

- KbeçãO -    0

- KbeçãO -
Postado

assim nem olhei muito codigo...mas so saber que tem float ate no topo.

 

recomendo colocar e testar o uso do clear:both;

 

atualizado

 

a div tem nome de logo e no css tem topo??? e do mesmo lugar?

 

n n, a div topo, e onde vai o topo da pagina, entao ai entra a logo no canto, o banner e a area de login, mas cada um com seu respectivo css....

 

a div do banner e so essa:

<div id="banner">
<?php include('banner_maes.html'); ?>
</div>

 

achei o site onde baixei...

 

http://www.c6software.com/Products/PopBox/documentation.aspx

 

aqui tem os detalhes, e a parte de download

 

#ft img{

float: left;
width: 300px;
position: absolute;
z-index: 99;

}

 

nda....

 

Nao na ft img e sim na ft

#ft{

       width: 300px;
       margin: 10px;
       float: left;
position: absolute;
z-index: 99;

}

 

nda...

desa forma, perdi todo o alinhamento da pagina e ele ainda ficou por baixo..

acho q tem haver com o swf que tem no html do banner....

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