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

[SpaceW]

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

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

 

[alfaexpert]

При отрисовке дизайна нужно учитывать такой момент резиновый или не резиновый будет дизайн
Вот например

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

или

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

шапка там состоит из градиентов особенно посмотри

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Все элементы сделаны так что за счет градиентов все тянется и тоже самое тебе нужно сделать в дизайне
По схематичному описание трудно сказать что нужно изменить.

 

[askarbin]

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

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

 

[Shpek]

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

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

 

[SpaceW]

Вообщем, картинка сама такая:
Для просмотра ссылки Войди или Зарегистрируйся

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

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

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

 

[Shpek]

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

высоту диву пропиши или таблице (в чем делать будешь) и она везде одинаковая будет, а по ширине повторюхами добьешь!

 

[rafic]

Сообщение от fill1
прит правильном "резиновом" шаблоне ширина всех блоков процентная, именно всех, на некоторых ресурсах указывают динамическим только средний блок - это неправильно

Если тебе надо чтобы левое меню было 250 пикселей а все остальное уходило на контент. Как ты укажешь такий дизайн в процентном отношении? хотел бы посмотреть на это.

 

[_axl]

Там, где у тебя красные линии ты картинку не потянешь, будет заметно.

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

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

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

Я когда-то верстал такой ужас, замечания, что это бред, дизайнерша слушать не стала, так что плюнул и сделал через js: Для просмотра ссылки Войди или Зарегистрируйся

 

[The Finn]

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

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

Пример такой реализации:

 

[deldemonio]

у меня такой вопрокак мне растянут шапку и бегун под ней на все мониторы и браузеры Для просмотра ссылки Войди или Зарегистрируйся
если нужно могу дать 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;
}