Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

O menu fixo

O menu que está no canto superior direito desta página é um simples DIV com alguns elementos A no interior. Todo o trabalho para o fixar no lugar é feito através das regras na folha de linguagem de estilo. Aqui está o codigo de marcação, foi retirado directamente da fonte desta página:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>

<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>

<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>

</div>

Num navegador, sem CSS, ou com CSS desligado, vai ser apenas um parágrafo normal com links. Mas, graças às regras abaixo, vai aparecer a "flutuar" no topo da página, fixo no canto superior direito da janela do navegador:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

As regras interessantes aqui são as 'posição: fixa', que faz o DIV ficar fixo na ecrã, e os 'exibir: blocos', que fazem dos elementos A dentro do DIV em elementos em bloco e assim, exibem-se abaixo uns dos outros, em vez de todos numa só linha.

Cuidado com os passos das últimas três regras. Todos têm a mesma especificidade, de modo que, a última que se aplica, determina a cor. Se o rato pairar sobre o link, queremos que :hover se verifique, por isso tem de ser a última.

O resto, as margens, limites, cores, etc, podem ser removidos ou alterados de acordo com seu gosto pessoal. Note no entanto, como fizemos as regras entre os links: existem limites acima de todos os links, excepto o primeiro, graças à regra ‘: primeiro-filho’. Um par de regras como esta (topo-limite em todos os elementos, mais um limite 'nada' no primeiro filho) é muito conveniente para criar de limites entre elementos.

(Se olhar para a actual folha de linguagem de estilo que esta ligada a partir desta página, banner-k.css e banner.css, irá ver algumas regras adicionais que parecem contradizer-se mutuamente. Estas estão lá para proteger contra bugs em alguns navegadores mais antigos. Em particular, na faixa -o.css, a faixa está escondida e na faixa.css ela, é exibido como um bloco. Isto tem o efeito de esconder a faixa do Netscape 4, porque ignora a @ importação da faixa.css .)

FAQ: IE 5 & 6 no Windows?

Se olhar para esta página com o Microsoft Internet Explorer 5 ou 6 no Windows ( "WinIE5" e "WinIE6"), verá que esta não funciona. Pelo menos não com as versões actuais, a partir de setembro de 2002. Muitas pessoas perguntam-me sobre isso, então aqui estão algumas explicação. Em resumo: o bug está no navegador, não nesta página.

WinIE5 e WinIE6 não implementam 'fixos' ainda. Isso é lamentável, mas o problema maior é que eles também não analisam a 'posição' corretamente. Um navegador que não sabe 'fixo' deve deitar fora a regra ' posição: fixo 'e voltar atrás para qualquer que seja o valor anterior da 'posição' na folha de de linguagem de estilos. Poderíamos então adicionar a 'posição: absoluto' antes do 'fixo' e o navegador não usa isso. Mas no WinIE 5 e 6 não é isso que acontece. Aparentemente, a palavra-chave 'fixo' é algo interpretado como 'estático'.

Não pode fazer apoio 'fixo' no WinIE5 e 6 , mas existe um trabalho para analisar o problema. Johannes Koch alertou-me para este truque (da sua colecção de remendos). Primeiro substitua a "posição: fixo", nas regras de linguagem acima para 'posição: absoluta' e insira a seguinte regra um pouco mais abaixo na folha da linguagem de estilo:

body>div.banner {position: fixed}

(Se a faixa.DIV está dentro de outro elemento que não seja o BODY, substitua o BODY por esse elemento.) O efeito disto é que navegadores que sabem sobre a '>' (filho) seleção de CSS vai usar esta regra, mas navegadores que não, em particular WinIE5 e WinIE6, irá ignorá-lo. A regra 'posição: absoluta' será usada e o menu irá ficar no lugar certo, excepto que não vai ficar fixo quando navega pela página.

É importante que não haja espaços em torno do '>'.