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

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

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