CAs de receptores de pórtico CSS

Question

He estado furioso arriba y abajo tratando de encontrar una solución, pero realmente necesito ayuda personal. Estoy tratando de crear un encabezado sensible compuesto por 4 partes:

1. el encabezado bg
2. etiqueta de bienvenida a la izquierda
3. logo en el centro
4. iconos sociales a la derecha

Aquí hay una copia de la versión local en la que estoy trabajando: http://jaredbrandjes.co.za/joomla/test/

El encabezado BG es de 1920 de ancho y lo he volcado y lo duplicó y lo hizo repetir-X para cualquier pantalla más grande. Solo necesita escalar un poco cuando el ancho se reduce a menos de 500px. Alrededor del 70% de su tamaño debe hacer el truco, pero no estoy seguro de cómo hacer esto.

Este es el código que he insertado en el index.php para crear mi encabezado 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 es mi código actual para los 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>

Estoy tratando de obtener los elementos en una fila en primer lugar con los iconos sociales, el centro vertical del logotipo y el logotipo, el centro horizontal de la página y no solo el espacio a la derecha de la etiqueta de bienvenida, como está en el momento. Luego, en términos de capacidad de respuesta, me gustaría que el logotipo permanezca absolutamente central a medida que el ancho se reduce con la etiqueta de bienvenida de la izquierda en la izquierda, cada vez más pequeño y los iconos sociales caen debajo y centrados. Espero que esto tenga sentido.

Estoy usando la plantilla de tema de cohete, Hadron y Joomla para intentar construir mi sitio. El encabezado debe ampliar la forma completa del navegador y debe poder responder a cualquier tamaño de pantalla. Sé que Gantry tiene algunas de estas herramientas incorporadas, pero no tengo idea de cómo incorporarlos. Cualquier ayuda para cualquiera de mis problemas sería muy apreciada ^ _ ^

¡Gracias un millón!

Aquí hay una imagen del concepto de mi sitio:

Answer 1

Gracias a la combinación de respuestas aquí y algunas investigaciones adicionales, logré realizar mis esfuerzos con el siguiente código.

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

Gracias a @ilias

Luego, con alguna otra investigación, utilizó el @media todos y agregó esto en el 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;}}

Qué hace esto, es eliminar la etiqueta de bienvenida y reposicionar y escalar el logotipo y los iconos sociales para cualquier pantalla más pequeña que 768px de ancho.

Gracias a todos los que contribuyeron=)

Answer 2

Esto, creo, te dará un inicio - Fiddle .

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

Ponga su imagen de fondo en la TOPTHEADER donde tengo la URL en blanco.

Juega con él en el violín, incluso vincula tus imágenes de fondo, una vez que lo entiendes como lo quieres, simplemente cópielo del violín.

Answer 3

Debe hacer que los DIV de Spans en su lugar y luego ajuste sus dimensiones como desee.Ajuste la alineación y los anchos mínimos y se envolverán centrados cuando lo desee.

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