Ontem vi um post do goos usando ucweb: Quem disse que o menu Float não pode ser centralizado horizontalmente ? Entrei e dei uma olhada e descobri que o método era um pouco complicado, usando margens negativas, position:relativel e alguns; hacks.
Tenho aqui um jeito mais simples, que vou mostrar primeiro:
Na verdade, eu deveria ter colocado outro mergulho lá fora, mas para reduzir as emissões de carbono, descartei-o.
Execute a caixa de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="texto/css">
corpo{família da fonte:Verdana,Arial,sans-serif;tamanho da fonte:12px;margem:120px automático;alinhamento de texto:centro;}
ul{margem:0;padding:0;estilo de lista:none;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#navigation li{altura:30px;float:esquerda;}
#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
#navigation li a:hover{background:#59c099;color:#fff;}
</estilo>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>menu flutuante uma forma de ganhar</title>
</head>
<corpo>
<ul id="navegação">
<li><a href="#">Página inicial</a></li>
<li><a href="#">Notícias</a></li>
<li><a href="#">Loja</a></li>
<li><a href="#">Grupo</a></li>
<li><a href="#">Comunidade</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</body>
</html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
O mais crucial é esta frase:
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
Para cuidar das versões inferiores do IE, comentários condicionais são usados aqui. Parece que no IE7 e anteriores, a função display:inline é equivalente a inline-block;.
A navegação por porta deslizante evoluiu a partir do código acima:
Execute a caixa de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="texto/css">
corpo{família da fonte:Verdana,Arial,sans-serif;tamanho da fonte:12px;margem:120px automático;alinhamento de texto:centro;}
ul{margem:0;padding:0;estilo de lista:none;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#navigation li{altura:30px;float:esquerda;}
#navigation li a{float:left;background:#97C099 url( ) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}
#navigation li a:hover span,#navigation li.current a span{posição de fundo:right -528px;}
#navigation li.current a{font-weight:bold;}
</estilo>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>Atualize para o estilo de porta deslizante de acordo com o código acima</title>
</head>
<corpo>
<ul id="navegação">
<li><a href="#"><span>Página inicial</span></a></li>
<li><a href="#"><span>Notícias</span></a></li>
<li class="current"><a href="#"><span>Loja</span></a></li>
<li><a href="#"><span>Grupo</span></a></li>
<li><a href="#"><span>Comunidade</span></a></li>
<li><a href="#"><span>Ajuda</span></a></li>
</ul>
</body>
</html>
[Ctrl+A Selecionar todas as dicas: você pode modificar parte do código primeiro e depois pressionar Executar]
Dentre elas, essas duas frases precisam ser explicadas para não serem consideradas redundantes:
#navigation li a{overflow:hidden;} /* Oculta os 3px eliminados pelo IE5.5 e 6. Não é um bug de 3px! Porque height:30px;line-height:33px; no IE5.5 e 6, a altura é 33px. */
#navigation li a span{cursor:hand;}/* Cuide do bug no IE 5.5, 6 e 7 onde o mouse não exibe o formato de uma mão quando colocado no span. Além disso, o IE5.5 não suporta cursor:pointer, mas todas as versões do IE reconhecem cursor:hand;*/
Está feito. A desvantagem é que escrever essa linha de comentários condicionais é como areia nos olhos de pessoas com misofobia de xhtml. Se você quiser se livrar disso, não há mal nenhum em usar um hack! hehe!
Nenhum problema foi encontrado no safari4, chrome, opera10, ie5.5, 5, 6, 7, ff3.