Página 1 de 2

[DICA] Menu em CSS

Enviado: 15 Ago 2011, 12:28
por 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

Re: [DICA] Menu em CSS

Enviado: 15 Ago 2011, 14:08
por _Vinny_
smallbreeds, ótimo, ficou muito bonito o menu.

Obrigado por compartilhar conosco.

Re: [DICA] Menu em CSS

Enviado: 19 Ago 2011, 19:40
por 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

Re: [DICA] Menu em CSS

Enviado: 19 Ago 2011, 20:08
por _Vinny_
Após o menu, adicione:

Código: Selecionar todos

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

Re: [DICA] Menu em CSS

Enviado: 19 Ago 2011, 20:14
por smallbreeds
Obrigado Vinny, fiz a alteração e mandei MP para o usuário que está online agora, não tenho nem como testar.

Re: [DICA] Menu em CSS

Enviado: 19 Ago 2011, 20:22
por _Vinny_
smallbreeds, sempre que precisar fazer testes em diferentes versões do IE, use o programa IE Tester

Re: [DICA] Menu em CSS

Enviado: 19 Ago 2011, 20:27
por 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á :(

Re: [DICA] Menu em CSS

Enviado: 19 Ago 2011, 20:55
por 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

Re: [DICA] Menu em CSS

Enviado: 19 Ago 2011, 21:10
por smallbreeds
Estranho é que a versão do usuário é 8, a minha também e tá tudo certo :(

Re: [DICA] Menu em CSS

Enviado: 19 Ago 2011, 22:04
por 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.