Construção do cabeçalho

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

Atendido / Resolvido Construção do cabeçalho

Mensagem por IsmaelS. em 20.08.17 14:43

Detalhes da questão


Endereço do fórum: http://ismaels.forumeiros.com/
Versão do fórum: PunBB

Descrição


Olá!

Gostava de criar um header como foi montado nesta print:

Construção do cabeçalho 110

A imagem do header e logo podem utilizar a que quiserem que depois eu mesmo altero, o efeito do menu está neste fórum:
- http://proxstudio.forumeiros.com/

Queria o header e menu adaptado para todas as resoluções ou seja esticado de um lado ao outro.



avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 22.08.17 1:01

UP!
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 23.08.17 20:04

UP!
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Kyo Panda em 25.08.17 17:23

Adicione ao seu CSS:

Código:
#pun-intro {
    background: url(http://i.imgur.com/Ppzf07Z.jpg) no-repeat center;
    background-size: cover;
    height: 200px;
    position: relative;
    box-sizing: border-box;
}

#pun-title,
#pun-desc {
    display: none;
}

#pun-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#pun-head #pun-navlinks {
    padding: 0;
    line-height: 40px;
    background-color: #fff;
}

#pun-navlinks ul {
    display: flex;
}

#pun-navlinks li:nth-child(6) {
    margin-right: auto;
}

#pun-navlinks li {
    font-size: 0;
}

#pun-navlinks li a {
    margin-right: 0;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 20px;
    color: #333;
    border-top: 2px transparent solid;
    transition-duration: 250ms;
    transition-property: border-top-color, background-color, color;
}

#pun-navlinks li a:hover,
#pun-navlinks li a:focus,
#pun-navlinks li a:active,
#pun-navlinks li a.active {
    background-color: #f6f6f6;
    text-decoration: none;
    border-top-color: #59a5e6;
    color: #59a5e6;
}
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por APOllO em 27.08.17 20:47

Olá
Estou com o IsmaelS. no desenvolvimento. Queria que o banner e o menu encoste nas bordas do navegador.
Construção do cabeçalho Sem_ty10
APOllO

APOllO
Membro do Fórum

Masculino
Inscrito dia : 08/12/2014
Mensagens : 1085
Pontos Ativos : 1505

Ver perfil do usuário http://suportedesign.forumeiros.com
  • 0

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Alex em 27.08.17 21:03

Olá. Adicione estas linhas ao seu #pun-intro passado pelo Kyo:
Código:
margin-top: -0.5%;
    margin-left: -1%;
    margin-right: -1%;

E estas ao seu #pun-head #pun-navlinks:
Código:
margin-left: -1%;
    margin-right: -1%;

Espero ter ajudado!

---------------------
Edit:

Para ser mais rápido, troque o código que o Kyo passou por este:

Código:
#pun-intro {
    background: url(http://i.imgur.com/Ppzf07Z.jpg) no-repeat center;
    background-size: cover;
    height: 200px;
    position: relative;
    box-sizing: border-box;
    margin-top: -0.5%;
    margin-left: -1%;
    margin-right: -1%;
}
 
#pun-title,
#pun-desc {
    display: none;
}
 
#pun-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
#pun-head #pun-navlinks {
    padding: 0;
    line-height: 40px;
    background-color: #fff;
    margin-left: -1%;
    margin-right: -1%;
}
 
#pun-navlinks ul {
    display: flex;
}
 
#pun-navlinks li:nth-child(6) {
    margin-right: auto;
}
 
#pun-navlinks li {
    font-size: 0;
}
 
#pun-navlinks li a {
    margin-right: 0;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 20px;
    color: #333;
    border-top: 2px transparent solid;
    transition-duration: 250ms;
    transition-property: border-top-color, background-color, color;
}
 
#pun-navlinks li a:hover,
#pun-navlinks li a:focus,
#pun-navlinks li a:active,
#pun-navlinks li a.active {
    background-color: #f6f6f6;
    text-decoration: none;
    border-top-color: #59a5e6;
    color: #59a5e6;
}
Alex

Alex
Usuário destaque

Masculino
Inscrito dia : 09/09/2016
Mensagens : 648
Pontos Ativos : 868

Ver perfil do usuário https://mundogoph.org/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 27.08.17 21:13

Resultou agora se repararem o menu esta muito extenso a barra:
Construção do cabeçalho Sem_ty10

Se possível deixar ajustado como aqui: http://proxstudio.forumeiros.com/
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Alex em 27.08.17 21:37

Olá.

Troque o código novamente por este:
Código:
#pun-intro {
    background: url(http://i.imgur.com/Ppzf07Z.jpg) no-repeat center;
    background-size: cover;
    height: 200px;
    position: relative;
    box-sizing: border-box;
    margin-top: -0.5%;
    margin-left: -1%;
    margin-right: -1%;
}
 
#pun-title,
#pun-desc {
    display: none;
}
 
#pun-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
#pun-head #pun-navlinks {
    padding: 0;
    line-height: 40px;
    background-color: #fff;
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1.5%;
}
 
#pun-navlinks ul {
    display: flex;
}
 
#pun-navlinks li:nth-child(6) {
    margin-right: auto;
}
 
#pun-navlinks li {
    font-size: 0;
    margin-bottom: -40px;
}
 
