HTML+CSS+JavaScript

Всем доброго времени суток!

У меня проблема в расположении 3-х картинок в пределах одной ячейки. Сама ячейка динамическая, меняет свою высоту по вертикали в зависимости от объема текста в соседней ячейки.
А три картинки представляют собой рисунок. Поэтому одна картинка должна быть зафиксирована вверху ячейки, вторая зафиксирована в самом низу, а третья имеет толщину в 1px и должна заполнять всё оставшееся пространство (через свойство repeat-y).

Вот код:

<table width="100%" border="0"> <tr> <td style="background:url(img/menu_1px.jpg) repeat-y; width:250px; padding:0;" valign=""> <div style="background:url(img/menu_head.jpg) no-repeat top;">&nbsp;</div> <div style="background:url(img/menu_footer.jpg) no-repeat bottom;">&nbsp;</div> </td> <td> text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br /> </td> </tr> </table>

Еще пробовал дополнительными ячейками выравнивать, но все равно не то, работает только в FF:

<table width="100%" border="0"> <tr> <td style="background:url(img/menu_head.jpg) no-repeat; width:250px; height:20px;" height="20">1</td> <td rowspan="3">text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br /></td> </tr> <tr> <td style="background:url(img/menu_1px.jpg) repeat-y;">2</td> </tr> <tr> <td style="background:url(img/menu_footer.jpg) no-repeat; height:20px;">3</td> </tr> </table>

Почему у Вас valign="", пропишите valign="top"
и зачем Вы картинки выводите фоном?
Я не мастер вёрстки, но можно просто сделать вложенную таблицу

>Почему у Вас valign="", пропишите valign="top"
Если прописать "top", то все эти картинки окажутся вверху, если "bottom" - внизу. А надо одну вверху, вторую внизу :)

>и зачем Вы картинки выводите фоном?
А как еще их выводить? Через тег img еще хуже получается...

>Я не мастер вёрстки, но можно просто сделать вложенную таблицу
А вложенная таблица потеряет зависимость высоты от соседней ячейки. По крайне мере у меня еще не получалось растянуть её по высоте на 100%.

а вы height="100%" для вложенной таблицы попробуйте

НЕ растянется она так

у меня растягивается

Хм, Вы правы, я не везде атрибут height расставил.
Ну т.к. мне надо первую и последнюю ячейку сделать фиксированного размера, сделал так:

<table border=1 width=100%> <tr> <td height=100% width="250" valign="top"> <table border=0 height=100%> <tr> <td height=20 style="background:url(img/menu_head.jpg) no-repeat; padding:0; height:20px; width:250px;"></td> </tr> <tr> <td height=100% style="background:url(img/menu_1px.jpg) repeat-y; padding:0px;"></td> </tr> <tr> <td height=20 style="background:url(img/menu_footer.jpg) no-repeat; padding:0px;"></td> </tr> </table> </td> <td>text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br /></td> </tr> </table>

Но все равно это дело работает нормально только в IE и FF, а в Opere и Google Chrome она не растягивается...

Может еще чего подправить? подскажите плз.

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

Хорошо, попробую объяснить подробней. В общем делаю не замысловатый сайт с простым дизайном, где есть шапка, блок меню, рядом блок контента и "подвал" сайта. Вот выложил скриншот в том виде как он ДОЛЖЕН выглядеть.
Проблема у меня с блоком меню, в зависимости от содержащегося рядом контента он должен растягиваться по высоте. А сам этот блок состоит из 3-х картинок:
1-я картинка начинает рисунок, т.е. имеет закругленные углы и высоту 20px,
2-я картинка высотой в 1px, должна дублироваться по всей свободной высоте между 1 и 3 картинкой,
3-я картинка заканчивает рисунок (тоже имеет закругленные края).

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

теперь всё понятно, я пока покумекаю, но думаю Вам ответят раньше меня. Здесь много людей хорошо знающих своё дело и готовых помочь)

ок )
Да я уже много инфы перерыл в инете и везде всё вокруг да около. Надеюсь вот теперь на этот форум

А если так. Во всех трех ячейках фон такой как в средней. В верхнюю ячейку валигн=топ и картинку а в нижнюю валигн=боттом и тоже картинку.

Да, пробовал так, работает только в FF. А остальные браузеры сжимают среднюю ячейку по тексту..

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

<table border="1" width="100%" height="100%"> <tr> <td height="20" style="background:url(img/menu_head.jpg) no-repeat; width:250px; height:20px;">1</td> <td rowspan="3" height="100%">Ячейка для текста</td> </tr> <tr> <td height="100%" style="background:url(img/menu_1px.jpg) repeat-y;">3</td> </tr> <tr> <td height="20" style="background:url(img/menu_footer.jpg) no-repeat;">4</td> </tr> </table>

Еще есть идея другого подхода, тоже не доработанная, через ДИВы. Т.е. таблица здесь будет состоять из двух ячеек, первая для блока меню, вторая для основного содержания. (Работаем с первой ячейкой)
Так вот здесь я могу всю ячейку залить фоновой картинкой и через ДИВ зафиксировать другую картинку вверху. Но как при этом третью картинку зафиксировать внизу? Вот именно этот момент меня затрудняет. А делал я так:

<table width="100%" border="1"> <tr> <td style="background:url(img/menu_1px.jpg) repeat-y; width:250px;" valign="top"> <div style="background:url(img/menu_head.jpg) no-repeat top;">&nbsp;</div> </td> <td> text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br />text<br /> </td> </tr> </table>

Может есть у кого какие-нибудь идеи? Буду признателен.

<html> <head> <title>Obrazec</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> html,body { width:100%; height:100%; margin:0px; padding:0px; } </style> </head> <body> <table border="1" height="1" width="700"> <tr>  <td>   <table border="1" height="100%" width="200">   <tr><td bgcolor="red" height="40">&nbsp;</td></tr>   <tr><td bgcolor="blue">Меню1<br>Меню2<br>Меню3<br>Меню4<br>Меню5</td></tr>   <tr><td bgcolor="red" height="40">&nbsp;</td></tr>   </table>  </td>  <td>    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT <br>  </td> </tr> </table> </body> </html>

Если без доктайпа то это работает везде

Хм.. интересная фишка, если в вашем примере поставить ДОКТАЙП и перед ним добавить пустой (или нет) комментарий, то работает тоже везде ровно :/

<!----> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

С чем же это могло быть связано...

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

Стукните в асю - пример элементарный

Спасибо всем за подсказки, работаю...

PS. mihdan, у меня не получилось с Вами связаться по ICQ, но очень хотел пообщаться.

Попробуй так:

<table border="1" width="100%" height="100%"> <tr> <td height="20" style="background:blue url(img/menu_head.jpg) no-repeat; width:250px; height:20px;">1</td> <td style="background:yellow; vertical-align:top;" rowspan="3" height="100%"> Ячейка для текста </td> </tr> <tr> <td style="background:red url(img/menu_1px.jpg) repeat-y;">3</td> </tr> <tr> <td height="20" style="height:20px; background:green url(img/menu_footer.jpg) no-repeat;">4</td> </tr> </table>