CSS Header Responsif Responsif

Question

J'ai googling de haut en bas en essayant de trouver une solution, mais j'ai vraiment besoin d'une aide personnelle. J'essaie de créer un en-tête réactif composé de 4 parties:

1. L'en-tête BG
2. Balise de bienvenue à gauche
3. logo au centre
4. icônes sociales sur le droit

Voici une copie de la version locale sur laquelle je travaille: http://jaredbrandjes.co.za/joomla/test/

L'en-tête BG est de 1920 de large et je l'ai renversé et la dupliquiez-la et faites-la répéter-x pour tout écrans plus grand. Il suffit de mettre à l'échelle un peu lorsque la largeur est réduite à moins de 500PX. Environ 70% de sa taille devrait faire l'affaire, mais je ne sais pas comment faire cela.

Ceci est le code que j'ai inséré dans l'index.php pour créer mon en-tête 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>

Ceci est mon code actuel pour les éléments 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>

J'essaie d'obtenir les éléments d'une ligne d'abord avec les icônes sociales au centre vertical du logo et du logo horizontalement centre de la page et non seulement l'espace à droite de la balise de bienvenue comme il est à la moment. Ensuite, en termes de réactivité, j'aimerais que le logo reste absolument central car la largeur réduit avec la balise de bienvenue de la gauche devenant plus petite pour s'adapter aux icônes sociales de tomber en dessous et centrée. J'espère que cela a du sens.

J'utilise le modèle de thème de la fusée, Hadron et Joomla pour essayer de construire mon site. L'en-tête doit élargir pleinement le navigateur et doit pouvoir répondre à n'importe quelle taille d'écran. Je sais que la portique a certains de ces outils intégrés mais je n'ai aucune idée de la façon de les incorporer. Toute aide pour tous mes problèmes serait grandement appréciée ^ _ ^

Merci un million!

Voici une image de mon concept de site:

Answer 1

Grâce à la combinaison de réponses ici et à quelques recherches supplémentaires que j'ai réussi à accomplir mes efforts avec le code suivant.

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

Merci à @ilias

Puis avec d'autres recherches, utilisez la @media tous et l'a ajouté dans le 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'est-ce que cela fait, c'est supprimer la balise de bienvenue et repositionner et mettre à l'échelle le logo et les icônes sociales pour n'importe quel écran inférieur à 768 px de large.

Merci à tous ceux qui ont contribué=)

Answer 2

Ceci, je pense, vous donnera un démarrage - 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;
}

Mettez votre image de fond dans le topheader où j'ai l'URL vide.

Joue avec elle dans le violon, même lier les images de vos antécédents, puis une fois que vous l'avez obtenu comme vous le souhaitez, copiez-le du violon.

Answer 3

Vous devez plutôt faire diviser les couvre-corps, puis ajuster leurs dimensions comme vous le souhaitez.Ajustez l'alignement et les largeurs minimales et ils serreront centrés lorsque vous le souhaitez.

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