картинка шапки во всю длину

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем kiper, 05.01.2012.

  1. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    Дорогие форумчане помогите пожалуйста.

    пытался изменить шапку шаблона JA Purity сайт http://eagida.ru/ удалил всё лишнее и никак не могу понять как мне растянуть шапку по всему экрану и какой размер картинки должен быть .
    Пытался найти в поиске но не смог разобраться

    Код (PHP):
    1. /* HEADER
    2. --------------------------------------------------------- */
    3. #ja-headerwrap {
    4.        width: 602px;
    5.     background: url(../images/header.png) no-repeat top center;
    6.     color: #CCCCCC;
    7.     line-height: normal;
    8.     height: 80px;
    9. }
    10.  
    11.  
    12. /* Search */
    13. #ja-search {
    14.     padding-left: 20px;
    15.     background: url(../images/icon-search.gif) no-repeat center left;
    16.     position: absolute;
    17.     bottom: 15px;
    18.     right: 0;
    19. }
    20.  
    21. #ja-search .inputbox {
    22.     width: 120px;
    23.     border: 1px solid #333333;
    24.     padding: 3px 5px;
    25.     color: #999999;
    26.     background: #444444;
    27.     font-size: 92%;
    28. }
     
  2.  
  3. Offline

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

    Регистрация:
    08.07.2011
    Сообщения:
    31
    Симпатии:
    2
    Пол:
    Женский
    У Вас резиновый шаблон, поэтому сказать, какого размера должна быть картинка сложно. Я бы предложила сделать ее выше, т.е. не 80px, а где-то 120-150px, ширину картинки сделать 960px. Еще сделать цвет фона таким же, как и на картинке, чтоб скрыть границы изображения.
    Код (CODE):
    1. #ja-headerwrap {
    2.     [B]width: 960px;
    3.     height: 150px;[/B]
    4.     background: url(../images/header.png) no-repeat top center;
    5.    [B] color: #FFFFFF;  [/B]      
    6.     line-height: normal;
    7. }

    Но можно решить проблему и по-другому. Сделать две отдельные картинки (одну с названием, другую с контактной информацией) и зафиксировать их по краям страницы (одну слева, другую справа). В таком случае, какой бы ширины не был сайт, картинки будут растягиваться вместе с ним. :)
     
  4. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    я поменял картинку на другую расширением в 1000 на 232

    теперь код выглядит так

    Код (PHP):
    1. #ja-headerwrap {
    2.        width: 1000px;
    3.     background: url(../images/video2.jpg) no-repeat top center;
    4.     color: #CCCCCC;
    5.     line-height: normal;
    6.     height: 232px;


    но картинка так и не растянулась во всю длину
     
  5. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    пытался сделать так

    Код (PHP):
    1. #ja-headerwrap {
    2.        width: 100%;
    3.     background: url(../images/video2.jpg) no-repeat top center;
    4.     color: #CCCCCC;
    5.    line-height: normal;
    6.     height: 232px;


    но так тоже не получилось
     
  6. Offline

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

    Регистрация:
    08.07.2011
    Сообщения:
    31
    Симпатии:
    2
    Пол:
    Женский
    Чтоб она растянулась, нужно ширину в процентах поставить.
    Код (CODE):
    1. #ja-headerwrap {
    2.         width: 100%;
    3.     background: url(../images/video2.jpg) no-repeat top center;
    4.     color: #CCCCCC;
    5.     line-height: normal;
    6.     height: 232px;

    Но в таком случае изображение исказится!
     
    kiper нравится это.
  7. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской

    так тоже ничего не получилось
     
  8. Offline

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

    Регистрация:
    08.07.2011
    Сообщения:
    31
    Симпатии:
    2
    Пол:
    Женский
    На самом деле не пойму, почему не растягивается картинка. Но даже если и получится, изображение ведь исказится?
    P.S. Спасибо за плюсик :)
     
  9. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    вот и я не пойму почему оно не растягивается :(
     
  10. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 034
    Симпатии:
    518
    Пол:
    Мужской
    kiper,
    удали и посмотри
     
  11. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    удалил, не получилось :(
     
  12. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 034
    Симпатии:
    518
    Пол:
    Мужской
    Да подожди.Результат видел?Убери процент в #ja-wrapper {min-width: 100%;,// и поменяй на 960px.
    Нужно шаблон переверстать,или искать ошибки.
     
  13. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    вроде я приближаюсь к истине сделал так

    Код (PHP):
    1. #ja-headerwrap {
    2. background: url(../images/video2.jpg) no-repeat top center;
    3. background-size: 100%;
    4. color: #CCC;
    5. line-height: normal;
    6. height: 232px;
    7. }


    теперь ширина растянулась но при изменении масштаба картинка остается неподвижна а всё остальное меняется
     
  14. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    результат появился после добавления background-size: 100%;
     
  15. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    всё получилось всем большое спасибо

    добавил background-size: 100% 100%;

    и всё пошло
     
  16. Offline

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

    Регистрация:
    08.07.2011
    Сообщения:
    31
    Симпатии:
    2
    Пол:
    Женский
    У меня есть для Вас решение!
    В index.php шаблона заменить этот код
    Код (PHP):
    1. <div id="ja-headerwrap"> </div>
    на этот
    Код (PHP):
    1. <div id="ja-headerwrap">
    2.     <div class="left"><div class="right"></div></div>
    3. </div>

    В CSS шаблона вставить
    Код (CODE):
    1. /* HEADER
    2. --------------------------------------------------------- */
    3. #ja-headerwrap {
    4.     background: url(../images/video4.jpg) repeat-x top left;
    5. }
    6. .left {
    7.     position:relative;
    8.     background: url(../images/video1.jpg) no-repeat top left;
    9.     color: #CCCCCC;
    10.     line-height: normal;
    11.     height: 232px;
    12. }
    13. .right {
    14.     position:relative;
    15.     background: url(../images/video3.jpg) no-repeat top right;
    16.     color: #CCCCCC;
    17.     line-height: normal;
    18.     height: 232px;
    19. }


    Картинки прилагаются :)

    P.S. Так все элементы на шапке не будуть искажаться при изменении ширины сайта!
     

    Вложения:

    • video4.jpg
      video4.jpg
      Размер файла:
      8 КБ
      Просмотров:
      0
    • video3.jpg
      video3.jpg
      Размер файла:
      84 КБ
      Просмотров:
      1
    • video1.jpg
      video1.jpg
      Размер файла:
      39.7 КБ
      Просмотров:
      1
  17. Offline

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

    Регистрация:
    01.12.2011
    Сообщения:
    155
    Симпатии:
    12
    Пол:
    Мужской
    оно и не растянется
    #ja-headerwrap {
    width: 100%;
    Это ты задаёшь ширину контейнера, в котором изображение.
    А сама картинка и не будет растягиваться, так как no-repeat, даже если сделать чтобы растягивалась,
    будет дублироваться.
     
  18. Offline

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

    Регистрация:
    08.07.2011
    Сообщения:
    31
    Симпатии:
    2
    Пол:
    Женский
    У Вас же картинка искажается? :)
     
  19. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    большое спасибо щас попробую, картинку только сначала другую сделаю, данная картинка тестовая
     
  20. Offline

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

    Регистрация:
    21.09.2011
    Сообщения:
    13
    Симпатии:
    0
    Пол:
    Мужской
    а вы из какого браузер смотрите у меня в хроме всё путём
     
  21. Offline

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

    Регистрация:
    08.07.2011
    Сообщения:
    31
    Симпатии:
    2
    Пол:
    Женский
    Тут скорее не в браузере дело, а в разрешении экрана. У меня 1600х900 и она уже в ширину растянулась. Смотрится то нормально, но все же это не совсем корректное решение, как на мой взгляд. Ведь неизвестно, что с ней будет, если у пользователя будет монитор с разрешением 2048×1536 ;)
     

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

Загрузка...