Ir para conteúdo

POWERED BY:

Arquivado

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

Alejandro

Como dividir menu do conteudo em porcentagem?

Por , em Desenvolvimento frontend

Recommended Posts

Alejandro    1

Alejandro
Postado

Olá pessoal!

 

Estou com um probleminha, uso de duas div para fazer o menu e o conteúdo, assim

 

[-------DIV MENU----------]____[-----------------------------------------DIV CONTEUDO------------------------------------------------------]

|-------------------------------]____[---------------------------------------------------------------------------------------------------------------------]

|-------------------------------]____[---------------------------------------------------------------------------------------------------------------------]

|-------------------------------]____[---------------------------------------------------------------------------------------------------------------------]

|-------------------------------]____[---------------------------------------------------------------------------------------------------------------------]

 

Eu quero fazer com que ocupe 100% da tela, ok!

 

Se eu divido por exemplo o menu em 20% e o conteúdo em 80%, ao mudar o tamanho da janela do navegador o menu vai diminuir o tamanho também, mas eu preciso que o menu tenha um tamanho fixo!

 

Se eu colocar o menu em por exemplo 150pixels e o conteúdo em 80% ao mudar o tamanho da janela do navegador chega um ponto que o o conteúdo fica embaixo da div do menu (nem pensar!! http://forum.imasters.com.br/public/style_emoticons/default/upset.gif )

 

Se eu colocar a div do menu com 20% e dentro dela criar uma outra div com tamanha fixo em pixels e a div do conteúdo com 80%, ao modificar o tamanho da tela as divs com porcentagem diminuem de tamanho mas a div com tamanho fixo fica em cima da div do conteudo! :unsure:

 

Alguém sabe como eu faço isso?

Se eu não consegui me expressar muito bem, a página do submarino faz uso deste recurso!

 

Muito Obrigado pela paciência ter lido e chegado até aqui!

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Alguém sabe como eu faço isso?

Se eu não consegui me expressar muito bem, a página do submarino faz uso deste recurso!

Mas você mesmo já deu a resposta... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif Acesse o código da página e veja como está construído... Eu aprendi muito fazendo isso: abrindo o código das páginas e estudando...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alejandro    1

Alejandro
Postado

Nossa eu venho procurando isso a um tempo, e hoje que está mais tranquilo no trabalho consegui encontrar!Para o firefox você pode utilizar o min-width max-widthpor exemplo:/* tamanho mínimo que a página pode ter */min-width:700px;max-width:100%; /* tamanho máximo que a página pode ter */Com isso está resolvido para Firefox, mas não funciona no IE,no IE existe um recurso (função) chamada de: expression()Com essa função você pode usar javascript dentro do css!!Então você usa um operador e pronto!width: expression( document.body.clientWidth < 760 ? '750px' : '100%' );pra que não manja muito de programação é só um lanço if simplificadodocument.body.clientWidth : pega o tamanho da janela do navegador do usuariose for menor que 760 (medida em pixels) então tem o valor fixo de 750px senão neste caso o valor vai ser de 100%Pronto! Resolvido!com o expression você pode criar funções javascript e chama-las no css o problema é que o expression() SÓ, acho que não disse muito bem SÓÓ funciona no internet explorer =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alejandro    1

Alejandro
Postado

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Aproveitando, fiz um exemplo melhor para quem precise!

 

body {   min-width: 730px; /* Tamanho mínimo para navegação (Firefox) */   width: expression(document.body.clientWidth < 735 ? '730px' : 'auto' ); /* Idem, mas para Internet Explorer */}.menu {   float:left;   width:170px;   border:1px solid #000;}.conteudo {   /* Aqui que eu não consegui notar reparar muito bem, para conseguir um espaçamento do menu, tive que colocar o tamanho dele e mais o espaçamento que eu quero, 170px + 10px de espaçamento */   padding-left:180px;}

e o html

<body><div class="menu">Menu <br/>Menu <br/>Menu <br/>Menu <br/>Menu <br/>Menu <br/></div><div class="conteudo">Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo </conteudo></body>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito