Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

Nesta página:

Menu fixo na tela

O menu que você vê à direita desta página foi construido com um elemento UL. Com uso de regras CSS convenientes você consegue fixar o menu no lugar enquanto a página rola. (Por favor redimensione a janela do navegador para obter uma barra de rolagem vertical e observar o menu fixo na tela). Observe a seguir a marcação HTML do menu que foi copiada do código fonte desta página: 

<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>

Em um navegador sem suporte para CSS ou com CSS desabilitada pelo usuário, esta marcação será renderizada como uma lista não ordenada de links. Mas, graças as regras CSS escritas como mostrado a seguir, a renderização mostrará um menu como se estivesse "flutuando" fixo no lado direito da janela: 

#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

Destaque para a regra position: fixed, que faz com que o elemento DIV permaneça fixo na tela. As declarações 'top: 50%' e 'right: 0' determinam a posição na tela onde o DIV será renderizado, que neste caso é a 50% do topo da janela e a 0px do lado direito. Outras propriedades, tais como, margins, borders, colors, etc., devem ser definidas de acordo com a preferência de cada um.

Convém lembrar que existem também as propriedades 'left' e 'bottom' para definir a posição em relacão ao lado esquerdo e à borda inferior da tela respectivamente.

Mais detalhes

Resumindo: Uma vez que um elemento for fixado com uso da declaração 'position: fixed', as três propriedades 'left', 'width' e 'right' juntas determinam a posição horizontal e a largura em relação á janela do navegador. (A terminologia CSS usa o termo viewport; e uma janela é um exemplo de viewport.)

É necessário declarar pelo menos duas das três propriedades, ou seja, left & width, right & width, ou left & right. No entanto, declarar uma só ou nenhuma é também possível. Neste caso as CSS usam a largura e/ou posição "intrinsica", conforme necessário, para a propriedade não declarada, assumindo o seu valor default ('auto').

O mesmo se aplica para o trio 'top', 'height' e 'bottom'. É necessário declarar pelo menos duas das três propriedades: 'top' para definir a distância do topo da janela, 'bottom' para definir a distância da borda inferior da janela e 'height' para definir uma altura fixa.

Examinando a folha de estilos incorporada a esta página podemos notar algumas regras de estilo que aparentam ser contraditórias. Elas foram declaradas para resolver bugs em navegadores antigos. Ver FAQ a seguir

FAQ: IE 5 & 6 em Windows?

Se você abrir esta página usando o Microsoft Internet Explorer 5 ou 6 em Windows ("IE5/Win" e "IE6/Win"), notará que nada funciona como descrito no tutorial. Muitos me perguntam por que isso acontece, assim, aqui vai uma explicação. Para começar: o bug é do navegador e não nesta página.

WinIE5 e WinIE6 não reconhecem 'fixed'. Isso é ruim, mas o problema maior é eles não parseiam a propriedade 'position' de forma correta. Se uma navegador não reconhece 'fixed' ele deveria descartar a declaração 'position: fixed' e adotar como fall back o valor prévio de 'position' declarado na folha de estilo. Assim, poderíamos declarar 'position: absolute' antes de 'fixed' e o navegador adotaria aquela declaração. Mas, os WinIE 5 e 6 não adotam este comportamento que é oprevisto nas CSS. A palavra-chave 'fixed' é interpretada erroneamente por aqueles navegadores como 'static'.

Não é possível forçar os WinIE5 e 6 a suportarem 'fixed' mas, existe um work-around para resolver este problema de parseamento. Johannes Koch ensinou-me este truque (em seu compêndio de work-arounds). Em primeiro substitua 'position: fixed' nas declarações de estilo mostradas por 'position: absolute' e a seguir insira a seguinte regra CSS na folha de estilos: 

*>#intro {position: fixed}

Navegadores que suportam o seletor '>' (filho) usarão esta regra, mas o que não suportam, em particular os WinIE5 e WinIE6, ignorarão a regra. A regra 'position: absolute' será usada por eles e o menu permanecerá no lugar certo, porém não permanecerá fixo na tela e rolará com ela.

É importante que não haja espaço em branco entre o elemento de combinação de seletores '>'.

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2021 W3C® Privacy policy

Criado em 17 January 2001;
Última atualização qua 06 jan 2021 05:40:49 UTC

Idiomas

Sobre traduções