Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
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/

 

Editado por DiF
  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
 

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

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






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

×