0

A página é essa:

http://magicforbaby.com.br/

Tem um banner que está encobrindo div's abaixo dele. Já coloquei uma div clear both abaixo dele mas não funcionou.

as div's class="base" e class="final" estão sendo sobrepostas

Alguma saída?

A página em questão é de código

<?php require_once "config.php" ; ?>
<!doctype html>
<html>
  <head>
    <title><?php echo $constantes->getTituloSite(); ?></title>
    <?php  require_once("_global/_meta/meta.ini"); ?>
    <link rel="shortcut icon" type="image/x-icon" href="_img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="_global/_css/estilo.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/site.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/menu.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/jquery.cycle2.css">

    <script type="text/javascript" src="_global/_js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="_global/_js/jquery.cycle2.min.js"></script>
    <!--[if lt IE 9]>-->
      <script type="text/javascript" src="_global/_js/css3-mediaqueries.js"></script>
    <!--[endif]-->
  </head>

  <body>

      <div class="topo">
        <div class="sessoes">
          <div class="logo"><img src="_img/logo.png" /></div>
          <div class="menu"><?php require_once "_required/menu.php"; ?></div>    
        </div> 
      </div>

      <div class="conteudo">
        <div class="sessoes"><?php require_once "indexConteudo.php"; ?></div>
      </div> 

      <div class="base">
        <div class="sessoes"><?php require_once "_required/base.php"; ?></div>
      </div> 
      <div class="final">
        <div class="sessoes"><?php require_once "_required/final.php"; ?></div>
      </div> 

  </body>

</html>

No indexConteudo.php por enquanto só tem o banner dentro de uma div

<div class="banner">
  <?php require_once "_required/banner.php"; ?>
</div>

css

@charset "utf-8";
/* CSS Document */

.topo, .menu, .conteudo, .cont, .base, .final {
    clear:both;
    position:relative;
    width: 100%;
}

.logo, .menu {
    display:inline-block;
    vertical-align:top;
    height:150px;
}

.logo {
    width: 10%;
}

.menu {
    width: 89%;
}

.banner {   
    display: inline-block;
}

.listaCategorias {
    margin:0 auto;
    width: 100%;
    text-align:center;
}

.listaCategorias li {
    display:inline-block;
    vertical-align: top;
    height:300px;
}

.base {
    background-color: #FCB412;
    border-top: 5px #FC0000 solid;
    border-bottom: 5px #FC0000 solid;
    font-size: 12px;
}

.baseEsquerda {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding: 3% auto;
    padding: 5px;
}

.barraBase {
    display: inline-block;
    vertical-align: top;
}

.barraBase .hr {
    display:block;  
    width: 6px;
    height:180px;
    background-color: #FC0000;
    border:none;
}
.baseDireita {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding: 3% auto;
}

.final{
    background-color:#000;
    color: #FFF;
}

  .finalEsquerda, .finalDireita  {
      display:inline-block;
      vertical-align:middle;
  }

  .finalEsquerda  {
      text-align:left;
      width:700px;
  }

  .finalDireita  {
      text-align:right;
      width:290px;
  }
7
  • No caso põe o css, pra vermos...
    – MagicHat
    16/06/2016 às 20:04
  • adicionado ao final da pergunta 16/06/2016 às 20:05
  • Como se quer que fica, qual div tá escondida?
    – MagicHat
    16/06/2016 às 20:07
  • as duas ultimas, a base e a final. pode olhar na estrutura que coloquei aqui aqui na pergunta. Observe embaixo do banner uma div meio amarelada e outra abaixo dela preta aparecendo só as laterais 16/06/2016 às 20:09
  • qual seria o local desejado para elas? elas ocupam todo o width.
    – MagicHat
    16/06/2016 às 20:11

1 Resposta 1

0

Pode tentar fixando suas divs na base.

.final{
    background-color: #000;
    color: #FFF;
    bottom: 0;
}
.base {
    background-color: #FCB412;
    border-top: 5px #FC0000 solid;
    border-bottom: 5px #FC0000 solid;
    font-size: 12px;
    bottom: 34px;
}
5
  • ois é. Porém, como a div banner não tinha dimensões, as div's base e final iriam subir e entrar abaixo da banner. Só resolveu quando coloquei altura na div banner. valeu pelo apoio. 17/06/2016 às 20:08
  • Tem muitas formas de fazer... Depende mto da estrutura do layout... mai legal vi lá ficou bonitão...gj
    – MagicHat
    17/06/2016 às 20:10
  • rsrsr, estou aprendendo. Sou péssimo em visu. Sou mais dado ao funcional mesmo. Tipo webmaster e não designer! kkk 17/06/2016 às 22:41
  • tmb tô aprendendo... mas as vezes quem tá de fora do problema vê o que quem tá dentro não vê.....mas esse se arrumo sozinho, só dei um apoio moral...kkk
    – MagicHat
    17/06/2016 às 22:43
  • Sabe, alguns aqui até dizem que não em detrimento da normas. Mas quem um bom diálogo com quem trabalho sozinho num pequeno negócio ajuda e muito! O cara está perdido no lance, precisa e uma orientação e aí vem a norma e diz: "Não". Chato isso. Mas talvez necessário! 19/06/2016 às 11:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .