Масштабируемый текстовый блок с нестандартными краями

[Flo]

Ребята, как, собственно, эту область сделать масштабируемой на дивах?

На табличках могу, а на дивах красиво это можно реализовать?

[maddogrts]

По горизонтали или по вертикали, или вместе?

[WingedFox]

Технологию можете вытащить из http://debugger.ru/demo/other/roundedbox/

[Dimitry Wolotko]

WingedFox, кривовато на FF2.0.0.11

[maddogrts]

http://maddog-rts5.narod.ru/

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

[Dimitry Wolotko]

maddogrts, слушай, всегда интересовался, а как Яндекс смотри на то, что на народных сайтах рекламу хаками убивают?

[maddogrts]

Dimitry Wolotko во первых это трудновато , во вторых банят просто. )))

(у меня, не убита.)

[Dimitry Wolotko]

Ясно )

[Flo]

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

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

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

[Vlad]

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

[Flo]

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

я все это понимаю )) меня, собственно, и интересует этот код со вложенными дивами

повторяющиеся изображения есть, я реализовывал такой блок с помощью таблиц... мне интересно, как это сделать на дивах

[maddogrts]

Flo верстка такая же как в моем примере только еще +4 дива, или 2 дива (смотря как делать)

[Flo]

разве это тривиально разместить 4 резиновых дива внутри родительского?

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

[Flo]

а, еще желательно отдельные блоки для уголков... уголки сглаживают переход между краями...

[Scrum]

а выложите код как вы это сделали на табличка, ужж больно интересно.

[Vlad]

Не обязательно одни дивы использовать, можно и SPAN вставить, как ниже

 

Бла-бла.

 

Вот только придется им задать display: block

[WingedFox]

Dimitry Wolotko

А что именно там кривовато? У меня в 2.0.0.11 вс? пучком, если имеется в виду порванный левый бордер, так там картинка маленькая для очень больших разрешений =)

Flo

А что именно не подходит? Если заменить картинки

http://debugger.ru/demo/other/roundedbox/images/cc_tl.gif

http://debugger.ru/demo/other/roundedbox/images/cc_tr.gif

http://debugger.ru/demo/other/roundedbox/images/cc_rb.gif

http://debugger.ru/demo/other/roundedbox/images/cc_bl.gif

http://debugger.ru/demo/other/roundedbox/images/cc_br.gif

на свои, то вс? будет работать.

Вы же просили примеры реализации, а не сделать работу за Вас.

[Dimitry Wolotko]

WingedFox,

имеется в виду порванный левый бордер

[Flo]

на табличках так

<table width="100%" border="0" cellspacing="0">
 <tr> 
 <td width="15" id="left_top_corner"></td>
 <td id="top_b" height="15"></td>

 <td width="15" id="right_top_corner"></td>
 </tr>
 <tr> 
 <td id="left_b" valign="top" width="15"></td>
 <td valign="top"> 

контент

 </td>
 <td id="right_b" width="15"></td>
 </tr>
 <tr> 
 <td width="15" id="left_bottom_corner"></td>

 <td id="bottom_b" height="15"></td>
 <td width="15" id="right_bottom_corner"></td>
 </tr>
 </table>
 </div>
 </td>
 </tr>
 </table>

и в ксс для соответствующей ячейки подгрузить повторяющимся фоном картинку

[Scrum]

повторяющимся картинку

интересно вот уже второй день смотрю но нигде не нашел "повторяющимся картинку" !!!

юзайте пример предложенный Владом, WingedFox или maddogrts

[Flo]

картинка прописана как фоновый рисунок в стилях top_b, left_b, right_b, bottom_b

можно 4 разных картинки загружать, можно одну и фильтрами ее поворачивать

[Flo]

вот так это сделано у меня на табличках

http://flo.thumb.googlepages.com/rezina.htm

[Flo]

http://maddog-rts5.narod.ru/ на мой взгляд, достаточно тяжеловесное решение...

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

решение на табличках я уже выкладывал http://flo.thumb.googlepages.com/rezina.htm

[maddogrts]

Flo оно не тяжеловестное, просто там другое было http://forum.htmlbook.ru/index.php?showtopic=6713

Да можно сделать проще намного притом.

[Flo]

намного проще это как?

меньше 9 блоков? для масштабируемого блока по обеим координатам, по-моему, это сложно...

[maddogrts]

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