За последние 24 часа нас посетили 20848 программистов и 1670 роботов. Сейчас ищут 1107 программистов ...

Не могу сделать резиновую шапку (width: 100%)

Тема в разделе "HTML и CSS", создана пользователем Makaroff, 17 мар 2012.

  1. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    Здравствуйте!Уже второй день мучаюсь над шапкой сайта, а нужного результата никак не могу добиться :( , суть заключаеться в том что я хочу сделать шапку сайта резиновой чтобы при разных разрешениях вся картинка отображалась.Пожалуйста подскажите рекомендациями или нужными свойствами css для достижения нужного результата...

    Вот код стилей шапки и div блоки в которой содержиться шапка:
    Код (Text):
    1.  
    2. <div class="header">
    3.      <div class="header-jpeg"></div>
    4.      </div>
    5. </div>
    6.  
    7. /* begin Header */
    8. div.header
    9. {
    10.   margin: 0 auto;
    11.   position: relative;
    12.   width: 100%;
    13.   height: 222px;
    14.   overflow: hidden;
    15. }
    16.  
    17. div.header-jpeg
    18. {
    19.   position: absolute;
    20.   top: 0;
    21.   left:0;
    22.   min-width:700px;
    23.   max-width:1920px;
    24.   width: 100%;
    25.   height: 220px;
    26.   background-image: url('images/header.jpg');
    27.   background-repeat: no-repeat;
    28.   background-position: center center;
    29. }        
    Размер самой шапки header.jpg - 1920x220 px

    Пожалуйста покажыте на примере как поправить код ну или что дописать доделать чтобы шапка header.jpg отображалась в блоке вся.
    Всем заранее благодарен!
     
  2. CozaNostra

    CozaNostra Активный пользователь

    С нами с:
    17 мар 2012
    Сообщения:
    25
    Симпатии:
    0
    Адрес:
    Саранск
    Помоему картинку нельзя растянуть средствами CSS.

    Можно через JS попробовать:

    определить расширение экрана и

    Код (Text):
    1. <img src="asd.jpg" width="var из js" >
    или вариант картинку выровнить по центру а фон залить под цвет картинки
     
  3. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    растянуть-то можно. не понятно, что требуется...

    поглядеть бы на картинку
     
  4. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    постараюсь подробно описать то что хочу сделать

    Добавлено спустя 1 минуту 33 секунды:
    я хочу сделать так чтобы при разных разрешениях монитора картинка которая находиться в шапке сайта отображалась именно ВСЯ а не центральная часть
     
  5. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ужимаясь по ширине или уменьшаясь пропорционально? =)
    покаж картинку
     
  6. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    а вот как это сделать с помощью css не знаю. Подскажите плиз!
     
  7. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    дык как ты хочешь? тут два варианта

    ужимаясь по ширине или уменьшаясь пропорционально? =)
     
  8. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    Вы знаете я тут уже два дня css кручу... лутше было бы пропорционально если можно если не получиться то можна и масштабированием по ширине. Вот и сама шапка http://radikal.ua/data/upload/4efc3/0fccf/9cccbb4c98.jpg
    Заранее благодарен Вам igordata
     
  9. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    и где там та картинка которую тянуть? о_О
     
  10. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
  11. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    мммм... ты прости. ты когда поймешь, что там должно быть, тогда и решение придет =)
     
  12. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    а что там не правильно?? картинку нужно делать маленьких размеров а потом масштабировать(делать большей по размеру) по разрешению мониторов? так чтоли? плиз подскажите, ведь второй день мучаюсь... :((
     
  13. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ну если ты хочешь полностью воссоздать такое дело как у тебя, то тут вобще не надо использовать картинки кроме как побокам.
     
  14. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    Уважаемый чего-то Вы меня путаете...честное слово, то говорили - ужимаясь по ширине или уменьшаясь пропорционально? =)
    покаж картинку.
    и что мне тогда нужно сделать?

    Добавлено спустя 18 минут 28 секунд:
    Жалко что на форуме нету смайлов...
     
  15. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ну можно всякие хитрости использовать. пока картинку не увидишь - нипанятна что именно надо делать.

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

    можно сделать в несколько слоев, если в середке будет изображение. короче не сдавайся.
     
  16. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    1.Человек я тебе что не показал шапку сайта?
    2.Ты вообще понимаеш что я хочу сделать из шапкой сайта????????
     
  17. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    такую шапку как у тебя можно сделать резиновой так как я уже сказал: две картинки побокам, в середине див с текстом в бекграунде которого бело-фиолетовая твоя картинка.
    если принципиально текст держать картинкой - держи, на виде это не скажется.
     
  18. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    Коль уж ты так красиво написал то покажы все это на рабочем примере, ато я тебя никак не пойму, чего-то ты там лепиш без начала и конца, а то что ты и не хочеш понимать что и как есть на самом деле это твое дело, может ты все и понял с первого разу ну вот как сделать картинку масштабируемой с помощью "%" - проценотв ты говорить не хочеш?!

    Добавлено спустя 3 минуты:
    да я то не спорью что шапку можно сделать резиновой ну вот то что две картинки по бокам так мне НЕ НУЖНО!у меня одна единственная картинка на весь <div> блок, и мне нужно чтобы при разных разрешениях монитора картинка которая в шапке ВСЯ отображалась!
     
  19. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    учи русский =)

    то что тебе НЕ НУЖНО так как надо делать - я уже понял.

    если ты твердо решил пить газировку жопой, то я в тебя верю - у тебя получится. но я в этом участвовать не хочу =)
     
  20. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    если ты не знаеш как решить проблему то зачем суешь свой нос туда куда не нужно?охота початиться - чатов в нете полно...а проблему с картинками я уже решил, все делается элементарно нужно было указать в <img src="" width="100%" height="100%"/>
     
  21. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    И что за ужас получился, можно посмотреть?
     
  22. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    ну и прекрасно
     
  23. Makaroff

    Makaroff Активный пользователь

    С нами с:
    8 мар 2012
    Сообщения:
    68
    Симпатии:
    0
    Адрес:
    Одесса
    что прекрасно?

    Добавлено спустя 6 минут 40 секунд:
    Вот Вашего совета в данной теме я и ждал, ну недавно сам реализовал то что нужно, а именно единственная картинка которая находиться в шапке сайта масштабируеться под разные разрешения мониторов это то что я и хотел сделать...
     
  24. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    прекрасно то, что ты уже всё как бы сделал как бы =)
    это ж элементарно =)
    пиздеть-то не мешки ворочать. уж я-то знаю
     
  25. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Это хорошо, что у вас вышло то, чего хотели.
    Просто такое масштабирование я лично на сайтах не встречал, т.к. картинку будет срашно плющить. Если этот эффект и требуется, то всё ок, вас можно поздравить. Но обычно резиновая вёрстка подразумевает умное расчленение картинки так, чтобы ничего не плющило.