Адаптивна заглавка на CSS портала

Търсих в Google нагоре-надолу, опитвайки се да намеря решение, но наистина имам нужда от лична помощ. Опитвам се да създам адаптивна заглавка, съставена от 4 части:

  1. Заглавката BG
  2. Етикет за добре дошли вляво
  3. Лого в центъра
  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>

Опитвам се да подредя елементите в един ред преди всичко със социалните икони вертикално в центъра на логото и логото хоризонтално в центъра на страницата, а не само пространството вдясно от тага за добре дошли, както е в момента. След това, по отношение на отзивчивостта, бих искал логото да остане абсолютно централно, тъй като ширината намалява, като етикетът за добре дошли вляво става по-малък, за да пасне, а социалните икони да падат отдолу и центрирани. Надявам се, че това има смисъл.

Използвам шаблона за ракетна тема, Hadron и joomla, за да се опитам да изградя сайта си. Заглавката трябва да разширява целия начин на браузъра и трябва да може да отговаря на всеки размер на екрана. Знам, че Gantry има вградени някои от тези инструменти, но нямам представа как да ги включа. Всяка помощ за който и да е от проблемите ми ще бъде високо оценена ^_^

Благодаря милиони!

Ето изображение на моята концепция за сайт: концептуален дизайн на уебсайт


html css responsive-design joomla3.0
person 4t0m1c    schedule 08.01.2014    source източник
comment
Можете ли да ни покажете вашите html и css досега?   -  person TimSPQR    schedule 09.01.2014
comment
За съжаление кодът не се показваше правилно. Има моите редакции, иначе всичко е оригинална joomla и rockettheme. Ще се опитам да кача моята локална компилация, за да я разгледате. =)   -  person 4t0m1c    schedule 09.01.2014
comment
Добавих URL адреса, за да го разгледате =) Благодаря много!   -  person 4t0m1c    schedule 09.01.2014

Отговори (3)


arrow_upward
1
arrow_downward

Мисля, че това ще ви даде начало - цигулка.

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 адрес.

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

person TimSPQR    schedule 09.01.2014

arrow_upward
1
arrow_downward

Вместо това трябва да направите span 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>
person ilias    schedule 09.01.2014
comment
Благодаря много, помогна ми =) - person 4t0m1c; 09.01.2014
comment
@JaredBrandjes Радвам се, че помогнах! Можете да гласувате за, тъй като го намирате за полезно;) - person ilias; 09.01.2014

arrow_upward
0
arrow_downward

Благодарение на комбинацията от отговори тук и някои допълнителни изследвания успях да постигна начинанията си със следния код.

<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 all и добавих това в 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 широк.

Благодаря на всички, които допринесоха =)

person 4t0m1c    schedule 09.01.2014