Резиновость сайта на div

Тема в разделе "Веб-дизайн", создана пользователем SpaceW, 21 окт 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. SpaceW

    SpaceW Постоялец

    Регистр.:
    27 сен 2007
    Сообщения:
    95
    Симпатии:
    45
    Здравствуйте! Встала проблема с резиновым сайтом: нужно, что бы сайт все время вписывался в окно браузера, при этом широкоформатные мониторы и соответствующее разрешение так же учитывается. Все бы ничего, да вот компоновка шаблона так себе..
    Вот, например, картинка в шапке, которая сейчас идет фоном - каким образом можно ее масштабировать, вообще не понятно. А по задумке при любом разрешении все должно смотреться в одних и тех же пропорциях...

    Кто-нибудь сталкивался с похожими ситуациями? Как кто добивался нормального масштабирования дивов относительно монитора и другу друга?
     

    Вложения:

    • shab.jpg
      shab.jpg
      Размер файла:
      307,5 КБ
      Просмотров:
      15
  2. alfaexpert

    alfaexpert

    Регистр.:
    23 июл 2008
    Сообщения:
    183
    Симпатии:
    27
    При отрисовке дизайна нужно учитывать такой момент резиновый или не резиновый будет дизайн
    Вот например http://sinoptikov.net или http://vlad-kniga.ru/ шапка там состоит из градиентов особенно посмотри http://vlad-kniga.ru/
    Все элементы сделаны так что за счет градиентов все тянется и тоже самое тебе нужно сделать в дизайне
    По схематичному описание трудно сказать что нужно изменить.
     
  3. askarbin

    askarbin

    Регистр.:
    31 мар 2009
    Сообщения:
    293
    Симпатии:
    36
    На самом деле картинку шапки неплохо было бы увидеть, макет во вложении не дает никакого представления о сайте. Ясно, что если необходимо сохранять пропорции, то лучше всего подойдет ширина боковых дивов в процентах, а по поводу шапки, как правило, два варианта:
    1.Берешь свою картинку и на repeat-x добавляешь к ней справа полосочку
    2.Разбиваешь свою картинку на 2, одну ровняешь по левому краю, другую по правому, а полосочку на repeat-x вставляешь между ними

    Если есть желание (или возможность) выложи картинку, посмотрим, тогда будет проще что-то сказать
     
  4. Shpek

    Shpek Создатель

    Регистр.:
    21 июл 2009
    Сообщения:
    21
    Симпатии:
    0
    я всегда наоборот делаю, дивы 100% по ширине, а в них где надо картинку свести, делаю таблицы, чтоб растягивалась при разных размерах, но это в основном всегда где есть повторяющийся бэграунд, а если рисунок без повторюх, то для етого нужен рисунок хорошего качества и размеров, но опять же прогружатца он долго будет!

    Ты покажи рисунок, хотя бы макет чтоли!
     
  5. SpaceW

    SpaceW Постоялец

    Регистр.:
    27 сен 2007
    Сообщения:
    95
    Симпатии:
    45
    Вообщем, картинка сама такая:
    [​IMG]

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

    А никто не делал так, что бы картинку масштабировать в зависимости от ширины и высоты браузера? главное что б высота была пропорциональна, а ширину можно зеленым цветом догнать..

    Думаю о яве скрипте, но вспоминая манипуляции через него с картинками, качество, по моему, при уменьшении было плохое..
     
  6. Shpek

    Shpek Создатель

    Регистр.:
    21 июл 2009
    Сообщения:
    21
    Симпатии:
    0
    высоту диву пропиши или таблице (в чем делать будешь) и она везде одинаковая будет, а по ширине повторюхами добьешь!
     
  7. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Если тебе надо чтобы левое меню было 250 пикселей а все остальное уходило на контент. Как ты укажешь такий дизайн в процентном отношении? хотел бы посмотреть на это.
     
  8. _axl

    _axl Постоялец

    Регистр.:
    24 сен 2008
    Сообщения:
    50
    Симпатии:
    8
    Там, где у тебя красные линии ты картинку не потянешь, будет заметно.

    можешь заготовить несколько картинок, шириной под разные разрешения и js подставлять нужную. Способ, некрасивый, но работает.

    Есть еще один способ, можно в фотошопе аккуратно растянуть картинку, размножив похожие места( там где у тебя газон, к примеру ) сделав ее очень длинной, 5000 пикселей к примеру, и вставить только ее.
    Т.е. всегда будет видно только часть этой картинки, столько, сколько у пользователя монитор по ширине. Правда в этом случае справа у тебя не будет видать то место, где газон перешел в однотонный цвет.
    Способ тоже не корректный, но соответсвует задаче: потянуть не тянущееся. Изначально надо трахать дизайнеру мозги, чтобы если берет такие фоны, то пусть не ставит задачу растянуть их.

    Я когда-то верстал такой ужас, замечания, что это бред, дизайнерша слушать не стала, так что плюнул и сделал через js: http://cp.vl.ru/
     
  9. The Finn

    The Finn Постоялец

    Регистр.:
    30 авг 2009
    Сообщения:
    80
    Симпатии:
    9
    _axl, я тоже когда-то юзал js, чтоб подогнать под разные моники, но покуда не у всех включены js, приходиться искать другой выход.

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

    Пример такой реализации:
    http://free-get.ru/
     
  10. deldemonio

    deldemonio Писатель

    Регистр.:
    11 мар 2009
    Сообщения:
    9
    Симпатии:
    0
    у меня такой вопрокак мне растянут шапку и бегун под ней на все мониторы и браузеры пример сайта
    если нужно могу дать css код и html код
    ксс
    Код:
    body,html {
      padding          : 0;
      margin           : 0;
                 }
    
    td, tr, p, div {
      font-family      :  Arial, Helvetica, sans-serif;
      color            : #ADBDCC;
      font-size        : 13px;
      line-height      : 16px;
    }
    
    hr {
      color            : #7E8890;
      height           : 1px;
      width            : 100%;
    }
    
    a:link, a:visited {
      color            : #B5BBBF;
      text-decoration  : underline;
      
    }
    a:hover {
      color            : #9AA2A7;
      text-decoration  : underline;
      
    }
    
    ul {
      margin           : 2px;
      padding-left     : 10px;
      list-style       : none;
    }
    
    li {  
      line-height      : 14px;
      padding-left     : 14px;
      padding-top      : 2px;
      background-image : url(../images/bullet.gif) ;
      background-repeat: no-repeat;
      background-position: 0px 5px;
    }
    
    ol li {
    background-image: none;
    }
    
    form {
    margin           : 0; 
    padding          : 0;
    }
    
    .inputbox {
     color        : #000000;
     background   : #818B95;
     border       : 1px solid #8E9CA8;
     margin       : 3px 0;
    
    }
    
    form select.button{
     color        : #000000;
     background   : #E2E7EA;
    }
    
    option {
    background   : #E2E7EA;
    }
    
    h1 {
      font-size        : 16px;
      color            : #232D37;
        }
    
    h2 {
      font-size        : 15px;
      color            : #232D37;
        }
    
    h3 {
      font-size        : 14px;
      color            : #232D37;
        }
    
    img {
    border: 0 none; 
    }
    
    .highlight {
    background-color: #216CB8;
    }
    
     
Статус темы:
Закрыта.