-1

Estou treinando CSS, comecei a aprender faz pouco tempo, junto com HTML é claro.
Aprendi em HTML algumas coisas básicas, não vou me detalhar muito, no CSS aprendi padding, margin, float, inline-block, posicionamentos estáticos, relativos, absolutos e fixos, e alguns métodos de estilização de texto.
Estou treinando o CSS construindo uma HomePage estilo bots do discord. Gostaria de posicionar os links no canto superior direito, mas não estou conseguindo, já tentei usar float, mas não dá muito certo pois, quando uso float e posiciono no lado direito da página, não consigo subir os links para cima através do margin-bottom...

/* LIMPAR FORMATAÇÃO PADRÃO */

* {
  margin: 0;
  padding: 0;
}


/* LAYOUT */

#area-cabecalho {
  background: #2b2b2b;
  height: 110px;
}

#logo-cabecalho {
  color: white;
  font-size: 2em;
  padding: 15px 0px;
  margin-left: 200px;
  font-family: American Typewriter, serif;
}

a {
  color: white;
}

body {
  background: #363636;
}
<div id="area-cabecalho">
  <!-- ÁREA DO CABEÇALHO - INICIO -->
  <div id="logo-cabecalho">
    <h1>Borhnag</h1>
  </div>
  <div id="links">
    <a href="">Comandos</a>
    <a href="">Docs</a>
    <a href="">Suporte</a>
    <a href="">Convite</a>
  </div>
</div>
<!-- ÁREA DO CABEÇALHO - FINAL -->

Imagem do site

3 Respostas 3

-2

você precisa usar algum manipulador de layout como grid ou flex. Como sei mais de flex, ai vai minha opinião:

#area-cabecalho {
    align-items: center; // alinha verticalmente os itens do seu cabecalho
    display: flex;
    flex-direction: row; // usa flex com row
    gap: 14px;
}

#logo-cabecalho {
    flex-grow: 1; // expande o logo, empurrando os links para a direita
}

#links {
    align-items: center; // alinha verticalmente os link no centro
    display: flex;
    flex-direction: row;
    gap: 14px; // espaço entre os links
}
2
  • Outra coisa, recomendo que você utilize classes ao inves de ID. ë uma boa pratica da comunidade. Commented 29/08 às 20:46
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 29/08 às 21:17
-3

me parece que o problema está na formatação da página. Você criou a div id="logo-cabecalho" mas não criou nenhuma formatação para a div id="links", então a página está assumindo o default.

Crie no seu CSS abaixo do #logo-cabecalho o:

#links {
   ...
}
-3

Como você está começando agora com o CSS e quer posicionar o conteúdo dos links para a direita, já que foi isso que entendi, a forma mais fácil é o alinhamento de texto mesmo. Neste primeiro caso, seria assim:

#links {
    text-align: right;
}
<div id="links">
  <a href="">Comandos</a>
  <a href="">Docs</a>
  <a href="">Suporte</a>
  <a href="">Convite</a>
</div>

Agora caso você queira uma solução mais elegante que consiga mudar a posição de qualquer elemento da página, você pode usar o flexbox. Neste caso ficaria assim:

nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
<nav>
  <div id="links">
    <a href="">Comandos</a>
    <a href="">Docs</a>
    <a href="">Suporte</a>
    <a href="">Convite</a>
  </div>
</nav>

Também tem como por grid e com classes específicas de bibliotecas css, como por exemplo o bootstrap. Mas acredito que com uma dessas duas soluções você já consegue resolver o problema.

Eu não curto muito usar o "float" porque ele é muito limitado, principalmente pro mobile, e pode causar algum desses problemas que você acabou de citar na pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .