HTML - CSS - Javascript

Bootstrap

HTML

CSS

JavaScript

Front-end

06/07/2018

Estou tentando criar um site porém meu Slideshow está sendo afetado por meu Menu
Pq isso ocorre?
Creio que a imagem esteja sobrepondo o menu, mas como eu daria prioridade para uma...
Tentei upar no github, porém sou iniciante, como vocês já devem ter percebido :/
https://gist.github.com/Kermec/10a6c9908fa9c0b85c609b4a01e95388 <--Tem os códigos porém UPEI no MediaFire que está completo com a pasta do projeto
http://www.mediafire.com/folder/lov0iav3ankgy/HTML-616
Bruno

Bruno

Curtidas 1

Melhor post

Aparecida Gonçalves

Aparecida Gonçalves

09/07/2018

Olá Bruno,
tudo bem?
Eu baixei seus arquivos para testar e se você tentar adicionar na sua classe .menu {position: absolute; z-index: 20;} o seu problema de sobreposição (em relação ao seu banner) se resolve.
Por outro lado, acho que seria interessante para você ganhar tempo e tambem para testar outras possibilidades do HTML, o uso dos códigos prontos disponibilizados no site GetBootstrap.
Lá (por exemplo nesse link: http://getbootstrap.com/docs/3.3/examples/carousel/) você encontra o HTML com o menu e os slides de maneira que pode aprender a trabalhar a estrutura do Bootstrap, além de ser muito interessante você já utilizar algo que seja responsivo. Ou seja, que você consiga abrir em celulares ou tablets de forma que o conteúdo da sua pagina se adapte a largura da tela dos dispositivos, trazendo conforto para a pessoa que está navegando no seu site.
E por fim, usando ou não a estrutura que o Bootstrap oferece, lembre-se sempre de dividir o seu conteúdo em divs. Dessa forma, você consegue trabalhar no seu CSS a classe referente aquele espaço com mais flexibilidade.
Exemplo:
<body>
    <div class="menutopo">
      <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top">
	....seu conteudo....
	</nav>
	</div>
    </div>
    <div class="slidehome">
      ....suas imagens....
    </div>
    <div class="textohome">
      <h1>Titulo</h1>
	<p>..seu texto..</p>
    </div>
    <footer>
	<p>Créditos</p>
   </footer>
</body>

Sobre responsividade o Bootstrap trabalha um conceito de dividir a tela em 12 partes, e ai você pode entender melhor sobre isso fazendo os testes, como esse:
<div class="row">
  <div class="col-md-8">Div com 8 colunas</div>
  <div class="col-md-4">Div com 4 colunas</div>
</div>

E lendo a aba Grid System que faz parte da Documentação do Bootstrap.
Hoje a versão atual é a 4.1.
Espero de alguma forma ter ajudado!
Bom estudo!
Cida Luna.
GOSTEI 2

Mais Respostas

Bruno

Bruno

06/07/2018

Muito obrigado pela ajuda e tudo mais que me informou.
Estou tentando começar a aprender Html/Css porém ainda estou um pouco perdido por onde começar e depois talvez aprender um pouco sobre JavaScript que se atrela também ao desenvolvimento web.
Agradeço novamente pela ajuda e esclarecimento! :)
GOSTEI 1
POSTAR