Сложная растягиваемая разметка

[andrewQwer]

В общем существует следующая проблемка:

Есть хэдер, у него есть скажем 5 частей:

АБ центр ВГ

где А,Б,В,Г - рисунки

при разрешении экрана 800х600 должно быть видно только

Б центр В

а если выше то появляется

АБ центр ВГ причем АБ обязательно находится в крайней левом положении страноицы

а ВГ крайнем правом (сама растяжка)

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

вот такая хитрая штука, может кто сталкивался и может на примерчике показать как такая растяжка делается? заранее СПАСИБО,

[Justnewone]

В общем существует следующая проблемка:

Есть хэдер, у него есть скажем 5 частей:

АБ центр ВГ

где А,Б,В,Г - рисунки

при разрешении экрана 800х600 должно быть видно только

Б центр В

а если выше то появляется

АБ центр ВГ причем АБ обязательно находится в крайней левом положении страноицы

а ВГ крайнем правом (сама растяжка)

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

вот такая хитрая штука, может кто сталкивался и может на примерчике показать как такая растяжка делается? заранее СПАСИБО,

Если А и Г плавно должны появляться - можно сделать несколько ДИВов (4), в середине пара с заданной шириной (верояно, около 800), оборачивается парой ДИВами без указания ширины, и на всех на них грамотно расставить соответствующие бекграунды.

Edited March 30, 2009 by Justnewone

[Great Rash]

Надо для центр юзать min-width. И тогда все легко делается.

UPD: Не, что то я подумал... бред написал. Извиняйте.

Edited March 30, 2009 by Great Rash

[andrewQwer]

Min-width не для всех браузеров подходит, IE кажись его не понимает, а нужно по 3 основных идеальное отображение

с div большого опыта не имею, но если с таблицей нельзя буду пробывать

[sytrus]

Думаю без позиционирования (position) тут не обойтись. Как его правильно использовать ищите в сети. Так же можете посмотреть как сделано здесь http://urbanline.ru/

[Great Rash]

Вообще я думаю, что тут и без скриптов не обойтись. Даже если делать таблицами все равно не получится, иначе не получится прятать самую левую колонку. У нее же надо ставить отрицательный маргин если разрешение равно 800х600. А динамически ставить отрицательный маргин без скриптов не получится как не извращайся.

Хотя что-то сейчас подумал - есть один выход: сделать обе крайние колонки (А и Г) тянущимися но при этом поставить у них max-width и overflow: hidden;. Тогда если разрешение будет больше 800х600 колонки (и их содержимое) сожмутся, а если разрешение будет больше - колонки растянутся по ширине только до максимального указанного значения (пускай 100px).

Min-width не для всех браузеров подходит

Очень даже подходит, для дебильных браузеров (ИЕ) есть специальный хак через expression.

[andrewQwer]

Вообще я думаю, что тут и без скриптов не обойтись. Даже если делать таблицами все равно не получится, иначе не получится прятать самую левую колонку. У нее же надо ставить отрицательный маргин если разрешение равно 800х600. А динамически ставить отрицательный маргин без скриптов не получится как не извращайся.

Хотя что-то сейчас подумал - есть один выход: сделать обе крайние колонки (А и Г) тянущимися но при этом поставить у них max-width и overflow: hidden;. Тогда если разрешение будет больше 800х600 колонки (и их содержимое) сожмутся, а если разрешение будет больше - колонки растянутся по ширине только до максимального указанного значения (пускай 100px).

Очень даже подходит, для дебильных браузеров (ИЕ) есть специальный хак через expression.

без Js пока не обошлось, попробую ваш вариант еще, спасибо за идею

[andrewQwer]

есть один выход: сделать обе крайние колонки (А и Г) тянущимися но при этом поставить у них max-width и overflow: hidden;. Тогда если разрешение будет больше 800х600 колонки (и их содержимое) сожмутся, а если разрешение будет больше - колонки растянутся по ширине только до максимального указанного значения (пускай 100px).

Отличный способ, но есть 1 проблема и если ее решить будет все ок:у левой картинки затирается правая часть при уменьшении экрана (т.е. overflow прячет не ту часть картинки), а нужно чтобы пропадала и появлялась левая

может знаете что подправить нужно?

а так идея зашибенная и без JS

Edited April 2, 2009 by andrewQwer

[Searcher]

Позиционируйте левую картинку картинку по правому краю.

И выложите код, интересно, как у вас все получилось

[andrewQwer]

<table width="100%" border="1">
<tr>
<td align="left"  style="overflow:hidden; max-width:200px;">
<img   src="images/header_01.jpg" />
</td>
<td > 
<img src="images/header_01.gif" />
</td>
<td align="right" style="max-width:200px; overflow:hidden;">
<img src="images/header_01.jpg" />
</td>

</tr>
</table>

у правой картинки поведение ИДЕАЛЬНОЕ, то что нужно...

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

Edited April 2, 2009 by andrewQwer

[Searcher]

Попробуйте лучше картинку в фон запихнуть, примерно так:

<table width="100%" border="1">
<tr>
<td style="overflow:hidden; max-width:200px; background:url('images/header_01.jpg') right repeat-y;"></td>
<td> 
<img src="images/header_01.gif" />
</td>
<td style="max-width:200px; overflow:hidden; background:url('images/header_01.jpg') left repeat-y;"></td>
</tr>
</table>