<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>td {border: 1px red solid}</style>
</head>
<body>
<table>
<tr>
<td style="height: 50px">a1</td>
<td rowspan="2">
a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>
a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>
a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>
a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>
a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>a2<br>
</td>
</tr>
<tr>
<td>b1</td>
</tr>
</body>
</html>
Вертикальный растягивающийся элемент
:confused:
Вобщем, вопрос наверное, банальный, но поскольку поиском я ответа не нашел, я таки задам. Вдруг кто ответит.
Есть табличка (пусть 3х3 - не суть), содержащая слева 1 рисунок и продолжающийся вниз растягивающийся элемент. в центре - текст. остальное просто отступы от другого контента.
Так вот с чем мучаюсь: надо сделать вертикальную растягивающуюся полоску слева от текста, чтобы она "продолжала" находящийся над ней рисунок. Т.е. чтобы при растягивании/сжимании окна эта полоска растягивалась с ним. Полоса одноцветная. Объем текста неизвестен.
Ну вот как я пробовал собственно.
Попытка №1.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td colspan="2" rowspan="3" width="28" height="263"><img src="/about.gif" width="28" height="263" alt="about" /></td>
<td width="30" height="25"> </td>
<td height="25"> </td>
<td width="25" height="25"> </td>
</tr>
<tr valign="top">
<td width="30" height="40"> </td>
<td height="40">Заголовок техта</td>
<td width="25" height="40"> </td>
</tr>
<tr valign="top">
<td width="30" height="198"> </td>
<td rowspan="2">text text text text (очень много этого текста - объем неизвестен)</td>
<td width="25" height="198"> </td>
</tr>
[COLOR="Red"]<tr valign="top" height="100%">
<td width="14" height="100%"><img src="/spacer.gif" width="14" height="100%" /></td>
<td width="14"> </td>
<td width="30"> </td>
<td width="25"> </td>
</tr>[/COLOR]
</table>
</body>
</html>
Как видно нифига не работает.
Попытка №2 (только выделенные красным строки)
<tr valign="top" height="100%">
<td width="14" height="100%" bgcolor="#0099CC"></td>
<td width="14"> </td>
<td width="30"> </td>
<td width="25"> </td>
</tr>
Работает в опере 9.63 и не работает как должно в IE.
Попытка №3 (только выделенные красным строки)
<tr valign="top" height="100%">
<td width="14" height="100%" background="/spacer14.gif"></td>
<td width="14"> </td>
<td width="30"> </td>
<td width="25"> </td>
</tr>
Здесь spacer14.gif – это файл 14х1 пиксель.
Та же песня: опера гуд, осел – бэд.
Верстаю в dreamweaver CS4 и что характерно – он все эти варианты понимает.
Попытка№4 (разбил на 2 таблицы)
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td colspan="2" width="28" height="263"><img src="/Site---new---about_04.gif" width="28" height="263" /></td>
<td rowspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="25"> </td>
<td height="25">Заголовок текста</td>
<td width="25" height="25"> </td>
</tr>
<tr valign="top">
<td width="25"> </td>
<td>text text text text (очень много этого текста - объем неизвестен)</td>
<td width="25"> </td>
</tr>
<tr>
<td width="25" height="25"> </td>
<td height="25"> </td>
<td width="25" height="25"> </td>
</tr>
</table></td>
</tr>
<tr valign="top">
<td width="14" bgcolor="#0066CC"> </td>
<td width="14"> </td>
</tr>
</table>
</body>
Что я делаю не так, что в IE не работает? Как исправить? Или может я вообще не так подошел к этой таблице?
Впринципе я только начинаю, поэтому громко не смейтесь, ок? И если посылать будете, то ссылкой, а не на три буквы =)
Вобщем, вопрос наверное, банальный, но поскольку поиском я ответа не нашел, я таки задам. Вдруг кто ответит.
Есть табличка (пусть 3х3 - не суть), содержащая слева 1 рисунок и продолжающийся вниз растягивающийся элемент. в центре - текст. остальное просто отступы от другого контента.
Так вот с чем мучаюсь: надо сделать вертикальную растягивающуюся полоску слева от текста, чтобы она "продолжала" находящийся над ней рисунок. Т.е. чтобы при растягивании/сжимании окна эта полоска растягивалась с ним. Полоса одноцветная. Объем текста неизвестен.
Ну вот как я пробовал собственно.
Попытка №1.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td colspan="2" rowspan="3" width="28" height="263"><img src="/about.gif" width="28" height="263" alt="about" /></td>
<td width="30" height="25"> </td>
<td height="25"> </td>
<td width="25" height="25"> </td>
</tr>
<tr valign="top">
<td width="30" height="40"> </td>
<td height="40">Заголовок техта</td>
<td width="25" height="40"> </td>
</tr>
<tr valign="top">
<td width="30" height="198"> </td>
<td rowspan="2">text text text text (очень много этого текста - объем неизвестен)</td>
<td width="25" height="198"> </td>
</tr>
[COLOR="Red"]<tr valign="top" height="100%">
<td width="14" height="100%"><img src="/spacer.gif" width="14" height="100%" /></td>
<td width="14"> </td>
<td width="30"> </td>
<td width="25"> </td>
</tr>[/COLOR]
</table>
</body>
</html>
Как видно нифига не работает.
Попытка №2 (только выделенные красным строки)
<tr valign="top" height="100%">
<td width="14" height="100%" bgcolor="#0099CC"></td>
<td width="14"> </td>
<td width="30"> </td>
<td width="25"> </td>
</tr>
Работает в опере 9.63 и не работает как должно в IE.
Попытка №3 (только выделенные красным строки)
<tr valign="top" height="100%">
<td width="14" height="100%" background="/spacer14.gif"></td>
<td width="14"> </td>
<td width="30"> </td>
<td width="25"> </td>
</tr>
Здесь spacer14.gif – это файл 14х1 пиксель.
Та же песня: опера гуд, осел – бэд.
Верстаю в dreamweaver CS4 и что характерно – он все эти варианты понимает.
Попытка№4 (разбил на 2 таблицы)
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td colspan="2" width="28" height="263"><img src="/Site---new---about_04.gif" width="28" height="263" /></td>
<td rowspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="25"> </td>
<td height="25">Заголовок текста</td>
<td width="25" height="25"> </td>
</tr>
<tr valign="top">
<td width="25"> </td>
<td>text text text text (очень много этого текста - объем неизвестен)</td>
<td width="25"> </td>
</tr>
<tr>
<td width="25" height="25"> </td>
<td height="25"> </td>
<td width="25" height="25"> </td>
</tr>
</table></td>
</tr>
<tr valign="top">
<td width="14" bgcolor="#0066CC"> </td>
<td width="14"> </td>
</tr>
</table>
</body>
Что я делаю не так, что в IE не работает? Как исправить? Или может я вообще не так подошел к этой таблице?
Впринципе я только начинаю, поэтому громко не смейтесь, ок? И если посылать будете, то ссылкой, а не на три буквы =)
Народ, ну очень нужна помощь! Я так понимаю, что эта та же проблема что в теме "IE + высота ячейки".
Отпишите как правильно это делать хотя бы в одной из двух тем.
Отпишите как правильно это делать хотя бы в одной из двух тем.
Выделите для полосы отдельную ячейку и залейте цветом или картинкой.
background: #ccc url("") repeat-y;
background: #ccc url("") repeat-y;
Ну я вобщм-то подобным образом и делаю, но тут проблема в том, как заставить IE тянуть именно нужную ячейку по вертикали.
Вот например:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="28" height="263" valign="top"><img src="/about.gif" width="28" height="263" /></td>
<td rowspan="2" valign="top">text text text text text text....</td>
</tr>
<tr height="100%">
<td bgcolor="#0099CC" height="100%"> </td>
</tr>
<tr height="20">
<td bgcolor="#0099CC"> </td>
<td> </td>
</tr>
</table>
По идее, в левой колонке тянется в зависимости от размера текста одна средняя ячейка (левая колонка, вторая сверху ячейка). Потому как нижняя строка фиксированной высоты (20), а ячейка с картинкой задана вообще жестко (высота и ширина) В опере так и есть. Но IE тянет ещё и верхнюю =(
Вобщем-то я проблему сейчас решил, разбив рисунок в верхней ячейке пополам на 2 части и подстелив фон нужного цвета во все ячейки левого столбца. Но решение некрасивое какое-то.
Вот как вышло:
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="14" height="263" bgcolor="#4ea2d5"><img src="/l.gif" width="14" height="263" /></td>
<td width="14"><img src="/r.gif" width="14" height="263" /></td>
<td colspan="2" rowspan="2"><table><td> ..(таблица с текстом).. </td></table> </td>
</tr>
<tr>
<td valign="bottom" bgcolor="#4ea2d5"><img src="/vstripe.gif" width="14" height="15" /></td>
<td> </td>
</tr>
</table>
</body>
Вот например:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="28" height="263" valign="top"><img src="/about.gif" width="28" height="263" /></td>
<td rowspan="2" valign="top">text text text text text text....</td>
</tr>
<tr height="100%">
<td bgcolor="#0099CC" height="100%"> </td>
</tr>
<tr height="20">
<td bgcolor="#0099CC"> </td>
<td> </td>
</tr>
</table>
По идее, в левой колонке тянется в зависимости от размера текста одна средняя ячейка (левая колонка, вторая сверху ячейка). Потому как нижняя строка фиксированной высоты (20), а ячейка с картинкой задана вообще жестко (высота и ширина) В опере так и есть. Но IE тянет ещё и верхнюю =(
Вобщем-то я проблему сейчас решил, разбив рисунок в верхней ячейке пополам на 2 части и подстелив фон нужного цвета во все ячейки левого столбца. Но решение некрасивое какое-то.
Вот как вышло:
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="14" height="263" bgcolor="#4ea2d5"><img src="/l.gif" width="14" height="263" /></td>
<td width="14"><img src="/r.gif" width="14" height="263" /></td>
<td colspan="2" rowspan="2"><table><td> ..(таблица с текстом).. </td></table> </td>
</tr>
<tr>
<td valign="bottom" bgcolor="#4ea2d5"><img src="/vstripe.gif" width="14" height="15" /></td>
<td> </td>
</tr>
</table>
</body>
Что-то Вы меня совсем запутали. Покажите картинку, что должно получиться в итоге.
Все стянет ясно, если код ниже посмотреть в IE и в CHROME/OPERA. Задание размеров для верхней левой ячейки IE до определенного значения игнорирует, а затем (выше этого предела) прибавляет к какому-то мифическому числу.
В сабжевом коде проблема растет отсюда.
Код:
В сабжевом коде проблема растет отсюда.
Вот проследил через IE developer toolbar изменение в коде из предыдущего поста css высоты левой верхней ячейки:
Все размеры в пикселях. css height — высота, которую задавал для верхней левой ячейки таблицы. другие две колонки — реальная высота левой верхней и левой нижней ячейки, взятые через developer toolbar. Высоту от 0 до 19 включительно IE игнорирует вовсе. Opera игнорирует высоту до 23 включительно, а дальше задает ячейке требуемую высоту. Chrome ведет себя как Opera, только числа другие. Видно, что IE реагирует изначально на заданную высоту как следует (как будто бы собирается все сделать как здоровые браузеры), но затем прибавляет к ней что-то или какие махинации посложнее совершает, что выливается в subj.
Закономерности не искал.
Проверял в IE7. Btw, если мне не изменяет память, IE ведет себя так (или аналогично) с таблицами с допотопных времен (IE 6, а может и 5.x).
Код:
clientHeight
css height верхняя левая нижняя левая
19 455 493
20 465 483
21 475 473
22 484 464
23 493 455
24 502 446
25 510 438
css height верхняя левая нижняя левая
19 455 493
20 465 483
21 475 473
22 484 464
23 493 455
24 502 446
25 510 438
Все размеры в пикселях. css height — высота, которую задавал для верхней левой ячейки таблицы. другие две колонки — реальная высота левой верхней и левой нижней ячейки, взятые через developer toolbar. Высоту от 0 до 19 включительно IE игнорирует вовсе. Opera игнорирует высоту до 23 включительно, а дальше задает ячейке требуемую высоту. Chrome ведет себя как Opera, только числа другие. Видно, что IE реагирует изначально на заданную высоту как следует (как будто бы собирается все сделать как здоровые браузеры), но затем прибавляет к ней что-то или какие махинации посложнее совершает, что выливается в subj.
Закономерности не искал.
Проверял в IE7. Btw, если мне не изменяет память, IE ведет себя так (или аналогично) с таблицами с допотопных времен (IE 6, а может и 5.x).
С товарищем Shiizoo согласен на все 100%. Беда оттуда. Но по сути ,я её так и не смог решить.
Даю картинку как должно быть. К сожалению нерабочий вариант я удалил, так что только тот где я выкрутился.
Верхней считаем ячейку с вертикальной картинкой "О компании" (это отдельная таблица которую мы и рассматриваем). Так вот она растягивается. А не должна бы, потому как я её жестко задаю. жестко задаю все ячейки (строки) кроме одной средней с вертикальной синей полосой. Изначально вся синяя вертикальная полоса была объемной (равно как и меню) но затем, из-за того что я не смог таки сделать "резиновую" вертикальную полоску из картинки, пришлось делать её плоской и однотонной, чтобы выкрутиться через цвет фона.
Проблемы:
1) как же собственно сделать растягивающейся именно нужную ячейки именно на нужную высоту (равную высоте текста);
2) как сделать в ней именно растягивающуюся картинку, а не фон.
на данный момент в IE (6-й) тянутся и верхняя и средняя ячейки. просто я в них в обе подложил одинаковый фон.
Сделать по человечески не смог.
Делал исключительно средствами html, так как другие ещё не умею использовать. Я только учусь =)
Даю картинку как должно быть. К сожалению нерабочий вариант я удалил, так что только тот где я выкрутился.
Верхней считаем ячейку с вертикальной картинкой "О компании" (это отдельная таблица которую мы и рассматриваем). Так вот она растягивается. А не должна бы, потому как я её жестко задаю. жестко задаю все ячейки (строки) кроме одной средней с вертикальной синей полосой. Изначально вся синяя вертикальная полоса была объемной (равно как и меню) но затем, из-за того что я не смог таки сделать "резиновую" вертикальную полоску из картинки, пришлось делать её плоской и однотонной, чтобы выкрутиться через цвет фона.
Проблемы:
1) как же собственно сделать растягивающейся именно нужную ячейки именно на нужную высоту (равную высоте текста);
2) как сделать в ней именно растягивающуюся картинку, а не фон.
на данный момент в IE (6-й) тянутся и верхняя и средняя ячейки. просто я в них в обе подложил одинаковый фон.
Сделать по человечески не смог.
Делал исключительно средствами html, так как другие ещё не умею использовать. Я только учусь =)
Я усердно колдовал с заданием высоты такой ячейки и ничего получилось. IE стабильно некорректно воспринимает высоту, задаваемую для ячеек смежных с ячейкой с rowspan. Высоту в процентах, как это и должно быть, понимает только если заранее известна высота таблицы (не уверен, что и тут все ОК во всех случаях). Поэтому остается только: избегать подобной задачи (задания высоты для таких ячеек), т. е. использовать другую структуру; использовать коррекцию с помощью javascript (imo, плохая идея в большинстве случаев).
Чтобы использовать фон — картинку, можно и нужно использовать css-свойство background для ячейки (или чего бы там ни было).
Чтобы использовать фон — картинку, можно и нужно использовать css-свойство background для ячейки (или чего бы там ни было).
Код:
...
<td style="background-image: url("some_image.gif")">
</td>
...
<td style="background-image: url("some_image.gif")">
</td>
...
Вот! Круто! =) Теперь я знаю как буду переделывать! Как только сделаю все - выложу тут что получилось.
Спасибо всем помогавшим!
Я думаю, у меня ещё будут вопросы, так что я скоро вернусь ^_^
Спасибо всем помогавшим!
Я думаю, у меня ещё будут вопросы, так что я скоро вернусь ^_^
Осподя, я думал там правда чего...
Верстайте дивами, господа, и не морочьте себе голову.
Верстайте дивами, господа, и не морочьте себе голову.
Да, стандарты настоятельно рекомендуют использовать их. Но вряд ли, imho, интернет кишит разговорами про div vs table только по причине holy war между упертыми приверженцами исключительно одного из них.
Мне и не надо никаких холиваров, я давно уже всё решил.
Просто сравните, сколько головной боли в данном случае с таблицами и как просто это можно сделать на дивах.
Просто сравните, сколько головной боли в данном случае с таблицами и как просто это можно сделать на дивах.
Дык дело не в холиварах... Просто дивы я ещё не осилил и верстать ими не умею =)
А так я ж не протитв... Хотя, старые добрые таблицы мне по душе =)
Отдельное спасибо за примерчик.
А так я ж не протитв... Хотя, старые добрые таблицы мне по душе =)
Отдельное спасибо за примерчик.