Ir ao conteúdo
  • Cadastre-se
Mateus Martinez Rosa

HTML Navbar precisa encobrir os itens d contagem do carousel

Recommended Posts

@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.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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:

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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/tether@1.2.4/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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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;
}

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×