Jump to content

Div saiu da posição


Carlos Rocha
 Share

Recommended Posts

Pessoal,

O Documento é: http://www.bateriasadvance.com.br/morrodesaopaulo.inf.br/, nele tenho um documento com uma estrutura assim:

.......
 <div id="cabecalho">
<div id="formBox">
  <div id="formTopo"><img src="img/cota.png" width="250" height="143" /></div>
  <div id="form"><?php include("form.php"); ?></div>
</div>
<div id="banner"><?php include("banner.php");?></div>	
 </div>  
 <div id="mensagem"><?php include("mensagem.php"); ?></div>
.........

Essa div mensagem possui a seguinte css:

#mensagem
{
top:500px;
height:100px;
text-align:center;
clear:both;
}

O código da div banner era assim:

<?php
 $banner_string="SELECT id, logo FROM banner";
 $banner = $conexao->query($banner_string);

 if($banner->num_rows==0)
 {
echo "<h2>Banner ainda nã esta cadastrado</h2>";
 }
 else
 {
list($id, $logo)=$banner->fetch_row();

if(file_exists(endereco_banner."/".$logo))
{
  $imagem=endereco_banner."/".$logo;
$foto = "<img src='".$imagem."' width=750 height=463 alt='Banner' title='Banner'";
}
else
{
$foto = "<h2>Sem Imagem</h2>";
}
print $foto;
 }
?>

Após uma solicitação de usar JCarroussel, mudei para:

<?php
$pesquisaBannerString ="SELECT logo FROM banner ORDER BY id desc limit 5";
$pesquisaBannerQuery=$conexao->Query($pesquisaBannerString);

if ($pesquisaBannerQuery->num_rows==0)
{
echo "Ainda não há Banner algum cadastrado!";
}
else
{
?>
 <div id="carrosselBanner">
<ul>
<?php
while(list($nomeBanner)=$pesquisaBannerQuery->fetch_row())
{
if($nomeBanner=="")
{ 
 $linkBanner = "<label style='width:750px; heigth:463px;'>Sem Imagem</label>";
}
else 
{
if(file_exists(endereco_banner."/".$nomeBanner)) 
{
$linkBanner = "<img src='".endereco_banner."/".$nomeBanner."' width='750px' height='463px' />";
}
}
?>
<li><?php echo $linkBanner; ?></li>
<?php 
} 
?>
</ul>
 </div>

 <script type="text/javascript">
       $(window).load(function () {    
       $("#carrosselBanner").jCarouselLite({
             btnPrev : '#prev0',
             btnNext : '#next0',
             auto    : 1,
             speed   : 10000,
             visible : 1
       })
 })
 </script>   

<?php 
}
?>

O que acontece é que no modo sem o JCarroussel, a div mensagem ficava abaixo da div cabecalho sem problemas. Mas após a inclusão do JCarroussel, ela foi pra baixo da div cabecalho e não há nada que eu faça que jogue ela para o lugar dela.

Podem me ajudar fazendo favor?

Edited by carcleo
Link to comment
Share on other sites

@charset "utf-8";
/* CSS Document */
*
{  
 margin:0 auto;
 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.titulos
{
color:#009;
font-size:26px;
font-weight:bold;
font-style:italic;
}
.campos
{
background-color:#363636;
color:#FFF;
width:200px;
height:30px;
border:none;
margin:2px auto;
padding:4px;
}
select
{
background: url(checkbox.png) no-repeat;
}
input[type=button]
{
background-color:#C60;
color:#FFF;
width:150px;
height:30px;
margin:2px auto;
padding:4px;
}
#topo, #cabecalho, #mensagem, #portais, #imagens, #envieFotos, #anuncios, #base, #fim
{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
}
#topo
{  
height:100px;
}
#tarja
{
position:absolute;
top:100px;
width:100%;
height:450px;
background-image:url(../../img/fundo.png);
}
#cabecalho
{
top:120px;  
height:463;
}
 #formBox
 {
  position:absolute;
  text-align:center;
  float:left;
  width:250px;
  height:463px;
  z-index:3;
 }
  #formTopo
  {
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius:  10px 10px 10px 10px;
	 border-radius:  10px 10px 10px 10px;
	 border: 0px solid #95A9B3;
	 top:0;
  }
  #form
 {
	width:240px;
	background-color:#424242;
	height:320px;
	-webkit-border-radius: 0px 0px 10px 10px;
	-moz-border-radius:  0px 0px 10px 10px;
	 border-radius:  0px 0px 10px 10px;
	 border: 0px solid #95A9B3;
 }
 #banner
 {
  position:absolute;
  float:right;
  width:750px;
  margin-left:220px;
  height:463px;
  z-index:2;
 }
 #sombra
 {
  position:absolute;
  float:right;
  top:400px;
  width:1000px;
  z-index:1;
 }
#mensagem
{
top:500px;  
height:100px;
text-align:center;
}
#portais
{
top:585px;  
height:180px;
}
#imagens
{
top:765px;  
height:320px;
}
 #destaques
 {
  float:left;
  width:250px;
 }
 #galeria
 {
  float:left;
  width:450px;
  text-align:center;
 }
 #midiaSocial
 {
  float:left;
  width:250px;
 }
#envieFotos
{
text-align:center;
top:1115px;  
height:60px;
clear:both;
}
#anuncios
{
top:1175px;  
height:140px;
}
#base
{
top:1315px;  
height:200px;
background-color: #79C143;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius:  10px 10px 10px 10px;
 border-radius:  10px 10px 10px 10px;
 border: 1px solid #95A9B3;
 padding:10px;
}
 #contato
 {
  float:left;
  width:320px;
 }
 #barra_1
 {
  float:left;
  width:15px;
 }
 #newsletter
 {
  float:left;
  width:330px;
 }
 #barra_2
 {
  float:left;
  width:15px;
 }
 #pagamento
 {
  float:right;
  width:320px;
 }
#fim
{
top:1515px;  
height:100px;
clear:both;
}
Edited by HappyHippyHippo
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Pois é, desculpe e obrigado.

Eu tentei de várias maneiras, acerta uma coisa e torna a outra torta.

Nada dá certo. Vou tentando devagar. Eu tenho muita dificuldade com CSS.

Quando trabalho com table eu sei onde cada coisa vai mas com css eu não consigo.

Novamente, obrigado!

Link to comment
Share on other sites

Oh amigo, parece que você não conseguiu me entender.

Eu disse que já fiz isso. Mas quando o faço, os outros elementos ficam todos tortos e ai começa a minha dificuldade.

Tudo que eu tento só entorta mais, Essa foi a melhor maneira que consegui até agora.

Se puder me ajudar, agradeço, senão puder, agradeço da mesma forma.

Veja um e outro arquivo.

Tem uma diferença entre eles que não consigo achar. Um o layout fica certo, com o outro: torto. é só isso. Só essa ajuda que quero. Encontrar a diferença.

Enviei o id teamwier

Edited by carcleo
Link to comment
Share on other sites

Retirei os position::absolute como orientaste-me.

Agora segue as correções que preciso:

A) A caixa que contem o jpg Faça agora sua cotação + O formulário + O banner, precisam subir até 20px antes do topo da tarja azul.

B) O banner precisa se deslocar à esquerda até se encontrar com o formulário ficando abaixo deste.

C) A sombra logo abaixo do Banner precisa ficar abaixo dele e aparecendo só um pedaço apenas.

D) Quando o bloco subir, obviamente, todo o restante da pagina deve subir junto.

São essas as modificações que preciso..

Carlos

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.