0

Tenho duas DIVs, sendo que a inferior está sobrepondo a superior, ou seja, a DIV propaganda_rotativa está sobrepondo a DIV barra_inf. Mas quando faço o teste só com este trecho da CSS funciona. Qual das minhas CSS está causando esta situação? Abaixo coloquei a versão completa da minha CSS para verificação.

Parte que funciona: https://jsfiddle.net/gladisonperosini/cuc88L52/

Parte completa, mas que sobrepõe: https://jsfiddle.net/gladisonperosini/cuc88L52/2/

Veja o trecho do código CSS:

CSS:

div.barra_inf{
    width: 100%;
    height: 50px;
    max-width: 1300px;
    margin: 0px auto;
    background-color: #FF8922;
}
div.propaganda_rotativa{
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
}
div.propaganda_rotativa img{
    max-width: 1200px;
    width: 100%;
    max-height: 180px;
    height: auto;
}

Veja o CSS completo:

*{
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}
div.principal{
    background-color: #ccc;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
}
div.cabecalho{
  width: 100%;
  overflow:auto;
  background-color: #FF8922;
  border-bottom:#DE5207 3px solid;
}
/* CABEÇALHO */
div.logo{
  float: left;
  background-image:url(../imagens/logo.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 21.42857142857143%; /* 300px */
  height: 80px;
}
div.buscaguia{
  float:left;
  width: 39.28571428571429%;
  height: 80px;
  line-height: 80px;
}
div.menutopo{
  float:right;
  width: 39.28571428571429%;
  height: 80px;
  line-height: 100px;
}
div.super_banner{
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: auto;
}
div.super_banner img{
    max-width: 1200px;
    width: 100%;
    max-height: 500px;
    height: auto;
}
div.propaganda_rotativa{
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: auto;
    display: block;
}
div.propaganda_rotativa img{
    max-width: 1200px;
    width: 100%;
    max-height: 180px;
    height: auto;
}
div.barra_inf{
  width: 100%;
  height: 50px;
  max-width: 1300px;
  margin: 0px auto;
  background-color: #FF8922;
}
div.buscaguia form{
  left: 50%;
  text-align: center;
}
div.buscaguia button{
  background-color:#F4F4F4;
  border: 0px;
  padding: 5px;
  box-sizing: border-box;
}
div.buscaguia input{
  background-color:#F4F4F4;
  border: 0px;
  padding: 5px;
  box-sizing: border-box;
}
header{
  background-color: #fff;
  margin-bottom: 10px;
}

header nav a{
  color:#ffffff;
  text-decoration: none;
  font-size: 15px;
}
header nav ul{
  margin: 0px;
  padding: 0px;

}
header nav li{
  float:right;
  display: inline;
  padding: 0 20px 0 20px;
  line-height: 80px;
}

HTML:

<div class="barra_inf">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div>
<div class="propaganda_rotativa">
    <p>
        <img src="./propaganda_rotativa/supportgv.png" />
    </p>
</div>

Se alguém souber me socorrer...

5
  • 1
    Você esqueceu de fechar a primeira <div>. Agora, se você diminuir o tamanho da janela, o <p> fica com um tamanho grande e acaba saindo da <div> pai pois ela está com altura definida.
    – Ricardo
    12/06/2017 às 18:51
  • Não entendi o porque da sobreposição
    – Gladison
    12/06/2017 às 18:56
  • É que não consegui identificar essa sobreposição que você disse. No fiddle que você mencionou, sua primeiro <div> não estava fechada, então ocasionada uma leve sobreposição da imagem na div. Só que se diminuirmos a largura da janela, o texto da <div> acaba saindo do limite e a imagem sobrepõe esse texto... é isso?
    – Ricardo
    12/06/2017 às 19:35
  • Não consigo ver qualquer sobreposição em nenhum dos dois exemplos... :/ 12/06/2017 às 19:41
  • Os dois exemplos abriram iguais. 12/06/2017 às 19:42

1 Resposta 1

0

Seu HTML parece meio bagunçado. Me parece que tem DIV aberta que deveria estar fechada em outros pontos e muitos elementos desnecessários. Tenta assim:

HTML:

<div class="barra_inf">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="propaganda_rotativa">
    <img src="http://www2.uol.com.br/guiadolitoral/imgnoticia/conheca-a-historia-por-tras-da-iconica-foto-de-einstein-mostrando-a-lingua-4030-f1.jpg" />
  </div>

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 .