проблемный background

[_axl]

Народ, помогите, пожайлуста, советом. Макет предусматривает вот такой фон:

Никак не могу понять как сделать, проблема в масштабировании, мало того, что надо делать под любые разрешения, что еще можно решить сделав заведомо большую картинку и/или юзать js. Но ведь еще может быть ситуация, что на страницу выведется очень длинный текс и картинка кончится. Может есть у кого мысли?

Edited October 30, 2008 by _axl

[homm]

У меня есть мысль отрубить дизайнеру мизинец. Для начала…

[_axl]

а по существу? уже ничо не сделаешь, надо верстать((

[Searcher]

1. При помощи JS подгружать разные картинки в зависимости от разрешения

2. Сделать фон фиксированным, непрокручиваемым.

[_axl]

2. Сделать фон фиксированным, непрокручиваемым.

вот это прости не понял. это как?

а все, понял, bgproperties="fixed" типа

[Searcher]

а все, понял, bgproperties="fixed" типа

Ага. А в css так: BODY {background-attachment: fixed;}

[homm]

а по существу?

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

Вообще не должно быть такого, что дизайнер нарисовал, а верстальщик делает. Должен быть диалог 2-х специалистов, и если один из них что-то не может, второй должен учесть это. В данном случае так сделать либюо не удастся, либо смотреть без слез на это будет нельзя. Есть, конечно, третий вариант — Это главная страница с фиксированной высотой. Но тагда вроде не должно было возникнуть вопроса, «как верстать».

[homm]

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

[_axl]

да на самом деле, я заверстал, здорово помог совет с фиксированным фоном, сейчас фон ведет себя как нельзя лучше

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

заодно спрашу о другой проблемке, у меня текс, который справа от черной полосы помещен в div, отступ( margin-left ) задаю в процентах. в большинстве браузеров работает нормально, а вот в ie6 отступ получается меньше, в чем может быть причина?

[Dimitry Wolotko]

Дизайнер дурак.

[Searcher]

Надеюсь, что дизайнер сделал фон соответствующий контенту... Может там по смыслу разбиение на 2 части... Типа, плохо и хорошо, добро и зло

А проблема отступа не понятна, нужно больше информации.

[olga_4444]

заодно спрашу о другой проблемке, у меня текс, который справа от черной полосы помещен в div, отступ( margin-left ) задаю в процентах. в большинстве браузеров работает нормально, а вот в ie6 отступ получается меньше, в чем может быть причина?

на мой взляд лучше сделать вот так

div{

position:absolute;

left:400px;}

или в % попробовать.

[user]

Я где-то видел,как делали градиент при помощи однопиксельных фоновых дивов.Здесь бы тоже заработало.

[_axl]

div{

position:absolute;

left:400px;}

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

вообще, страницу я доверстал, посмотреть можно здесь: http://defolt-12.narod.ru/examples/nescafe/

к сожалению от фиксированного фона пришлось уйти, т.к. качество надписи NESC сохраненной в gif( чтоб была прозрачность ) не устроило, пришлось делать топорно, через картинку высотой 2000пкс, а жаль - было очень удобно((

сейчас пытаюсб решить последнюю проблему - min-width у страницы 1100 пикселей, если меньше то контент наползает на черный фон, но с такой шириной на разрешении 1024 появляется полоса прокрутки

Я где-то видел,как делали градиент при помощи однопиксельных фоновых дивов.Здесь бы тоже заработало.

а есть, где посмотреть, я смотрел в яндексе, ничо не нашел похожего

Edited October 31, 2008 by _axl

[xaero]

Я использую так:

<script type="text/javascript">
<!--//

window.onload = function(){
	if(screen.width>=1280){
	   document.body.style.background = 'url(images/back.jpg) repeat-y';
	}else{
	   document.body.style.background = 'url(images/back2.jpg) repeat-y';
	}
}

//-->

[Searcher]

к сожалению от фиксированного фона пришлось уйти, т.к. качество надписи NESC сохраненной в gif( чтоб была прозрачность ) не устроило, пришлось делать топорно, через картинку высотой 2000пкс, а жаль - было очень удобно((

А зачем там прозрачность, не понял?

сейчас пытаюсб решить последнюю проблему - min-width у страницы 1100 пикселей, если меньше то контент наползает на черный фон, но с такой шириной на разрешении 1024 появляется полоса прокрутки

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

А с однопиксельнымии дивами мудрено. Это надо будет больше 1000 дивов строить! по объему больше картинки наверно будет!

Edited October 31, 2008 by Searcher

[user]

Картинка уменьшается в размере сохранением в png с количеством цветов 8 и применением программы Pngoptimizer до 13кб.