Centralizar o cabeçalho ao corpo do fórum

Detalhes da questão

Endereço do fórum: https://readingsteiner.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Boa tarde a todos!

Estou tentando colocar o banner principal do fórum com uma certa redução de largura, altura e alinhamento central para que fique proporcional com a redução de largura do fórum que estou utilizando (atualmente está reduzido para 52%, configurado na seção de configurações gerais mesmo, sem ser por código).

Eu cheguei neste código

Código:

.headerbar {
   background-image: url("https://i.servimg.com/u/f45/20/49/06/83/661dba10.jpg");
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   padding: 0;
   overflow: hidden;
     width: 52.7%;
     height: 300px;
    margin: 30px 450px 0px;
   position: relative;
    }


Imagem 1:

Imagem 2:




Na primeira imagem, a altura, largura e a posição estão exatamente onde eu quero utilizando o código acima, mas como podem observar, os botões de usuários, profile, faq, etc, de dentro do banner ficaram desconfigurados, e também quando eu visualizo o fórum em uma outra resolução do navegador, utilizando o ctrl+scroll do mouse para tras (segunda imagem), percebo que o tamanho do banner não acompanha junto com o corpo do fórum abaixo.

Gostaria de saber como deixar o banner onde ele está, mas de uma forma onde o restante dos textos de dentro fiquem formatados e que em uma outra resolução o banner acompanhe sempre o corpo do fórum abaixo.

Uso o MODERNBB.

Obrigado!!

Olá @OkamiDF,

Altere o código para

Código:

#page-header {
  width: 52%;
  margin-left: auto;
  margin-right: auto;
}

Atenciosamente,
tikky.

tikky escreveu:Olá @OkamiDF,

Altere o código para

Código:

#page-header {
  width: 52%;
  margin-left: auto;
  margin-right: auto;
}

Atenciosamente,
tikky.

Bom dia @tikky! Obrigado pela mensagem!

Eu testei o seu código e a parte de centralização funcionou bem, mas os botões de dentro do banner ainda ficaram desconfigurados. Eu também queria deixar o banner um pouco mais fino e um pouco mais abaixo se possível (como na imagem 1).

Ficou assim com o seu código:


Agradeço pela atenção!

Bom dia, @OkamiDF,

Para solucionar esse problema da centralização dos botões, adicione esse seguinte código na sua Folha de Estilo (CSS):

Código:

.wrap {
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 36px;
    width: 100%;
}


E sobre sua redução do banner:

Código:

.headerbar {
    height: 200px;
}


Caso não tenha funcionando, responda esse tópico novamente.

(Aguardo uma resposta).
Atenciosamente,
Musashi!

Musashi escreveu:Bom dia, @OkamiDF,

Para solucionar esse problema da centralização dos botões, adicione esse seguinte código na sua Folha de Estilo (CSS):

Código:

.wrap {
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 36px;
    width: 100%;
}


E sobre sua redução do banner:

Código:

.headerbar {
    height: 200px;
}


Caso não tenha funcionando, responda esse tópico novamente.

(Aguardo uma resposta).
Atenciosamente,
Musashi!

Deu super certo! Era exatamente isso que eu queria!

Muito obrigado @Musashi!!

PS: Eu não sabia que o botão de dar "joinha" era único, eu queria ter clicado pra vocês dois. Perdão!!

Pode trancar!

Haha, sem problemas!