Header fixo mas que se mova horizontalmente

[DanielAz 0]

Boa tarde

Já tentei de várias formas mas não consegui ainda o que pretendo.

Fiz um site com um cabeçalho fixo.

no HTML:

<header class="cab_completo">

no CSS:

.cab_completo {

position: fixed;

top: 0px;

width: 960px;

}

O conteudo abaixo do cabeçalho move-se verticalmente mas o cabeçalho não. Até aqui tudo bem.

O problema é que se fizer zoom+ no browser, surge a barra de roll horizontal que me permite mover o conteúdo para a direita ou esquerda, mas o cabeçalho fica sempre fixo e visível a partir do canto superior esquerdo! O resultado é um conteúdo desacertado com o respectivo cabeçalho!

Não sei como resolver e agradeço qualquer ajuda que me possam dar!

Obrigado!

[danmartinsiss 5]

ja ouviu falar do Bootstrap??

inclui ele em suas pastas e usa o nav deles... ai voce altera para a cor ideal de uma olhada nisso

 

http://getbootstrap.com/components/#navbar-fixed-top

[André do Vale 76]

Não é necessário bootstrap. Se você não o usa, só irá fazer o projeto ficar mais pesado.

 

O que está acontecendo é correto de acontecer, e o esperado para ação de zoom-in sim.

 

Você tem duas alternativas para resolver este problema:

 

- Usar javascript para recalcular a posição da barra fixa a todo instante, e, ao invés de deixar com position fixed, usar position absolute.

- Ou, de forma mais simples, usar um layout fluído/líquido. Com medidas percentuais, faça com que o conteúdo se adapte ao zoom dado, e seja 'espremido' ou que ocupe um espaço maior em zoom-out. Leia: http://www.designadaptavel.com.br/artigos/layout-fluido-ou-liquido

[William Bruno 1501]

Ou ainda, sempre posicionar a barra no centro da tela.

 

left: 50%; ;

[DanielAz 0]

Só deu para aproveitar a dica do André Campos quanto ao body { padding-top: 70px; }. Obrigado ! Estava fazer batota com uma div tipo dummy...

 

Quanto ao problema principal, não sei se me fiz entender...

 

coloquei o site online.

dêem uma olhada em www.daconsultadoria.com/lifecontrol/index.html

entrem com:

utilizador: admin

palavra-passe: Pass2015

façam zoom+ até aparecer a barra deslocamento horizontal e utilizem-na

usem e abusem :-)

[DanielAz 0]

desculpe danmartinsiss, a dica foi sua.

 

Gostava de explorar a ideia do André Campos usando controlo por javascript mas tenho experiencia muito limitada em js. Só uso para validar campos de formularios html. A outra alternativa obriga a muita mexida no site...

 

Então, como faço para recalcular a posição da barra fixa a todo instante, usando jscript?

 

 

[reebr 94]

@DanielAz, pode ser mais elegante manter o menu com 100% de largura e trabalhar com media queries para controlar a forma como o menu é exibido,

 

Mas uma forma de fazer o que perguntou é, pegando o evento de "resize" na janela e então obter o tamanho atual. Ex:

var $menu = document.querySelector('.meu-menu-incrivel'),

window.addEventListener('resize', function(){
   var width = window.innerWidth ||
               document.documentElement.clientWidth ||
               document.body.clientWidth;

   $menu.style.width = width + 'px';
}, true);

DEMO