| |
|
|
| | Всем доброго времени суток!
Вопрос на первый взгляд легкий, но здесь фишка такая:
Надо в первой ячейке растянуть фоновую картинку по вертикали так, чтобы при изменении объема содержимого во второй ячейки этот фон изменял свою высоту автоматически. А третья ячейка (расположенная под первой ячейкой) должна сохранить свой фиксированный размер. Потому что она потом должна заканчивать рисунок из первой ячейки.
<table width="50%" cellspacing="0" border="1">
<tr>
<!-- Ячейка 1 -->
<td style="background-image:url(img.jpg); background-repeat:repeat-y; width:50px;"></td>
<!-- Ячейка 2 -->
<td rowspan="2">text text text text text text text text... <br><br><br><br><br>...text text text text</td>
</tr>
<tr>
<!-- Ячейка 3 -->
<td style="height:10px;"> </td>
</tr>
</table>
|
Вот этот код идеально работает в FF, но в остальных браузерах работает наоборот - растягивается почему-то третья ячейка вместо первой.
Почему так? подскажите плз! | |
| |
|
|
| |
|
|
| |
для: Kostya
(04.04.2009 в 19:27)
| | | Если правильно понял, то "третья ячейка" нужна вам ТОЛЬКО как "продолжение рисунка", так?
Тогда лучше от неё вовсе избавиться.
<table width="50%" cellspacing="0" border="1">
<tr>
<!-- Ячейка 1 -->
<td valign="bottom" style="padding: 0; background-image:url(img.jpg); background-repeat:repeat-y; width:50px"
><div style="height: 10px; font-size: 0; line-height: 0; background-image:url(продолжение_рисунка)"></div></td>
<!-- Ячейка 2 -->
<td>text text text text text text text text... <br><br><br><br><br>...text text text text</td>
</tr>
</table>
|
PS. Обратите внимание на необходимость СЛИТНОГО написания дива с тегами ячейки.
Это дело будет работать ВЕЗДЕ.
И работать будет ОДИНАКОВО (почти, кроме OPERA - см. ниже).
В FireFox, кстати, ваш вариант работал тоже далеко не идеально - высота вашей "третьей ячейки" имела прямую зависимость от размера шрифта. Сами можете в этом убедиться, кликнув несколько раз подряд на "Увеличить размер шрифта" в меню "Вид" браузера.
В предложенном варианте масштаб шрифта не влияет на высоту картинки-продолжения.
Последнее замечание не относится, разумеется, к браузеру OPERA - изменение размеров при изменении масштаба там происходит по весьма малопонятному алгоритму.
Говорят, что и в Сафари последней тоже есть такая "беда", но не знаю точно - не пользовал ещё. | |
| |
|
|
| |
|
|
| |
для: PAT
(04.04.2009 в 22:51)
| | | PAT, всё заработало нормально во всех браузерах! Даже при изменении масштабов никаких глюков нету! Применил div и всё ОК!
Спасибо :) | |
| |
|
|
| |
|
|
| |
для: Kostya
(04.04.2009 в 19:27)
| | | Проще в третью ячейку поместить картинку, и будет нормально во всех браузерах. | |
| |
|
|
| |
|
|
| |
для: sim5
(05.04.2009 в 03:53)
| | | Проще, говорите?
И будет нормально, говорите?
А испробовать свой совет на практике не хотите?
Попытайтесь. Потом расскажете здесь о результатах. | |
| |
|
|
| |
|
|
| |
для: PAT
(05.04.2009 в 04:16)
| | | А что есть сложности с просто добавлением картинки в ячейку? | |
| |
|
|
| |
|
|
| |
для: sim5
(05.04.2009 в 04:34)
| | | Мой пример кода - это и есть ваш совет. В первой ячейке рисунок растягивается, а третья ячейка его заканчивает.
Я сейчас попробую реализовать совет с div'ом. | |
| |
|
|
| |
|
|
| |
для: Kostya
(05.04.2009 в 12:27)
| | | Что значит растягивается? Если поместить картинку в ячейку, то ячейка примет размер картики. Интересно, и как картинка смотрится, если таблица имеет бордюр? | |
| |
|
|
| |
|
|
| |
для: sim5
(05.04.2009 в 12:32)
| | | >"Если поместить картинку в ячейку, то ячейка примет размер картики"
<script>
function f (x)
{
x.disabled = true;
V = 0;
TBR = document.createElement ('br');
CLON = x;
OBJ = x.parentNode;
f2 ();
}
function f2 ()
{
V++;
var p = TBR.cloneNode (1);
var s = CLON.cloneNode (1);
OBJ.appendChild (p);
if (V < 10) {OBJ.appendChild (s); setTimeout (f2, 1000)}
else alert ('Красная ячейка ДЕЙСТВИТЕЛЬНО принимает размер картинки ВСЕГДА?')
}
</script>
<table cellpadding="0" cellspacing="0" border="1">
<tr><td> </td>
<td rowspan="2" style="padding: 5px">
<input type="button" value="Всё отлично, не так ли?" onclick="f (this)"></td></tr>
<tr><td bgcolor="red">
<img width="200" height="50" alt="КАРТИНКА" style="background-color: lime"></td></tr>
</table>
|
Вам бы агитатором-пропагандистом в советское время работать:-)
Они тоже любили утверждать голословно.., например, что "Партия - ум, честь и совесть нашей эпохи!" | |
| |
|
|
| |
|
|
| |
для: sim5
(05.04.2009 в 12:32)
| | | "Растягивается" - т.е.(в моём случае) ячейка вытягивается по высоте, в зависимости от объема содержания соседней ячейки. А третья клетка должна была заканчивать рисунок из этой "растягивающейся" ячейки, т.к. имеет градиент. В общем теоретически всё просто, но на практике это работает только в FireFox.
Ну а табличка это тестовая, поэтому чтобы было понятней - решил бордюры не убирать :) | |
| |
|
|
