Menú igual a este

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Menú igual a este

Mensagem por Chinas em Qua 26 Dez 2012 - 7:28

Qual é minha questão:
Boas,
É possivel colocar um menú igual a este?

http://www.gfx-art.org/

Endereço do meu fórum:
http://supportware.forumeiros.com

Versão do fórum:
PHPBB2
avatar

Chinas
Nível 9

Masculino
Inscrito dia : 18/07/2012
Mensagens : 222
Pontos Ativos : 310

Ver perfil do usuário http://www.master-universal.forumeriros.com

Resolvido Re: Menú igual a este

Mensagem por Holmes em Qua 26 Dez 2012 - 9:52

Saudações,

Painel de controle ► Visualização ► Cabeça;lho & Navegação
"Exibir apenas as imagens no menu de navegação :" marque "Não".

Para que o menu fique correto não devem haver imagens dos botões nele.

Clique no botão "Salvar".

Painel de controle ► Visualização ► Cores ► Folha de estilo CSS

Esse código deve ser colado no final de sua Folha de estilo CSS:
td.bodyline > table[align="center"][border="0"][cellspacing="0"][cellpadding="0"]{position: absolute; top: 0px; left: 0px; width: 100%;}td.bodyline table[align="center"][border="0"] tbody tr td[align="center"]{ background-color: transparent; background-image: url(http://img11.hostingpics.net/pics/592133menubg5.png); border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width: 700px}

Clique no botão "Salvar".

O efeito da flecha é feito com Javascript e não há suporte para isso.

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Menú igual a este

Mensagem por Chinas em Qua 26 Dez 2012 - 10:09

Não modificou nada.
avatar

Chinas
Nível 9

Masculino
Inscrito dia : 18/07/2012
Mensagens : 222
Pontos Ativos : 310

Ver perfil do usuário http://www.master-universal.forumeriros.com

Resolvido Re: Menú igual a este

Mensagem por Holmes em Qua 26 Dez 2012 - 10:22

Saudações,

Como não? O cabeçalho está no topo agora, veja se isso resolve.

Painel de controle ► Visualização ► Cores ► Folha de estilo CSS

Substitua por esse CSS:
td.bodyline > table[align="center"][border="0"][cellspacing="0"][cellpadding="0"]{position: fixed; top: 0px; left: 0px; width: 100%;}td.bodyline table[align="center"][border="0"] tbody tr td[align="center"]{ background-color: transparent; background-image: url(http://img11.hostingpics.net/pics/592133menubg5.png)!important; border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width: 700px}

td.bodyline table[align="center"][border="0"] tbody tr td[align="center"]{font-size:0px}

td.bodyline table[align="center"][border="0"] tbody tr td[align="center"] a{display:inline-block;
background: url(http://img11.hostingpics.net/pics/154979menuline.png) right -8px no-repeat;
height: 28px;
padding: 3px 3px 8px;font-family: Arial, Helvetica, sans-serif;
font-size: 13px!important;
line-height: 1;
text-shadow: 1px 1px 5px black;color:white;text-align:center;min-width:50px;padding:5px 10px;background-size:auto 60px;}

td.bodyline table[align="center"][border="0"] tbody tr td[align="center"] a:hover{text-decoration:none!important;color:#00ABFF;}

td.bodyline table[align="center"][border="0"] tbody tr td[align="center"] a::first-letter {
color: #B3179C;
font-size: 16px;}

a.mainmenu img{display:none}

Clique no botão "Salvar".

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Menú igual a este

Mensagem por Chinas em Qua 26 Dez 2012 - 10:28

No meu fórum SW funcionou, no entanto queria aplicar noutro e não funcionou. Versão: phpBB3
avatar

Chinas
Nível 9

Masculino
Inscrito dia : 18/07/2012
Mensagens : 222
Pontos Ativos : 310

Ver perfil do usuário http://www.master-universal.forumeriros.com

Resolvido Re: Menú igual a este

Mensagem por Holmes em Qua 26 Dez 2012 - 10:32

Saudações,

Sempre quando você criar uma questão, coloque no campo link o fórum que você quer personalizar, não há como adivinhar o fórum que você quer personalizar e isso faz com que você e eu percamos nosso tempo com códigos errados.

Peço que passe o link que você quer personalizar e que faça o mesmo em seus outros tópicos, caso haja algum que você tenha colocado o link errado.

Assombrosamente.


Última edição por Holmes em Qua 26 Dez 2012 - 10:33, editado 1 vez(es)
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Menú igual a este

Mensagem por Chinas em Qua 26 Dez 2012 - 10:33

tp-ajuda.forumeiros.com
avatar

Chinas
Nível 9

Masculino
Inscrito dia : 18/07/2012
Mensagens : 222
Pontos Ativos : 310

Ver perfil do usuário http://www.master-universal.forumeriros.com

Resolvido Re: Menú igual a este

Mensagem por Holmes em Qua 26 Dez 2012 - 10:41

Saudações,

Painel de controle ► Visualização ► Cores ► Folha de estilo CSS

Esse código deve ser colado no final de sua Folha de estilo CSS:
#page-header .navbar{background-color:transparent;position: fixed; top: -8px; left: 0px; width: 100%;}#page-header .navbar .linklist.navlinks{ background-color: transparent; background-image: url(http://img11.hostingpics.net/pics/592133menubg5.png)!important; border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width: 700px}

#page-header .navbar{font-size:0px}

#page-header .navbar a.mainmenu{display:inline-block;
background: url(http://img11.hostingpics.net/pics/154979menuline.png) right -8px no-repeat;
height: 28px;
padding: 3px 3px 8px;font-family: Arial, Helvetica, sans-serif;
font-size: 13px!important;
line-height: 1;
text-shadow: 1px 1px 5px black;color:white;text-align:center;min-width:50px;padding:10px 10px;background-size:auto 60px;margin:0px!important}

#page-header .navbar a.mainmenu:hover{text-decoration:none!important;color:#00ABFF!important;text-shadow:none!important}

#page-header .navbar a.mainmenu::first-letter {
color: #B3179C;
font-size: 16px;}

a.mainmenu img{display:none}

Clique no botão "Salvar".

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Menú igual a este

Mensagem por Chinas em Qua 26 Dez 2012 - 12:05

Peço desculpa mas será que me pode indicar outro Menú parecido? É que no no Google, IE e Firefox tem alguns erros.
avatar

Chinas
Nível 9

Masculino
Inscrito dia : 18/07/2012
Mensagens : 222
Pontos Ativos : 310

Ver perfil do usuário http://www.master-universal.forumeriros.com

Resolvido Re: Menú igual a este

Mensagem por Holmes em Qua 26 Dez 2012 - 12:09

- Chinas # O8 ! escreveu:
Peço desculpa mas será que me pode indicar outro Menú parecido? É que no no Google, IE e Firefox tem alguns erros.
Poderia listar esse erros ou postar uma imagem mostrando?

Assombrosamente.


Última edição por Holmes em Qua 26 Dez 2012 - 16:15, editado 1 vez(es)
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Menú igual a este

Mensagem por Chinas em Qua 26 Dez 2012 - 12:16

Em todos os navegadores aparece este erro:


No IE ele fica transparente. Que eu saiba não há mais nenhum.
avatar

Chinas
Nível 9

Masculino
Inscrito dia : 18/07/2012
Mensagens : 222
Pontos Ativos : 310

Ver perfil do usuário http://www.master-universal.forumeriros.com

Resolvido Re: Menú igual a este

Mensagem por Holmes em Qua 26 Dez 2012 - 12:27

Saudações,

Use esse CSS:
#page-header .navbar{background-color:transparent;position: fixed; top: -8px; left: 0px; width: 100%;}#page-header .navbar .linklist.navlinks{ background-color: transparent; background-image: url('http://img11.hostingpics.net/pics/592133menubg5.png')!important; border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width:1100px}

#page-header .navbar{font-size:0px}

#page-header .navbar a.mainmenu{display:inline-block;
background: url(http://img11.hostingpics.net/pics/154979menuline.png) right -8px no-repeat;
height: 28px;
padding: 3px 3px 8px;font-family: Arial, Helvetica, sans-serif;
font-size: 13px!important;
line-height: 1;
text-shadow: 1px 1px 5px black;color:white;text-align:center;min-width:50px;padding:10px 10px;background-size:auto 60px;margin:0px!important}

#page-header .navbar a.mainmenu:hover{text-decoration:none!important;color:#00ABFF!important;text-shadow:none!important}

#page-header .navbar a.mainmenu::first-letter {
color: #B3179C;
font-size: 16px;}

a.mainmenu img{display:none}

Sobre a transparência no IE, eu não sei dizer o porque do erro ocorrer, é comum vários erros ocorrerem no IE, por isso ele é o pior navegador.

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Menú igual a este

Mensagem por Chinas em Qua 26 Dez 2012 - 12:33

Muito obrigado pela paciência. só uma última coisa, onde mudo o roxo para azul?
avatar

Chinas
Nível 9

Masculino
Inscrito dia : 18/07/2012
Mensagens : 222
Pontos Ativos : 310

Ver perfil do usuário http://www.master-universal.forumeriros.com

Resolvido Re: Menú igual a este

Mensagem por Holmes em Qua 26 Dez 2012 - 12:40

Saudações,

Use esse CSS:
#page-header .navbar{background-color:transparent;position: fixed; top: -8px; left: 0px; width: 100%;}#page-header .navbar .linklist.navlinks{ background-color: transparent; background-image: url('http://img11.hostingpics.net/pics/592133menubg5.png')!important; border-bottom-color: #888; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-collapse: separate; border-left-color: #888; border-right-color: #888; border-top-color: #888; border-top-left-radius: 10px; border-top-right-radius: 10px; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; height: 43px; margin:0 auto!important; overflow-x: hidden; overflow-y: hidden; padding-bottom: 0px; padding-left: 9px; padding-right: 0px; padding-top: 0px; text-shadow: black 1px 1px 5px;max-width:1100px}

#page-header .navbar{font-size:0px}

#page-header .navbar a.mainmenu{display:inline-block;
background: url(http://img11.hostingpics.net/pics/154979menuline.png) right -8px no-repeat;
height: 28px;
padding: 3px 3px 8px;font-family: Arial, Helvetica, sans-serif;
font-size: 13px!important;
line-height: 1;
text-shadow: 1px 1px 5px black;color:white;text-align:center;min-width:50px;padding:10px 10px;background-size:auto 60px;margin:0px!important}

#page-header .navbar a.mainmenu:hover{text-decoration:none!important;color:#00ABFF!important;text-shadow:none!important}

#page-header .navbar a.mainmenu::first-letter {
color: #00ABFF;
font-size: 16px;}

a.mainmenu img{display:none}

Assombrosamente.
avatar

Holmes
Usuário avançado

Inscrito dia : 11/11/2012
Mensagens : 303
Pontos Ativos : 413

Ver perfil do usuário

Resolvido Re: Menú igual a este

Mensagem por Chinas em Qua 26 Dez 2012 - 12:49

Mais uma vez obrigado. Podem bloquear!
avatar

Chinas
Nível 9

Masculino
Inscrito dia : 18/07/2012
Mensagens : 222
Pontos Ativos : 310

Ver perfil do usuário http://www.master-universal.forumeriros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum