[DICA] Menu em CSS

[smallbreeds]

URL do Fórum: http://www.shihtzuforum.com.br/index.php

Oi pessoal!

Eu precisava de um menu para:
- integrar o Blog Wordpress com o Fórum
- Os links das mods não cabiam mais na navbar

Andei estudando, com base em auxílio do _Vinny_ e cheguei a um resultado que serviu para mim, e como pode servir para mais alguém, vou compartilhar. (Tem este Tutorial kb.php?a=42 mas não deu no meu estilo porque ele usa tabs internas do prosilver, cuja cor é diferente do tema)

1 - Baixe o arquivo zipado em anexo e descompacte em seu computador

2 - Envie as imagens da pasta images para a pasta images do seu fórum.
(Essas imagens devem ser alteradas para combinar com seu estilo, mas estão presentes para você saber exatamente as dimensões.)

3 - Envie o arquivo meumenu.css para a pasta styles/prosilver/theme/

4 - Abra styles/prosilver/template/overall_header.html
LOCALIZE

Código: Selecionar todos

<div class="navbar">

ADICIONE ANTES

Código: Selecionar todos

<br />
<div id="menu" align="center">
<ul>
	<li><a href="http://www.seuforum.com.br/portal.php"><b>PORTAL</b></a></li>
	<li><a href="http://www.seuforum.com.br/index.php"><b>FÓRUM</b></a></li>
	<li><a href="http://www.seuforum.com.br/"><b>BLOG</b></a></li>
	<li><a href="http://www.seuforum.com.br/mchat.php#mChat"><b>CHAT</b></a></li>
	<li><a href="http://www.seuforum.com.br/search.php"><b>PESQUISA</b></a></li>
	<li><a href="http://www.seuforum.com.br/memberlist.php"><b>MEMBROS</b></a></li>
	<li><a href="http://www.seuforum.com.br/thankslist.php"><b>RANK TOP 10</b></a></li>
	<li><a href="http://www.seuforum.com.br/faq.php"><b>FAQ</b></a></li>	
</ul>
</div>
<br />

5 - LOCALIZE

Código: Selecionar todos

</head>

ADICIONE ANTES

Código: Selecionar todos

<!--[if IE]>
<style type="text/css">
#menu ul {display:inline-block;}
#menu ul {display:inline;}
#menu ul li {float:left;}
#menu {text-align:center;}
</style>
<![endif]-->

6 - Abra o arquivo stylesheet.css
LOCALIZE:

Código: Selecionar todos

@import url("colours.css");

ADICIONE DEPOIS

Código: Selecionar todos

@import url("meumenu.css");

Atualize Template, Tema e Limpe o Cache.

Você deve substituir os links do passo 4 pelos links de seu interesse.

As imagens da pasta estão compatíveis com o tema Absolution, mas podem ser substituídas, claro, por imagens compatíveis com seu tema.

Caso alguém queira usar o Menu e tenha dificuldades com as imagens posso auxiliar.

Como fica o menu: (Se quiser ver o menu funcionando é só acessar o endereço no topo do post)

menu.JPG

[_Vinny_]

smallbreeds, ótimo, ficou muito bonito o menu.

Obrigado por compartilhar conosco.

[smallbreeds]

Vinny, parece que a dica não foi 100%.

Para alguns poucos usuários tá aparecendo assim a header. O IE é 8 como o meu. :roll:
Teria uma dica para resolver isso?

poli.jpg

[_Vinny_]

Após o menu, adicione:

Código: Selecionar todos

<!--[if IE8]><br /> <br /> <![endif]-->

[smallbreeds]

Obrigado Vinny, fiz a alteração e mandei MP para o usuário que está online agora, não tenho nem como testar.

[_Vinny_]

smallbreeds, sempre que precisar fazer testes em diferentes versões do IE, use o programa IE Tester

[smallbreeds]

Valeu a dica Vinny, mas no momento meu computador não aceita instalações, tá uma carroça, um vírus desgraçado ferrou tudo e preciso formatar, mas agora não dá :(

[smallbreeds]

Opa Vinny, não mudou nada, ficou igual, mesmo o usuário limpando o cacha do navegador e atualizando. Eu no Fórum atualizei o template e limpei o cache também

[smallbreeds]

Estranho é que a versão do usuário é 8, a minha também e tá tudo certo :(

[smallbreeds]

Vinny, consegui corrigir uma parte, os ícone agora estão aparecendo normal na toolbar, o menu tá na posição correta e não tem nada sobreposto. Troquei todos os <br /> por margin-top e margin-bottom, resolveu.

Mas não consigo centralizar. margin left e right já estão em auto. A div tá com align center se não não centraliza no chrome, e coloquei text-align center na clase da div, até agora, nada resolveu.