HTML Navbar precisa encobrir os itens d contagem do carousel

Mateus Martinez Rosa · 10 de março de 2018

Olá boa tarde, quando clico no meu do navbar, os itens do carousel se sobrepõe ao mesmo, como resolver?

Desde já obrigado!!

DiF · 10 de março de 2018

@Mateus Martinez Rosa Olá, por gentileza poderia explicar melhor o que acontece?

Só por imagens assim fica difícil demais. Se possível poste seus códigos. Passando uma vista rápida no problema, parece ser problema de CSS na definição das regras.

groutmoustache · 11 de março de 2018

@DiF

Ele está falando do z-index. O carousel deve estar com um valor mais alto que os itens do menu hamburguer.

@Mateus Martinez Rosa

Até podemos te orientar a colocar um valor extremo para a propriedade z-index do navbar, mas não é a forma correta. Acredito que o melhor é você nos informar qual versão do framework e postar os códigos, para a gente te dar a orientação correta.

Além disso, por enquanto que lemos os códigos, você pode estudar sobre a propriedade z-index. Segue os links:

W3Schools;
DevMedia.

DiF · 11 de março de 2018

@Joao_Lucaas Eu sei, mas é imprescindível que o usuário poste o código para análise. Sem isso seria responder na base do achismo.

groutmoustache · 12 de março de 2018

@Dif Tive impressão que você tinha falando não ter entendido. Mas tu ta certo!

Mateus Martinez Rosa · 12 de março de 2018

Olá galera, perdão....deveria ter me atentado em mostrar o código!!

<!DOCTYPE html>
<html lang="pt-br">
   <head>
      <title></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
      <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
      <link rel="stylesheet" type="text/css" href="estilo.css">
      <script type="text/javascript" src="js/funcoes.js"></script>
   </head>
   <body>
      <nav class="w3-sidebar w3-black w3-animate-top w3-xxlarge" style="display:none;padding-top:150px" id="mySidebar">
         <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-black w3-xxlarge w3-padding w3-display-topright" style="padding:6px 24px">
         <i class="fa fa-remove" ></i>
         </a>
         <div class="w3-bar-block w3-center">
            <a href="index.html" class="w3-bar-item w3-button w3-text-grey w3-hover-black" style="text-decoration: none;">Home</a>
            <a href="contato.html" class="w3-bar-item w3-button w3-text-grey w3-hover-black" style="text-decoration: none;">Contato</a>
            <a href="Sobre.html" class="w3-bar-item w3-button w3-text-grey w3-hover-black" style="text-decoration: none;">Sobre</a>
         </div>
      </nav>
      <div>
         <div>
            <span class="w3-xxlarge w3-white w3-right" style="padding: 15px;" onclick="w3_open()"><i class="fa fa-bars"></i></span> 
            <div class="w3-clear"></div>
            <header class="w3-center w3-margin-bottom">
            <div class="container">
               <div class="row" style="margin-bottom:50px">
                  <div class="col-md-6 col-12">
                     <img src="_imagens/logo_interiordesign.png" alt="Logo tipo Design de interiores Adriana" class="img-fluid">
                  </div>
                  <div class="col-md-6 col-12"">
                     <h1 style="margin-top:68px;">Adriana Maria Evaristo</h1>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
         <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
         </ol>
         <div class="carousel-inner">
            <div class="carousel-item active">
               <img class="d-block w-100 w3-opacity img-fluid" src="_imagens/foto-adriana-sobre.png" alt="First slide">
               <div class="carousel-caption d-none d-md-block">
                  <h4>Biografia</h4>
                  <p class="texto">É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível de uma página quando estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível.</p>
               </div>
            </div>
            <div class="carousel-item">
               <img class="d-block w-100 w3-opacity img-fluid" src="_imagens/foto-adriana-sobre1.png" alt="Second slide">
               <div class="carousel-caption d-none d-md-block">
                  <h4>Biografia</h4>
                  <p class="texto">É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível de uma página quando estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível.</p>
               </div>
            </div>
            <div class="carousel-item">
               <img class="d-block w-100 w3-opacity img-fluid" src="_imagens/foto-adriana-sobre2.png" alt="Third slide">
               <div class="carousel-caption d-none d-md-block">
                  <h4>Biografia</h4>
                  <p class="texto">É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível de uma página quando estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível.</p>
               </div>
            </div>
            <div class="carousel-item">
               <img class="d-block w-100 w3-opacity img-fluid" src="_imagens/foto-adriana-sobre2.png" alt="Third slide">
               <div class="carousel-caption d-none d-md-block">
                  <h4>Biografia</h4>
                  <p class="texto">É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível de uma página quando estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível.</p>
               </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>cl
         </div>
      </div>
      <footer class="w3-container w3-padding-32 w3-black w3-center w3-xlarge" style="margin-top:128px; ">
         <!--w3-opacity-->
         <a href="https://www.facebook.com/profile.php?id=1150088510"><i class="fa fa-facebook-official w3-hover-opacity redeF" style="color: white;"></i></a>
         <i class="fa fa-instagram w3-hover-opacity redeI"></a></i>
         <i class="fa fa-twitter w3-hover-opacity redeT"></i>
         <i class="fa fa-linkedin w3-hover-opacity redeIN"></i>
         <p style="font-size: 10px;" class="w3-medium">Developed by: &nbsp<a href="https://www.facebook.com/mateus.martinezrosa" target="_blank" style="font-size: 13px; text-decoration: none; color: white;"; class="w3-hover-text-blue">Mateus Martinez Rosa</a></p>
      </footer>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>   
   </body>
</html>

DiF · 12 de março de 2018

@Mateus Martinez Rosa Só o HTML não serve. Precisa mostrar as suas regras CSS. Como disse anteriormente, como está tendo uma sobreposição de elementos, o erro provável é no CSS.

Ratificando o que o @Joao_Lucaas mencionou, o Z-index é o único atributo que faz a sobreposição. Desde que não sejam elementos irmãos adjacentes.

O que notei é que no seu código há diversos CSS inline nos elementos. Este tipo de regra tem grau de precedência maior. Ou seja, se você definir inline que o elemento vai ter cor vermelha, se você colocar no CSS que ele vai ter cor azul, a cor que irá ser mostrada é o vermelho. Porque o grau de precedência inline vem antes.

Isso se chama Cálculo de especificidade.

Na maioria das vezes estes conflitos podemos resolver com um simples" !important " que serve para sobrescrever a regra "original".

Exemplo:

<p class="vermelho">Teste</p>
<p class="vermelho azul">Teste2</p>

.vermelho{
  color: red;
}

.azul{
  color: blue !important;
}

Entrar

HTML Navbar precisa encobrir os itens d contagem do carousel

Posts recomendados

Mateus Martinez Rosa

DiF

groutmoustache

DiF

groutmoustache

Mateus Martinez Rosa

DiF

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos