Jump to content

Recommended Posts

Posted (edited)

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
Posted (edited)
@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
Posted

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!

Posted

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.

Posted (edited)

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
Posted

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

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
×
×
  • 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.