1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

Картинка налезает на другую картинку

Тема в разделе "Для новичков", создана пользователем ast, 17.04.2014.

Загрузка
  1. ast

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

    Регистрация:
    18.02.13
    Сообщения:
    95
    Симпатии:
    13
    Версия XF:
    1.4.1
    Вот так выглядит при моем разрешении 1440х900
    [​IMG]
    А так при меньшем
    [​IMG]
    Шапка состоит из трех блоков отдельно первые три фотки,потом вывеска с названием,и отдельно другие три фотки.
    Как сделать что бы при меньшем разрешении не налезали фотки на вывеску?
    Код самой шапки вот такой
    Код:
    #sh > div {
    background: url("http://img-fotki.yandex.ru/get/9823/175796836.e/0_e6c20_43e93b35_XL.png");
    background-repeat: no-repeat;
    background-position: left ;
    }
    #log > div {
    background: url("http://img-fotki.yandex.ru/get/9743/175796836.e/0_e6c21_f3df96d6_M.png");
    margin-left: 30%;
    margin-right: 30%;
    background-repeat: repeat-x;
    background-position: center top;
    }
    #shap > div {
    background: url("http://img-fotki.yandex.ru/get/9823/175796836.e/0_e6c22_9b7b2f53_L.png");
    background-repeat: no-repeat;
    background-position: right ;
    .xenOverlay.memberCard .userInfo h3 a
    {
     
  2. Aksim

    Aksim Местный

    Регистрация:
    15.09.12
    Сообщения:
    312
    Симпатии:
    89
    Я бы собрал все в 1 картинку и загрузил ее в корень сайта где и должно находиться лого а не подгружаться со стремных яндухов.

    тогда примерный код такой
    Код:
    background-size: cover;
    position:top;
    height:100%;
    background-attachment: fixed;
     
    Последнее редактирование: 17.04.2014
  3. ast

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

    Регистрация:
    18.02.13
    Сообщения:
    95
    Симпатии:
    13
    Версия XF:
    1.4.1
    Я потом перезалью в корень сайта.
    В одну картинку не пойдет,потому что на большом разрешении она будет торчать как обрубок в центре форума.Из за этого и была поделена на три части.
    [​IMG]
     
  4. Aksim

    Aksim Местный

    Регистрация:
    15.09.12
    Сообщения:
    312
    Симпатии:
    89
    добавил код для того что бы не торчала как обрубок, Изначально картинку сделайте с высоким разрешением например 1900, думаю хватит на любое разрешение. Попробуйте, а если уж и делать из 3ех частей, то думаю нужно все оформлять таблицами, иначе так и будет при смене разрешения.
     
  5. ast

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

    Регистрация:
    18.02.13
    Сообщения:
    95
    Симпатии:
    13
    Версия XF:
    1.4.1
    Если изначально делать с высоким разрешением тогда она будет вылезать за пределы форума и растягивать форум на меньшем разрешении и появиться полоса прокрутки по горизонтали.
     
  6. Aiden

    Aiden Местный

    Регистрация:
    03.01.12
    Сообщения:
    202
    Симпатии:
    74
    Версия XF:
    1.4.3
    А зачем мучиться? Создайте слой с повторением, а после — собаку и логотип. Потом можно прилепить как одну картинку на BG:
    Код:
    background: url(/img/1.png, /img/2.png);
    background-repeat: repeat-x, no-repeat;
    background-position: initial, center;
    А чтобы у краёв было травы побольше, надо сделать ещё два изображения и всунуть их в псевдо ::before и ::after.
     
  7. Aksim

    Aksim Местный

    Регистрация:
    15.09.12
    Сообщения:
    312
    Симпатии:
    89
    Видимо Вы совсем плохо знаете html
    background-size: cover; выравнивает изображение по ширине блока (В данном случае ширине шаблона) и при этом сохраняет его размер пропорционально. То есть изображение всегда будет точно соответствовать ширине основного тела форума.
    position:top; выравнивает по центру. Кстати Ваш код "background-position: center top;" немного посмешил, в переводе на русский будет примерно "по центру в центре":thumbsup:
    background-attachment: fixed; закрепляет изображение на месте и ни каких прокруток не появляется
     
    ast нравится это.
  8. ast

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

    Регистрация:
    18.02.13
    Сообщения:
    95
    Симпатии:
    13
    Версия XF:
    1.4.1

    Да я очень плохо знаю коды :) Не все же в этом разбираются.

    Поставила шапку одной картинкой,в итоге все как и раньше,при большем получается обрубок,при меньшем шапка вообще взлетает вверх.
    --- добавлено : Apr 17, 2014 3:14 PM ---
    А можно как то закрепить допустим часть первую где три фото,зафиксировать что бы они были на месте,и часть в конце с фотками была зафиксирована,а центр сжимался,расширялся.Но тогда наверное опять будет налезать друг на друга блоки?
     
    Последнее редактирование модератором: 25.04.2014
  9. ast

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

    Регистрация:
    18.02.13
    Сообщения:
    95
    Симпатии:
    13
    Версия XF:
    1.4.1
    А как убрать отступ ,если разрешение маленькое то картинка взлетает
    [​IMG]
     

Поделиться этой страницей