Растянуть часть background'а

[ISQman]

Проблема такая: есть 3 изображения *.png ,заключены в таблице, одинаковые по ширине, первое и третье необходимо оставить в вверху и внизу соответственно, а среднее необходимо либо растянуть либо продублировать в зависимости от кол-ва контента. Контент также ложится на верхнее и нижние изображения.

.ba {position: relative; width: 679px; height: 100%; display:block; }

.ba img.first {width: 679px; height: 124px; display:block;}

.ba img.second { position: absolute; left: 0px; right: 0px; top: 125px; bottom: 680px; display:block;}

.ba img.third {width: 679px; height: 393px; display:block;}

.ba div { position: absolute; left: 38px; top: 10px; right: 0px; bottom: 0px; display:block;}

<td width='679' height=100%>
<div class='ba'>
<img src='images/news-okno-1.png' class='first'>
<img src='images/news-okno-2.png' class='second'>
<img src='images/news-okno-3.png' class='third'>
<div>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br>
;'zslasdkjgcvjsuygfhsrfawilej<br>
sidhcshjkughjmzscdjzsdg;lf<br>
</div>
</div>
</td>

Порблема вышеизложеного кода в том, что при привышении "лимита" контент вылазит за пределы не только таблицы, но и вёрстки вообще...

Борюсь 2-е сутки....

[Justnewone]

Попробуйте избавиться от height=100% в пользу min-height=100%, это раз

Абсолютно позиционируемый элемент вынимается из потока родительский элемент перестает чувствовать его высоту. Уберите position: absolute; left: 38px; top: 10px; right: 0px; bottom: 0px; display:block; и замените все это на margin: 10px 0 0 38px

Edited April 8, 2009 by Justnewone

[ISQman]

теперь текст лёг просто под изображениями....

[Justnewone]

теперь текст лёг просто под изображениями....

покажите ссылку

[ISQman]

-ссылка-

[Justnewone]

-ссылка-

ой...

<td height="100%" width="679">

<div class="ba">
<img class="first" src="images/news-okno-1.png"/>
<img class="second" src="images/news-okno-2.png"/>
<img class="third" src="images/news-okno-3.png"/>
<div>

tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br/>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br/>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br/>
;'zslasdkjgcvjsuygfhsrfawilej<br/>
sidhcshjkughjmzscdjzsdg;lf<br/>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br/>
;ojacikluhzikgd;ljgk;orhktpoyj<br/>
jsklhdcjkuygedkug;lrtiuoytuityawuegtfuhidltjgh6r<br/>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br/>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br/>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br/>
;'zslasdkjgcvjsuygfhsrfawilej<br/>
sidhcshjkughjmzscdjzsdg;lf<br/>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br/>
;ojacikluhzikgd;ljgk;orhktpoyj<br/>
jsklhdcjkuygedkug;lrtiuoytuityawuegtfuhidltjgh6r<br/>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br/>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br/>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br/>
;'zslasdkjgcvjsuygfhsrfawilej<br/>
sidhcshjkughjmzscdjzsdg;lf<br/>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br/>
;ojacikluhzikgd;ljgk;orhktpoyj<br/>
jsklhdcjkuygedkug;lrtiuoytuityawuegtfuhidltjgh6r<br/>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br/>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br/>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br/>
;'zslasdkjgcvjsuygfhsrfawilej<br/>
sidhcshjkughjmzscdjzsdg;lf<br/>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br/>
;ojacikluhzikgd;ljgk;orhktpoyj<br/>
jsklhdcjkuygedkug;lrtiuoytuityawuegtfuhidltjgh6r<br/>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br/>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br/>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br/>
;'zslasdkjgcvjsuygfhsrfawilej<br/>
sidhcshjkughjmzscdjzsdg;lf<br/>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br/>
;ojacikluhzikgd;ljgk;orhktpoyj<br/>
jsklhdcjkuygedkug;lrtiuoytuityawuegtfuhidltjgh6r<br/>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br/>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br/>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br/>
;'zslasdkjgcvjsuygfhsrfawilej<br/>
sidhcshjkughjmzscdjzsdg;lf<br/>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br/>
;ojacikluhzikgd;ljgk;orhktpoyj<br/>
jsklhdcjkuygedkug;lrtiuoytuityawuegtfuhidltjgh6r<br/>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br/>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br/>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br/>
;'zslasdkjgcvjsuygfhsrfawilej<br/>
sidhcshjkughjmzscdjzsdg;lf<br/>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br/>
;ojacikluhzikgd;ljgk;orhktpoyj<br/>
jsklhdcjkuygedkug;lrtiuoytuityawuegtfuhidltjgh6r<br/>
tut mnoga contenta mnogomnogmnosd;fvhwgfdc,basvnes<br/>
dkjhvsklhvjzsbcvxzfvjkzhd vmfxzjbvzsd<br/>
;lxdmv.,kjasbjkfgzjkcbmjzscvnz;skdrvbsvjhlzsbv,kzsdmv;xdm<br/>
;'zslasdkjgcvjsuygfhsrfawilej<br/>
sidhcshjkughjmzscdjzsdg;lf<br/>
klsjhdcjklgzhsjufhdjv/dfb:'fjhp'gv[jk<br/>
;ojacikluhzikgd;ljgk;orhktpoyj<br/>
jsklhdcjkuygedkug;lrtiuoytuityawuegtfuhidltjgh6r<br/>
</div>

</div>


</td>

положите все три картинки последовательно и с соотвествующим смещениев в бекграунд TD, DIV.ba и DIV.ba DIV. DIV.ba DIV{margin:10px 0 0 0; padding:0 0 0 38px}. И все.

Иначе при таком раскладе как у Вас сейчас всегда будет что-то куда-то выползать.

[ISQman]

мда, выходов мало... либо наложение либо скролл в новостях...

[Justnewone]

мда, выходов мало... либо наложение либо скролл в новостях...

Не понимаю про наложения...

Может тут что раскроется?

[ISQman]

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

[Justnewone]

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

Не вижу причин, покажите скрин и кусок кода вместе с css.

[ISQman]

ссылка та же, код цсс:

.tbl {background: url('images/news-okno-1.png') no-repeat;}

.tbl DIV.ba {width: 679px; background:url('images/news-okno-2.png') center center repeat-y;}

.tbl DIV.ba DIV {margin:10px 0 0 0; padding:0 0 0 38px;}

[Justnewone]

ссылка та же, код цсс:

.tbl {background: url('images/news-okno-1.png') no-repeat;}

.tbl DIV.ba {width: 679px; background:url('images/news-okno-2.png') center center repeat-y;}

.tbl DIV.ba DIV {margin:10px 0 0 0; padding:0 0 0 38px;}

Смотрю по ссылке. а что не так? Контент начал чувствоваться, ни на что не налазит. Если речь о бекграунде самой таблицы, то можно опять-таки, поделить на 2, синий градиент в шапке с no-repeat, а далее еще куда-нибудь пристроить белый перфорированный фон.

[ISQman]

теперь как бы 3-е изображение натянуть под низ контента... топ не катит, а отрицательный маргин - съедет текст и z-index не вытягивает...

[Justnewone]

теперь как бы 3-е изображение натянуть под низ контента... топ не катит, а отрицательный маргин - съедет текст и z-index не вытягивает...

а сюда?

.tbl DIV.ba DIV{background:url(...) no-repeat 0 bottom} ?

ВЕрней лучше так, на TD навесить повторяющуюся верт-но середину, .tbl DIV.ba {width: 679px; background:url('images/шапка') left top no-repeat;} - должно быть хорошо, и в последнем этапе на .tbl DIV.ba DIV{background:url(...) repeat-y 0 bottom} - низ, надо будет только вырезать верт. градиентную полоску и запустить ее горизонтально повторяца, подточить малость маргины у .tbl DIV.ba DIV и все должно получиться

Edited April 9, 2009 by Justnewone

[ISQman]

сдвигается на 38 пикселей вправо вместе с текстом(((

[Justnewone]

сдвигается на 38 пикселей вправо вместе с текстом(((

Ну уберите 38 пикселей.

[ISQman]

исправил) спасибо огромное

background:url('images/news-okno-3.png') 47% 100% no-repeat;

[ISQman]

а теперь главный вопрос

как заставить ИЕ с этим всем работать?

[Justnewone]

а теперь главный вопрос

как заставить ИЕ с этим всем работать?

Это вам в помощь, ну и валидатор, попытайтесь от ошибок избавиться, а то ослина, бедный аж пыхтит и все разбросал )))

[ISQman]

у меня паника ие как не хотел нормально отображать так и не хочет хоть и валидетор говорит что всё ок вот ссылка на валидатор

[Justnewone]

у меня паника ие как не хотел нормально отображать так и не хочет хоть и валидетор говорит что всё ок вот ссылка на валидатор

Как рекомендации, попробуйте начать с того, что всем флоат-элементам и всем элементам строчным по сути, но в Вашей верстке display:block - zoom:1

Поищите в гугле про haslayout IE, многое прояснится.

[ISQman]

такс... с растягиванием я справился,

и теперь надеюсь последний на эту тему вопрос:

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

.tbl {background: url('images/news-okno-1.png') no-repeat; }

.tbl DIV.ba {width: 679px; background:url('images/news-okno-2.png')repeat-y;}

.tbl DIV.ba DIV {margin:12px 0 0 0; padding:0 0 0 19px;background:url('images/news-okno-3.png') 0px 100% no-repeat;min-height:521px;}

.tbl DIV.ba ИЕ напрочь видеть не хочет

Edited April 10, 2009 by ISQman

[Justnewone]

.tbl DIV.ba {width: 679px; background:url('images/news-okno-2.png')repeat-y;} тут пробел забыли перед repeat-y

[ISQman]

спасибо огромное, разобрался... выставил чёткие размеры дивам и ничего не растягивается, а растягивал ИЕ из-за избытка текста в строке.

теперь с этим гемором надо просто быть осторожнее и всё будет красиво.

ещё раз огромное человеческое спасибо