Cabeçalho responsivo do pórtico CSS

Question

Estive pesquisando no Google tentando encontrar uma solução, mas realmente preciso de ajuda pessoal.Estou tentando criar um cabeçalho responsivo composto de 4 partes:

1. O cabeçalho BG
2. Tag de boas-vindas à esquerda
3. Logotipo no centro
4. Ícones sociais à direita

Aqui está uma cópia da versão local na qual estou trabalhando:http://jaredbrandjes.co.za/joomla/test/

O cabeçalho BG tem largura de 1920 e eu o virei, dupliquei e fiz repetir-x para telas maiores.Ele só precisa ser dimensionado um pouco quando a largura for reduzida para menos de 500px.Cerca de 70% do seu tamanho deve resolver, mas não tenho certeza de como fazer isso.

Este é o código que inseri no index.php para criar meu cabeçalho bg:

<div style="background-image:url(/jaredbrandjes.co.za/images/template/headerbar.png); overflow:hidden; background-repeat:repeat-x;height: 366px;position: absolute;width: 100%;"></div>

Este é o meu código atual para os elementos 2,3,4:

<div class="gantry-img"><span class="gantry-img" style="text-align: left;"><img style="float: left;" src="images/template/header_welcometag.png" alt="" /></span> <span class="gantry-img" style="text-align: center;"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/template/header_logo.png" alt="" /></span> <span class="gantry-img" style="text-align: right;"><img style="float: right;" src="images/template/header_social.png" alt="" /></span></div>

Estou tentando colocar os elementos em uma linha, primeiro com os ícones sociais verticalmente no centro do logotipo e o logotipo horizontalmente no centro da página e não apenas o espaço à direita da tag de boas-vindas como está no momento.Então, em termos de capacidade de resposta, gostaria que o logotipo permanecesse absolutamente centralizado à medida que a largura diminui, com a tag de boas-vindas à esquerda ficando menor para caber e os ícones sociais ficando abaixo e centralizados.Espero que isto faça sentido.

Estou usando o modelo de tema foguete, Hadron e Joomla para tentar construir meu site.O cabeçalho deve se expandir por todo o navegador e deve ser capaz de responder a qualquer tamanho de tela.Eu sei que o pórtico possui algumas dessas ferramentas integradas, mas não tenho ideia de como incorporá-las.Qualquer ajuda para qualquer um dos meus problemas seria muito apreciada ^_^

Um milhão de agradecimentos!

Aqui está uma imagem do conceito do meu site:

Answer 1

Graças à combinação de respostas aqui e algumas pesquisas adicionais, consegui realizar meus esforços com o código a seguir.

<div class="gantry-img">
<div class="gantry-img welcometag" style="text-align: left; width: 30%; min-width: 200px; float: left; max-width: 100%;"><img style="margin-left: 0; width: 100%;" src="images/template/header_welcometag.png" alt="" /></div>
<div class="gantry-img clogo" style="text-align: center; width: 40%; min-width: 100px; float: left; margin-top: 32px;"><img src="images/template/header_logo.png" alt="" /></div>
<div class="gantry-img socialcons" style="text-align: right; width: 30%; min-width: 200px; float: left; margin-top: 94px; margin-left: -5%;"><img style="float: right;" src="images/template/header_social.png" alt="" /></div>
<div style="clear: both;"> </div>
</div>

obrigado a @ilias

depois, com alguma outra pesquisa, fez uso do @mídia todos e adicionei isso no css:

@media all and (max-width : 768px) {.welcometag{display:none;} .clogo{width: 100% !important; clear:both; margin-top: 5px !important;} .socialcons{min-width:100px !important; width: calc(100% - 10px) !important; clear: both !important;text-align: center !important;padding: 15px 5px 5px 5px !important;margin: 20px 0px 0px 0px !important;float: none !important;} .socialcons img{float:none !important;}}

O que isso faz é remover a tag de boas-vindas e reposicionar e dimensionar o logotipo e os ícones sociais para qualquer tela menor que 768px de largura.

Obrigado a todos que contribuíram =)

Answer 2

Isso, eu acho, vai lhe dar um começo - violino.

HTML

<div class='topheader'>
    <div class='leftthird'>Welcome tag</div>
    <div class='righttwothirds'>
        <div class='centerdiv'>Logo</div>
        <div class='rightminidiv'>Social Icons</div>
    </div>
</div>

CSS

.topheader {
    width: 80%;
    height: 100px;
    background-image: url();
    border: 1px solid black;
    margin: 10px auto;
}
.leftthird {
    width: 33%;
    height: 100%;
    background-color: yellow;
    float: left;
}
.righttwothirds {
    width: 67%;
    height: 100%;
    background-color: transparent;
    float: right;
}
.centerdiv {
    width: 50%;
    height: 100%;
    background-color: green;
    color: white;
    float: left;
}
.rightminidiv {
    width: 50%;
    height: 100%;
    background-color: blue;
    color: white;
    float: right;
}

Coloque sua imagem de fundo no cabeçalho onde tenho o URL em branco.

Brinque com ele no violino, até mesmo vincule suas imagens de fundo a ele e, quando estiver do jeito que deseja, basta copiá-lo do violino.

Answer 3

Em vez disso, você deve criar divs de spans e ajustar suas dimensões conforme desejar.Ajuste o alinhamento e as larguras mínimas e elas serão centralizadas quando você desejar.

<div class="gantry-img">
    <div style="text-align: left; width:30%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_welcometag.png" style="margin-left:0; width:100%;">
    </div> 
    <div style="text-align: center; width:40%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_logo.png">
    </div> 
    <div style="text-align: right; width:30%; min-width:200px; float:left;" class="gantry-img">
        <img alt="" src="/joomla/test/images/template/header_social.png" style="float: right;">
    </div>
    <div style="clear:both;"></div>
</div>