Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

duvida sobre posicionamento dentro da pagina

<html>
<nav class = links>

 <ul class = "produtos">
   <h2>generico</h2>
    <li> <a href="#"> gen</a></li>
    <li> <a href="#">gen</a></li>
    <li> <a href="#"> gen</a></li>
</ul>
<ul class = "cursos">
  <h2>gen</h2>
  <li> <a href="#"> gen</a></li>
  <li> <a href="#">gen</a></li>
  <li> <a href="#"> gen</a></li>
</ul>
</nav>

<section class = "conteudo">
    <p>algum texto para testar</p>
</section>
</html>

CSS:

.links{
  width: 100%;
  height: auto;
  background-color: purple;
  clear:both;
 position: absolute;
}
nav ul li{
  display: inline-block;
  font-size: 20px;
  border: solid black;
 background-color: grey;
}
nav ul li:hover{
  background-color: white;
}
.produtos{
  float: left;
}
.cursos{
  float: left;
}
.conteudo{
  width: 70%;
  position: absolute;
  background-color: yellow;
  clear: both;
}

eu queria deixar meu section em baixo do meu nav, mas ou ele fica em baixo do header, ou ele fica no meio do nav, usar margin é muita gambiarra pra isso? tem como resolver isso só com float? e se eu quisesse colocar um aside ao lado do section e embaixo do nav, ainda teria como resolver com float? eu acho q estou usando muita gambiarra para posicionamento da minha pagina

1 resposta
solução!

Lucas, bom dia!

Pra deixar o section embaixo do nav, primeiro precisamos tirar os floats pois eles fazem os elementos subirem, agora que não tem mais float, podemos tirar os clear: both pois tudo está um embaixo do outro. A questão é, os <ul> estão um embaixo do outro, como solução podemos ir no pai desses elementos e dizer: - Eu quero que seus filhos fiquem lado a lado, coloca eles de forma flexível pra mim?. Pra isso colocamos um display: flex; em .links. Mas agora o <section> subiu, mas porquê? O .links ainda está com uma posição absoluta. Só precismos tirar essa propriedade e estará tudo em ordem!

Espero ter ajudado e bons estudos!