Ir ao conteúdo
  • Cadastre-se
Pedro Gozzolli

CSS Problema para subir menu

Recommended Posts

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>

 

Ajuda.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

  • Curtir 1
  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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á.}

  • Amei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
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. :P

 

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? :oops:

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

  • Obrigado 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

×