#pun-navlinks li a {
    margin-right: 0;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 20px;
    color: #333;
    border-top: 2px transparent solid;
    transition-duration: 250ms;
    transition-property: border-top-color, background-color, color;
}
 
#pun-navlinks li a:hover,
#pun-navlinks li a:focus,
#pun-navlinks li a:active,
#pun-navlinks li a.active {
    background-color: #f6f6f6;
    text-decoration: none;
    border-top-color: #59a5e6;
    color: #59a5e6;
}

Até!
Alex

Alex
Usuário destaque

Masculino
Inscrito dia : 09/09/2016
Mensagens : 648
Pontos Ativos : 868

Ver perfil do usuário https://mundogoph.org/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 28.08.17 1:12

É isso mesmo só uma pequena alteração depois de estar a ver, o efeito de barra azul ao passar o mouse do menu em vez aparecer em cima ser por baixo é possível?
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/
  • 0

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Alex em 28.08.17 11:50

Olá.

Troque novamente o código passado por este:
Código:
#pun-intro {
    background: url(http://i.imgur.com/Ppzf07Z.jpg) no-repeat center;
    background-size: cover;
    height: 200px;
    position: relative;
    box-sizing: border-box;
    margin-top: -0.5%;
    margin-left: -1%;
    margin-right: -1%;
}
 
#pun-title,
#pun-desc {
    display: none;
}
 
#pun-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
#pun-head #pun-navlinks {
    padding: 0;
    line-height: 40px;
    background-color: #fff;
    margin-left: -1%;
    margin-right: -1%;
    margin-bottom: 1.5%;
}
 
#pun-navlinks ul {
    display: flex;
}
 
#pun-navlinks li:nth-child(6) {
    margin-right: auto;
}
 
#pun-navlinks li {
    font-size: 0;
    margin-bottom: -40px;
}
 
#pun-navlinks li a {
    margin-right: 0;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 20px;
    color: #333;
    border-bottom: 2px transparent solid;
    transition-duration: 250ms;
    transition-property: border-bottom-color, background-color, color;
}
 
#pun-navlinks li a:hover,
#pun-navlinks li a:focus,
#pun-navlinks li a:active,
#pun-navlinks li a.active {
    background-color: #f6f6f6;
    text-decoration: none;
    border-bottom-color: #59a5e6;
    color: #59a5e6;
}

Até o/
Alex

Alex
Usuário destaque

Masculino
Inscrito dia : 09/09/2016
Mensagens : 648
Pontos Ativos : 868

Ver perfil do usuário https://mundogoph.org/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 28.08.17 15:57

Só para terminar, o menu "Perfil, Mensagens privadas" queria deixar à esquerda do menu apenas deixar o "Sair,Entrar,Registar" no lado direito:
Construção do cabeçalho 210
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 29.08.17 23:24

UP!
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Kyo Panda em 30.08.17 14:57

Adicione a um novo JavaScript com Investimento em Todas as páginas:

Código:
(function($) {
   'use strict';
   
   $(function() {
      if (_userdata.session_logged_in) {
         $('#pun-navlinks li:nth-child(6)').css('margin-right', 0);
         $('#pun-navlinks li:nth-last-child(2)').css('margin-right', 'auto');
      }
   });
})(jQuery);
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 30.08.17 15:11

Resultou só para terminar eu sei que tem um código que dá para retirar alguns links do menu, eu queria retirar por exemplo o "FAQ, Calendário" e também ao clicar em "Buscar" em vez de abrir o aba fosse logo direto para o buscar avançado.
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Alex em 30.08.17 18:15

Olá!

Para tirar os botões do menu que pediu, adicione o seguinte código à sua Folha de Estilo CSS:
Código:
#pun-navlinks li a[href="/faq"], #pun-navlinks li a[href="/calendar"] {
 display: none!important;
}

Até mais! o/
Alex

Alex
Usuário destaque

Masculino
Inscrito dia : 09/09/2016
Mensagens : 648
Pontos Ativos : 868

Ver perfil do usuário https://mundogoph.org/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 31.08.17 9:44

Resultou, agora queria que ao clicar no "Buscar" fosse logo direto para:
- http://ismaels.forumeiros.com/search
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Kyo Panda em 01.09.17 12:56

Adicione a um novo JavaScript:

Código:
(function($) {
  'use strict';

  $(function() {
    $('.mainmenu[href="/search"]').prop('onclick', false);
  });
})(jQuery);
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 01.09.17 13:12

Continua igual amigo e testei sei o .CSS do Mateus e fica sem cor.
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/
  • 0

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Kyo Panda em 01.09.17 13:14

Eu cliquei no Buscar aqui e foi direto para a busca avançada. Não é o que queria?
Kyo Panda

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por IsmaelS. em 02.09.17 12:05

Ups nem tinha reparado amigo, obrigado e resolvido!! Piscada
avatar

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2992
Pontos Ativos : 4145

Ver perfil do usuário http://suporte-design.forumeiros.com/

Atendido / Resolvido Re: Construção do cabeçalho

Mensagem por Kyo Panda em 05.09.17 15:38

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4641
Pontos Ativos : 5934

Ver perfil do usuário https://ajuda.forumeiros.com

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


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