Div saiu da posição

[Carlos Rocha]

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 March 5, 2014 by carcleo

[HappyHippyHippo]

quando tirares os posicionamentos absolute de todos os div's e arranjares a página, diz que então ver-se-á qualquer coisa

Edited March 5, 2014 by HappyHippyHippo

[Carlos Rocha]

onde viste posicionamentos absolute?

[HappyHippyHippo]

@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 March 5, 2014 by HappyHippyHippo

[Carlos Rocha]

Verdade, estava boiando.

Mas, fiz o teste aqui e o layout ficou todo errado.

Será não tem um recurso para altera só na pagina do banner.php que resolva o problema?

[HappyHippyHippo]

eu disse para tirares os absolutes e corrigires de maneira aceitável ...

[Carlos Rocha]

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!

[Carlos Rocha]

eu disse para tirares os absolutes e corrigires de maneira aceitável ...

Pode me ajudar?

Já fiz isso algumas vezes mas acontece que acerta uma coisa, mas falha outra.

Por exemplo: preciso do position para usar z-index. Tiro o position e as divs saem do lugar em z.

[Carlos Rocha]

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 March 6, 2014 by carcleo

[Carlos Rocha]

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