Адаптирование шапки сайта

Discussion in 'Изменение шаблона (кастомизация)' started by derenikp, Jan 25, 2018.

Tags:
  1. derenikp
    Offline

    derenikp Недавно здесь

    Joined:
    Jan 13, 2017
    Messages:
    13
    Likes Received:
    0
    Gender:
    Male
    Здравствуйте, имеется сайт buggai.ru на joomla 2.5, пытаюсь изменить фон в шапке, но сделав это так что бы на мониторах с любым диаметром шапка выглядела одинаково (сейчас на всех мониторах по разному ) проще говоря нужно чтобы шапка подстраивалась под размер монитора, надеюсь смог объяснить, ниже код шапки.

    .header_box {
    background: url("../images/blue.jpg") repeat-x center top #ffffff;
    border-bottom: 1px solid #FFFFFF;
    box-shadow: 0 0 5px rgba(17, 17, 17, 0.32);
    overflow: hidden;
    padding:150px 0px 115px ;
    }
     
    derenikp, Jan 25, 2018
    #1

  2. Ads Master

     
  3. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    Я применяю разные правила max-width:100%, обязательно width:100% , box:size:cover, etc
     
    OlegK, Jan 25, 2018
    #2
  4. derenikp
    Offline

    derenikp Недавно здесь

    Joined:
    Jan 13, 2017
    Messages:
    13
    Likes Received:
    0
    Gender:
    Male
    Попробовал применить, ничего не изменилось, может кто нибудь за определенную плату согласиться сделать ?
     
    derenikp, Jan 25, 2018
    #3
  5. OlegK
    Offline

    OlegK Russian Joomla! Team Staff Member ⇒ Профи ⇐

    Joined:
    Jan 17, 2011
    Messages:
    7,812
    Likes Received:
    771
    Gender:
    Male
    1200 руб ? или в пользу форума и статус получишь Тарифный план: Спонсор 300 руб. за 1 месяц
    Ссылку на сайт напиши. А обязательно фоновая картинка, попробуй прописать в коде ссылку на картинку и указать ширину и высоту.
     
    OlegK, Jan 25, 2018
    #4
  6. Offline

    stendapuss Пользователь

    Joined:
    Sep 9, 2011
    Messages:
    324
    Likes Received:
    4
    Gender:
    Male
    Можно и так:
    Код (css):
    1. body.site{border-top:0px solid #000000;padding:20px;box-shadow: 0px 0px 0px #FFFFFF;
    2. background: url("/images/2.png") no-repeat;
    3.     -moz-background-size: 100%;
    4.     -webkit-background-size: 100%;
    5.     -o-background-size: 100%;
    6.     background-size: 100%;  
    7.     }

    И для мобилы другую картинку сделать (если надо), текст крупнее. Чтоб было видно что написано. И отрегулировать для разных разрешений типа
    Код (css):
    1. @media (min-width: 200px) and (max-width: 600px) {body.site{background: url("/images/2_1.png") no-repeat;
    2.     -moz-background-size: 100%;
    3.     -webkit-background-size: 100%;
    4.     -o-background-size: 100%;
    5.     background-size: 100%;  
    6.     }}
     
    stendapuss, Jan 26, 2018
    #5
< Шаблон от Shape 5, русский язык и наполнение | Joomla дополнительное поле list >

Share This Page

Loading...