html - CSS 龙门式响应头

Question

我一直在 google 上上下下寻找解决方案，但我确实需要一些个人帮助。我正在尝试创建一个由 4 个部分组成的响应式 header :

1. 标题BG
2. 左侧欢迎标签
3. Logo 在中间
4. 右侧的社交图标

这是我正在处理的本地版本的副本: http://jaredbrandjes.co.za/joomla/test/

标题 bg 是 1920 宽，我将它翻转并复制它并使其在任何更大的屏幕上重复 x。当宽度缩小到小于 500px 时，它只需要缩放一点。其大小的大约 70% 应该可以解决问题，但我不确定该怎么做。

这是我插入到 index.php 中以创建标题 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>

这是我当前对元素 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>

我试图让元素排成一排，首先社交图标位于 Logo 的垂直中心， Logo 位于页面的水平中心，而不仅仅是欢迎标签右侧的空间，就像在片刻。然后，就响应能力而言，我希望 Logo 保持绝对居中，因为宽度减小，左侧的欢迎标签变得更小以适合并且社交图标落在下方并居中。我希望这是有道理的。

我正在使用火箭主题模板、Hadron 和 joomla 来尝试构建我的网站。 header 必须扩展浏览器的完整方式，并且必须能够响应任何屏幕尺寸。我知道 gantry 内置了其中一些工具，但我不知道如何整合它们。对我的任何问题的任何帮助将不胜感激^_^

感谢一百万!

这是我的网站概念图:

Answer 1

我认为这会给你一个开始 - 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;
}

将您的背景图片放在我有空白 URL 的顶部标题中。

在 fiddle 中使用它，甚至将您的背景图像链接到它，然后一旦按照您想要的方式获得它，只需从 fiddle 中复制它即可。