Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

adhenrique

Div

Recommended Posts

Senhores boa tarde.

Sou novo no forum então, caso encontrem algum erro por favor, me corrigam.

 

Bom vamos lá!

Estou desenvolvendo uma page de CMS simples com divs e etc.

Porém, estou quebrando a cabeça com uma div aqui.

 

Tenho a seguinte marcação:

<div class="tudo">

<div class="topo"> titulo e configs de user </div>

<div clas="menu">menu de navegação </div>

<div class="conteudo"> conteudo da pagina </div>

</div>

 

Bom, na tag tudo, que seria minha wrap coloquei position:relative

Na tag topo, coloquei position:fixed

E nas tags, menu e conteudo, position:absolute.

 

O problema é que, desta forma, as divs menu e conteudo, ficam por baixo da div topo fixa.

Onde errei? Podem me ajudar?

 

Segue código css:

body{width:100%; height:100%; margin:0 auto;}

.tudo{position:relative; width:100%; height:100; margin:0 auto;}

.topo{position:fixed; height:50px; width:100%; background:#000;}

.menu{position:absolute; width:250px; height:100%; background:#CCC;}

.conteudo{position:absolute; width:100%; height:100%;}

Compartilhar este post


Link para o post
Compartilhar em outros sites
<div clas="menu">menu de navegação </div>

Vc escreveu "clas"

Compartilhar este post


Link para o post
Compartilhar em outros sites

No caso do topo, você colocou ele "fixed" porque ele vai ficar fixo no topo da página, certo? Então ele obrigatoriamente terá que ficar na frente de todos os elementos da página, para quando der scroll, nenhum elemento dificultar a leitura do conteúdo do topo.

 

E por que você usou "absolute" nos demais elementos? Se não for o caso, tente trabalhar com floats para orientar as divs, muito melhor.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não seria bem um menu. É uma barra com algumas opções a amostra. Como nome do usuario logado, pesquisa e etc...

O Menu fica a esquerda.

Fiz o teste de não atribuir as positions absolute nas demais divs, e funcionou porém, a página cria barra de rolagem.

A sobra do topo de 50px é criada.

Se eu coloco overflow:hidden me resolve mas, e se caso eu necessite que a página role?

 

Queria que, ao tirar as positions absolute das div's, não criasse a barra. Que elas se ajustassem automaticamente à tela!

 

fui claro? :S

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acho que me equivoquei :S
O topo, não seria fixo.

http://jsfiddle.net/epynwaxt/

 

Talvez o fiddle não vai mostrar. Mas se você salvar esse codigo em um html, ao abrir verá que foi criada uma barra de rolagem, 50px da div do topo.

Isso pq atribui height:100% na div do menu. Mas a ideia é que esses 100% correspondam ao restante da página em branco, e nao ao tamanho da tela do meu pc.

É como se a div topo não estivesse ali. E que adicionei uma margin ou padding de 50px.

Compartilhar este post


Link para o post
Compartilhar em outros sites

A tah.

 

Modifiquei

 

Utilizei a unidade "vh" na altura, para preencher a altura total do viewpoint. Também utilizei um calc. Só tem que tomar cuidado pois não sei se todas as versões de navegadores aceitam a unidade "vh" e o calc, então talvez tenha que usar algum prefixo (webkit, moz, etc)...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Perfeito. Era exatamente isso que eu precisava.

Cara não conhecia essa propriedade do css...

Tenho lido algumas coisas sobre mas ainda estou aprendendo. :)

 

Obrigado mesmo pela ajuda.

Agradecido demaaaaaaaais!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.