[Resolvido] Div fixed esconde o conteúdo com zoom

[gulaaa 0]

Olá, como vai? Tenho uma formatação aqui, já tentei de varias formas mas nada...

 

Seguinte, tenho uma div com position:fixed, mas ao dar zoom, o conteúdo dentro dela se esconde, o que fazer?

 

Segue a baixo o código:

 

HTML:

<div id='bar'>
 <div id='header'>
   <div id='saud'>
<a href='/' class='menu'>Meus mundos</a>
<a href='/user/$user[usuario]' class='menu'>Meu perfil</a>
<a href='/config' class='menu'>Configurações</a>
<a href='?off=1' class='menu'>Sair</a>
   </div>
   <a href='/'><img src='logo-game.png' /></a>
 </div>
</div>

 

CSS:

 

#bar {
position: fixed;
top: 0px;
z-index: 1000000;
width: 100%;
height: 40px;
border-bottom: 1px solid #333;
background: #FC3;
padding-top: 5px;
-moz-box-shadow: 0 0 6px 2px #999;
-ms-box-shadow: 0 0 6px 2px #999;
-o-box-shadow: 0 0 6px 2px #999;
box-shadow: 0 0 6px 2px #999;
}

#header {
margin-top: 5px;
text-align: center;
font-size: 18px;
position: relative;
width: 750px;
height: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
cursor: default;
font-size: 14px;
margin: 0 auto;
display: table;
text-shadow: 1px 1px 1px #fff;
}

 

Obrigado desde já!

[Joel F 6]

Ola, gula. Essa barra precisa ser fixa o tempo todo? Caso não seja eu acho interessante usar um javascript que mude a propriedade da barra ou div quando a janela do navegador fica menor que o tamanho minimo para exibir o conteudo. Eu não sei se o facebook faz isso por javascript mas o comportamento da barra azul superior é esse se você diminuir a janela do navegador ou der um zoom que comprometa a visualização do coteudo a barra azul dexa de ser fixa e passa a acompanhar a pagina. Recomendo que você use a biblioteca jQuery para faze isso pois ela possui funções que facilitam determinar o tamanho da tela da janela do browser.

[gulaaa 0]

Solução:

 

<script type='text/javascript'>

$(window).bind('resize', function () { 
       if ($(window).width() > $('#content').width()){
           $('#bar').css('position', 'fixed');
       }
       else{
           $('#bar').css('position', 'relative');
       }
});

</script>

 

Espero ter ajudado quem teve o mesmo problema, falow!

[Joel F 6]

Solução:

 

<script type='text/javascript'>

$(window).bind('resize', function () { 
       if ($(window).width() > $('#content').width()){
           $('#bar').css('position', 'fixed');
       }
       else{
           $('#bar').css('position', 'relative');
       }
});

</script>

 

Espero ter ajudado quem teve o mesmo problema, falow!

Ola, gulaa só faria uma pequena modificação no seu codigo pelo seguinte a função que regula a propriedade só é chamada ao redimencionar a tela ou seja se a pessoa redimencionar e depois atualizar a página a função não sera chamada e o conteudo ficara broqueado. Então para corrigir isso eu colocaria um $(document).ready() vou mostrar:

<script type='text/javascript'>

$(document).ready(alttela);
$(window).resize(alttela);

function alttela() { 
       if ($(window).width() > $('#content').width()){
           $('#bar').css('position', 'fixed');
       }
       else{
           $('#bar').css('position', 'relative');
       };
};

</script>