sistema operacional Posicionamento html/css

[FioDuMaLL 24]

A algum tempo me deparei com uma certa dificuldade, onde acabei resolvendo com algumas gambiarras em js, andei pensando novamente a respeito, e queria saber se alguém conhece algum método mais prático utilizando apenas as práticas de html/css.

Vamos para o problema:

 

Temos um site onepage (apenas uma páginas com diversas divs,sections,articles...), nesse site temos um menu simples com href="#IdSeção", quando clicamos em qualquer link do menu, ele navega até a seção da pagina.

Até ai, sem problema nenhum.

 

Agora iremos fixar o menu no topo, dessa forma, podendo rolar o scroll até o final da página, e o menu continuará no topo.

Porém ao fazer isso, quando clicamos em qualquer link a partir do menu, o menu fica por cima do início do conteúdo.

O que deveria ocorrer, seria a seção ficar posicionada corretamente abaixo do menu fixado.

 

Aguardando opiniões a respeito.

@ edit

 

Após clicar no link "meio" do menu.

Como deveria ficar:

 

 

 

Como fica:

 

 

 

Code:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

[@rnxn 353]

Ué, não use posição fixa então, essa propriedade mantém o elemento posicionado em relação a tela.

Use posição absoluta ou relativa.

 

E sem ver código, nem tem muito o que responder.

[FioDuMaLL 24]

A propriedade fixa é justamente posicionar em relação a tela, e é isso que quero hahsudhaus.

em qualquer parte do site, tu consiga ver o menu no topo, com absoluta ou relativa, tu só conseguiria ver o menu, rolando o scroll pro topo.

Sobre o código, n tem muito segredo, vamos pensar como divs.

varias divs com conteúdo, sendo o menu com propriedade fixa no topo.

Se eu animar, acabo fazendo bonitinho aqui pra ter uma noção melhor.

[Juliana~* 26]

kkkk acontece, é normal.

 

Você pode fazer assim

 

<div id="fixo">

<!-- deixa essa fixa -->

</div>

<!-- Supondo que a altura do menu fixo seja 100px, deixe esse assim: -->

<div id="all" style="position:relative; top:100px /*ALTURA DO ELEMENTO FIXO*/; left:0;">

 

RESTO DO SITE DENTRO DA DIV ALL

 

</div>

[FioDuMaLL 24]

Fiz os testes aqui, mas ainda não cheguei no esperado.

Sem colocar div com posição relativa:

 

Ao abrir o site:

 

 

 

 

 

Ao clicar no link meio:

 

 

 

 

 

Ou seja, tanto ao abrir o site e tanto ao clicar no link, o menu fixado fica por cima do conteúdo.

 

 

Colocando a div com posição relativa:

 

Ao abrir o site: (aqui o problema é resolvido)

 

 

 

 

 

Ao clicar no link meio: (aqui o problema permanece)

 

 

 

 

 

Obs: com a div relativa incluída, ao descer a pagina, os link do menu ficam inativo, como se fosse apenas texto, impossibilitando de clicar, só é possível os clicks nos links se a pagina estiver no topo.