CSS Gantry Reaptive Header

Question

Sono stato su e giù per cercare di trovare una soluzione ma ho davvero bisogno di un aiuto personale. Sto cercando di creare un'intestazione reattiva composta da 4 parti:

.
1. L'intestazione BG
2. tag benvenuto a sinistra
3. logo nel centro
4. Icone sociali a destra

Ecco una copia della versione locale a cui sto lavorando: http://jaredbrandjes.co.za/joomla/test/

L'intestazione BG è larga 1920 e l'ho capovolto e l'ho duplicato e lo ha fatto ripetere-x per eventuali schermi più grandi. Ha solo bisogno di scalare un po 'quando la larghezza è ridotta a meno di 500px. Circa il 70% delle sue dimensioni dovrebbe fare il trucco ma non sono sicuro di come farlo.

Questo è il codice che ho inserito nell'indice.php per creare la mia intestazione 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>

.

Questo è il mio codice corrente per elementi 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>

.

Sto cercando di ottenere gli elementi di fila prima di tutto con le icone sociali centro verticalmente del logo e del logo centro orizzontalmente della pagina e non solo lo spazio a destra del tag di benvenuto come è al momento. Poi, in termini di reattività, vorrei che il logo rimanga assolutamente centrato come la larghezza riduce con il tag di benvenuto a sinistra diventando più piccolo per adattarsi e le icone sociali per cadere sotto e centrata. Spero che questo abbia senso.

Sto usando il modello a tema Rocket, Hadron e Joomla per provare a costruire il mio sito. L'intestazione deve espandere il modo intero del browser e deve essere in grado di rispondere a qualsiasi dimensione dello schermo. Conosco il Gantry ha alcuni di questi strumenti costruiti, ma non ho idea su come incorporarli. Qualsiasi aiuto per tutti i miei problemi sarebbe molto apprezzato ^ _ ^

Grazie mille!

Ecco un'immagine del mio sito del sito:

Answer 1

Grazie alla combinazione di risposte qui e alcune ulteriori ricerche sono riuscito a realizzare i miei sforzi con il seguente codice.

<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>

.

Grazie a @ilias

Allora con qualche altra ricerca, fatta uso del @media tutto e ha aggiunto questo nel 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;}}

.

Cosa fa, rimuove il tag di benvenuto e riposizionare e ridimensionare il logo e le icone sociali per qualsiasi schermo inferiore a 768px largo.

Grazie a tutti coloro che hanno contribuito=)

Answer 2

Questo, penso, ti darà un inizio - 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;
}

.

Metti la tua immagine di sfondo nel topheader in cui ho l'URL vuoto.

Gioca con esso nel violino, collega anche le tue immagini di sfondo, quindi una volta che hai ottenuto come vuoi, basta copiarlo dal violino.

Answer 3

Dovresti invece rendere i divisi a cammani e quindi regolare le loro dimensioni come desideri.Regola l'allineamento e le larghezze minime e si avvolgeranno centrate quando vuoi loro.

<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>

.