Menu como o do FDF

3 participantes

Ir para baixo

Tópico resolvido Menu como o do FDF

Mensagem por TreiMark 05.10.15 19:07

Detalhes da questão


Endereço do fórum: http://olimpiadaenem.forumeiros.com
Versão do fórum: PhpBB3

Descrição


Olá @Sennior,

Gostaria que o senhor me ajudasse com a aplicação de alguns códigos que forneceu neste tópico:

Menu Estilo ao do FdF

O código que usei na minha CSS foi:

Código:
#page-header .navbar .linklist {
    background: #2D3134;
    border: none;
    margin: -9px -10px 0;
}
ul.navlinks {
    border-bottom: 1px solid #fff;
    font-weight: 700;
    text-align: center;
}
ul.linklist li {
    display: inline;
    font-size: 1.1em;
    line-height: 2.2em;
    list-style-type: none;
    width: auto;
}
#page-header .navbar .linklist:hover {
border-bottom:0px solid #369FCF;
}

a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}

a.mainmenu:hover {
    border-bottom: 5px solid #0372be;
}

Porém observei o seguinte problema:

Quando estamos com o cursor sobre um menu o tamanho da "barra de menus" aumenta, assim que tiramos o cursor o tamanho da barra de menus diminui...

O mesmo não ocorre aqui no FdF.

Gostaria de saber se é possível corrigir este problema...
TreiMark
TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por Fraise 05.10.15 19:15

Olá!

Adicione mais este código em sua folha de estilos:
Código:
a.mainmenu:active {
    border-bottom: 5px solid #0372be!important;
}

Até mais.
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por TreiMark 05.10.15 19:18

@Fraise o código não funcionou...
TreiMark
TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por Fraise 05.10.15 19:19

Tente adicionar no inicio da folha de estilos. Muito feliz

Até mais.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por TreiMark 05.10.15 19:22

@Fraise, adicionei ao início da folha CSS mas continua sem resultado...
TreiMark
TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por Sennior 05.10.15 20:05

Saudações!

Certo, vamos começar do zero? Retire o código que faz a função do menu igual do FdF que criaremos outro código.
Quando retirar, nos avise.
Até mais.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por TreiMark 05.10.15 20:48

Olá @Sennior,

Já tirei o código. Vale informar que tenho algumas coisas em minha folha de estilo CSS ainda, apenas removi a parte deste código.
TreiMark
TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por Sennior 05.10.15 22:05

Ótimo amigo, agora adicione este código no inicio de teu CSS:
Código:
.navbar {
    background: #2D3134!important;
    border: none!important;
    margin: 0px -5px 0!important;
}
a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}
#page-header a.mainmenu.fa_navactif, #page-header a.mainmenu:hover {
    background-position: 0 40px;
}

Salve e visualize teu fórum;
Até mais.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por TreiMark 05.10.15 23:26

@Sennior, está quase bom, mas vou lhe solicitar algumas modificações:

O problema da barra ficar aumentando e diminuindo foi solucionado.

Com o código que me forneceu obtive o seguinte resultado:

menu igual do FDF - Menu como o do FDF 34zit74

Então eu fiz as seguintes modificações:

- A Barra de Menus ficou encostada em meu logo de fórum;
- O menu não ficou encostado nas laterais do fórum, coloquei a margem novamente;

Para isso apenas inverti os valores da margem no início do código:

Código:
   .navbar {
        background: #2D3134!important;
        border: none!important;
        margin: -5px 0px 0!important;

Mas agora preciso que:

No campo onde fica a barra de busca eu gostaria que ficasse branco. Ou seja, daquela divisória para baixo prefiro que seja branco (fiz uma marca branca neste campo, na figura, para destacar).

A imagem abaixo ilustra o que desejo:

menu igual do FDF - Menu como o do FDF 2428yvo

Aguardo seu retorno...
TreiMark
TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por Sennior 08.10.15 1:02

Saudações!

Certo, mas existe um problema.
Essas modificações que o senhor deseja não são visualizadas por visitantes.

Acabo de criar uma conta em teu fórum e peço gentilmente que ative-a para que eu veja e possa fazer as modificações.
Até mais.
Sennior
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por TreiMark 08.10.15 2:39

@Sennior ativei sua conta que atende pelo nick de Sennior.

Desculpe a demora!
TreiMark
TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por Sennior 08.10.15 20:29

Saudações meu querido!

Adicione mais estes códigos em teu CSS:
Código:
#page-footer, div.navbar, div.navbar ul.linklist {
    display: block !important;
}
ul.navlinks {
    border-bottom: transparent!Important;
}

O que mais deseja?
Até mais.
Sennior
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por TreiMark 09.10.15 19:38

@Sennior, melhorou um pouco, mas ainda não está 100%...

Com o código o resultado obtido foi:

menu igual do FDF - Menu como o do FDF 29xcefq

Gostaria que ficasse assim:

menu igual do FDF - Menu como o do FDF Fkbcqo

Será que você consegue fazer isso?
TreiMark
TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por Fraise 09.10.15 19:42

Olá!

Adicione no inicio da sua folha de estilos:
Código:
div.navbar {
height: 51px!important;
}

O valor 51px pode ser alterado para o seu agrado. Piscada

Até mais.
Fraise
Fraise
Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por TreiMark 09.10.15 19:49

@Fraise, funcionou obrigado!

Agradeço sua ajuda mas vou ter que dar a melhor resposta para @Sennior; espero que compreenda...

Conto com sua ajuda em futuros tópicos... Gosto muito de seu trabalho.

De modo especial agradeço a @Sennior que me auxiliou na resolução deste problema.

Obrigado amigo. Venerar

Questão resolvida pessoal!!!
TreiMark
TreiMark
***

Membro desde : 12/06/2015
Mensagens : 170
Pontos : 214

http://promec.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Menu como o do FDF

Mensagem por Sennior 09.10.15 21:45

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Sennior
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos