Ontem, vi um post postado por cantos usando o UCWeb: quem disse que o menu de flutuação não pode ser centrado horizontalmente? E um pequeno hack.
Eu tenho uma maneira mais fácil aqui, primeiro mostre:
Na verdade, eu deveria ter outra div do lado de fora, mas desisti para reduzir as emissões de carbono.
Execute a caixa de código
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
corpo {Font-Family: Verdana, Arial, Sans-Serif; font-size: 12px; margem: 120px Auto; Text-Align: Center;}
ul {margem: 0; preenchimento: 0; estilo de lista: nenhum;}
#Navigigation {Display: Inline-Block; Border: Solid 1px Red; Padding: 20px;}
#navigation li {altura: 30px; float: esquerda;}
#navigation li a {float: esquerda; altura: 30px; altura de linha: 30px; preenchimento: 0 23px; fundo:#97C099;}
#Navigation Li A: Hover {Background:#59C099; Color: #FFFF;}
</style>
<!-[se lte ie 7]> <style type = "text/css">#navegação {display: inline;} </style> <! [endif]->
<title> Método da sala de menu Float </title>
</head>
<Body>
<ul id = "navegação">
<li> <a href = "#"> home </a> </li>
<li> <a href = "#"> notícias </a> </li>
<li> <a href = "#"> armazenamento </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 todas as dicas de seleção: você pode modificar algum código primeiro e depois pressionar Run]
O mais importante é esta frase:
<!-[se lte ie 7]> <style type = "text/css">#navegação {display: inline;} </style> <! [endif]->
Para cuidar da versão inferior do IE, as anotações condicionais são usadas aqui.
A navegação por porta deslizante evoluiu do código acima:
Execute a caixa de código
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
corpo {Font-Family: Verdana, Arial, Sans-Serif; font-size: 12px; margem: 120px Auto; Text-Align: Center;}
ul {margem: 0; preenchimento: 0; estilo de lista: nenhum;}
#Navigigation {Display: Inline-Block; Padding: 20px; borda: sólido 1px vermelho;}
#Navigation Li {Height: 30px; Float: Esquerda;}
#Navigigation Li A {float: esquerda; fundo:#97C099 URL (<a href = ") esquerda sem repetição; preenchimento; preenchimento: 27px; altura: 30px; estouro: hidden;}
#Navigation Li A Span {Hight: 30px; float: esquerda; fundo: URL (<a href = ") direita -352px sem repetição; preenchimento-right: 27px; altura de linha: 33px; cursor: mão;}
#Navigigation Li A: Passe o mouse,#Navegação li.current a {posição de fundo: esquerda -176px; cor:#009; cor de fundo:#8597B5;}
#Navigation Li A: Span Span,#Navegação Li.Current A Span {Background -Position: Direita -528px;}
#navigation li.current a {font-weight: Bold;}
</style>
<!-[se lte ie 7]> <style type = "text/css">#navegação {display: inline;} </style> <! [endif]->
<title> Atualização para o estilo de porta deslizante de acordo com o código acima </title>
</head>
<Body>
<ul id = "navegação">
<li> <a href = "#"> <pan> home </span> </a> </li>
<li> <a href = "#"> <span> news </span> </a> </li>
<li class = "current"> <a href = "#"> <pan> store </span> </a> </li>
<li> <a href = "#"> <pan> Grupo </span> </a> </li>
<li> <a href = "#"> <man> Comunidade </span> </a> </li>
<li> <a href = "#"> <pan> Ajuda </span> </a> </li>
</ul>
</body>
</html>
[Ctrl+A todas as dicas de seleção: você pode modificar algum código primeiro e depois pressionar Run]
Entre eles, é necessário explicar essas duas frases para não ser considerado redundante:
#Navigigation Li A {Overflow: Hidden;} /* Ocultar o 3px extra que o IE5.5 e 6, não é um bug de 3px! Porque altura: 30px; altura da linha: 33px; no IE5.5 e 6, a altura é de 33px. */
#Navigation Li A Span {Cursor: Hand;}/* Cuide dos bugs que o mouse no período não parece uma forma de mão. Além disso, o IE5.5 não suporta cursor: ponteiro; mas todas as versões conhecem o cursor: Hand;*/
Após a conclusão, a desvantagem é que escrever uma linha de comentários condicionais é como a areia em seus olhos para aqueles que têm morbidade XHTML. hehe!
Não foram encontrados problemas no Safari4, Chale, Opera10, IE5.5, 5, 6, 7, FF3.