CSS Problema para subir menu

Pedro Gozzolli · 27 de janeiro de 2018

Bom dia, gostaria de uma ajuda.

Passei bastante tempo tentando subir este menu para o canto porém não consigo achar o código para fazer isto..

Agradeço a quem conseguir ajudar

Codigo CSS:

body {
  background-image:url(https://png.pngtree.com/thumb_back/fw800/back_pic/00/04/62/325624a61782e94.jpg) ;
    background-repeat: repeat-x;
}
#Centro {
  text-align: center;
  font-size: 50px;
  color: lightblue;
  padding: 35px;  
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    background-color: #;
    text-align: center
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: black;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

Codigo HTML:

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <h1 id=Centro> Pedro's World </h1>
<ul>
  <li><a class="active" href="#home">Inicio</a></li>
  <li><a href="#novidades">Novidades</a></li>
  <li><a href="#contact">Contato</a></li>
  <li><a href="#about">Sobre</a></li>
</ul>
</body>

</html>

M4DAR4VI · 27 de janeiro de 2018

mano, coloca um position:absolute; e coloca um top e já era. assim o seu menu vai subir, tenta ai e me fala.

ul {
  	position:absolute;
  	top:50px; (ou mais, você que sabe)
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
    background-color: #;
    text-align: center

Pedro Gozzolli · 28 de janeiro de 2018

Valeu man, funcionou direitinho! Comecei a estudar pela net CSS/Html agora então to bem leigo e eu não sabia o termo certo pra procurar isso :v

Obrigado!

M4DAR4VI · 28 de janeiro de 2018

Denada, tambem sou um pouco iniciante e tambem estudo css e html pela net, eu sei como é.

Uma dica pra você sobre o position

Temos cinco tipos de position, mais só conheço bem três:

position absolute{que começa a contagem de pixels, a partir do começo do site, ou seja, mesmo o objeto estando em uma div, ele pode sair dessa div sem nenhum problema}

position relative{ele começa a contagem a partir de onde ele estiver ou seja, se você coloca-lo em uma div, ele começara a contar sua posição a partir da div}

e por ultimo o Fixed {basicamente, mantem o objeto na onde ele está.}

Pedro Gozzolli · 29 de janeiro de 2018

Lol, eu ainda não tinha entendido como funcionava, eu ficava testando todas as posições ate eu conseguir mover a imagem kkkk.

Obrigado mais uma vez pela dica, você explicou muito bem e de uma maneira fácil de entender!

DiF · 29 de janeiro de 2018

@Pedro Gozzolli

Ainda com as dicas,

Você pode combinar o Relative com o absolute entre dois elementos que sejam pai e filho.

Por exemplo:

Você tem um DIV contendo uma imagem, e você quer colocar uma tarja preta transparente por cima que fique fixo na parte de baixo da imagem.

Pode-se fazer desta maneira:

<div class="conteiner">
    <img src="imagem.png"/>
    <div class="tarja_preta">Algum texto que explique a imagem</div>
</div>

.conteiner{
  position: relative;
  
}

.tarja_preta{
 position: absolute;
 bottom: 0; 
}

Isso basicamente vai dizer que:

O elemento que contem a classe "conteiner" vai ser o elemento PAI que terá uma posição relativa.

O elemento tarja_preta vai ter a posição absoluta dentro da área do elemento conteiner.

Ou seja, definimos que a tarja_preta, vai ficar bem em baixo(bottom) do elemento conteiner, mas sem sair de dentro dele!

Exemplo online: https://jsfiddle.net/dife/a2h716c5/

Pedro Gozzolli · 2 de fevereiro de 2018

Obrigado pela dica! Eu fico meio confuso nesses elementos de relação mas vou estudar mais e o seu conteúdo ajudou bastante!

groutmoustache · 6 de fevereiro de 2018

Em 28/01/2018 às 14:16, M4DAR4VI disse:

position absolute{que começa a contagem de pixels, a partir do começo do site, ou seja, mesmo o objeto estando em uma div, ele pode sair dessa div sem nenhum problema}

Já que estamos todos aprendendo, vou colaborar para não nos confundirmos.

Dessa maneira, corrigindo o trecho acima, gostaria de falar que o valor absolute não faz com que o elemento se posicione a partir do começo do site, mas com relação ao elemento pai mais próximo e com position declarada.

Exemplo 1

Abaixo, o elemento com id #filho se posicionaria com relação ao elemento com id #pai, o qual não está no começo da página. Isso aconteceria porque o article é pai mais próximo com position declarado. Caso não houvesse nenhum, aí sim, o #filho seria posicionado a partir do começo do site.

<body>
  <section>
    <article id="pai">
      <h1>Lorem Ipsum</h1>
      
      <p>Algum texto aqui...</p>
      
      <footer>
        <p id="filho">Copyright</p>
      </footer>
    </article>
  </section>
</body>

#pai {
	position: relative;
  	margin-left:50%;
}

#filho {
	position: absolute;
  	top: 50px;
}

No comecinho dos meus estudos com CSS, tive uma mesma dúvida e até postei aqui no Clube. E não é que o problema era o position absolute, também?

Dado que é um pouco confuso, espero que peçam mais exemplos, caso não tenham entendido.