CSS портал отзывчивый заголовок

Question

Я погрузился вверх и вниз, пытаясь найти решение, но мне действительно нужна личная помощь. Я пытаюсь создать отзывчивый заголовок, составленный из 4 частей:

1. заголовок bg
2. Добро пожаловать тег слева
3. логотип в центре
4. социальные иконки справа

Вот копия локальной версии, над которой я работаю: http://jaredbrandjes.co.za/jaredbrandjes.co.za/joomla/test/

Заголовок BG имеет ширину 1920 года, и я перевернул его и дублировал его и сделал его Repeat-X для любых больших экранов. Это нужно только немного масштабировать, когда ширина уменьшается до менее 500 пикселей. Около 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>

.

Я пытаюсь получить элементы подряд в первую очередь с помощью социальных иконок вертикально-центр логотипа и логотипа горизонтально центра страницы, а не просто пространство справа от приветственной бирки, как оно в момент. Затем, с точки зрения отзывчивости, я хотел бы, чтобы логотип оставался абсолютно центром, поскольку ширина уменьшается с приветственной тегом, налево, становится меньшим, чтобы соответствовать, и социальные иконы опускаются под и центрированы. Я надеюсь, что это имеет смысл.

Я использую шаблон темы ракеты, адрон и Joomla, чтобы попробовать построить мой сайт. Заголовок должен расширить полный способ браузера и должен быть в состоянии ответить на любой размер экрана. Я знаю, что поговорка имеет некоторые из этих инструментов, встроенных, но я понятия не имею о том, как их включить. Любая помощь для любой из моих проблем была бы очень оценена ^ _ ^

Спасибо миллион!

Вот изображение концепции моего сайта:

Answer 1

Благодаря сочетанию ответов здесь и некоторых дополнительных исследований мне удалось выполнить свои усилия со следующим кодом.

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

.

благодаря @ilias

Тогда с некоторыми другими исследованиями, использовали использование @media все и добавили это в 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;}}

.

Что это делает, удаляет приветственный бирку и перемещение и масштабирование логотипа и социальных значков для любого экрана шириной шириной 768px.

Благодаря всем, кто внес собой=)

Answer 2

Это, я думаю, даст вам старт - Widdle .

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

.

Поместите свое фоновое изображение в TopHeader, где у меня есть пустой URL.

Играйте с ним в скрипке, даже ссылкая ваши фоновые изображения к нему, то, как только вы получите так, как вы этого хотите, просто скопируйте его из скрипки.

Answer 3

Вы должны заставить Spans Divs вместо этого, а затем настроить свои размеры, как вы хотите.Отрегулируйте выравнивание и минимальную ширину, и они будут обернуть центрированные, когда вы хотите их.

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

.