<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
height: 500px;
}
td {
border: 1px solid black;
padding-top: 50px;
}
#top {
background-color: blue;
width: 100px;
height: 40px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
Hello, how are you?<br><br>Ok
<table>
<tr>
<td>
middle
<div id="top">top</div>
</td>
<td>test</td>
</tr>
</table>
</body>
</html>
Выравнивание в TD top и middle одновременно
Всем привет.
Мне нужно, чтобы в одной ячейке первй блок отображался впритык к верхней границе ячейки (vertical-align: top), а второй блок посередине (vertical-align: middle).
Подскажите, ка такое сверстать без вложенных таблиц и без атрибута rowspan (если во вложенной таблице height задать 100% IE6 не реагирует на это все равно).
Мне нужно, чтобы в одной ячейке первй блок отображался впритык к верхней границе ячейки (vertical-align: top), а второй блок посередине (vertical-align: middle).
Подскажите, ка такое сверстать без вложенных таблиц и без атрибута rowspan (если во вложенной таблице height задать 100% IE6 не реагирует на это все равно).
Почему без rowspan?
Цитата: likeopera
Почему без rowspan?
Потому что я сортирую таблицу яваскриптом, а rowspan сильно усложнит этот процесс.
может вот так, например:
[html]
<html>
<head> </head>
<body>
<table>
<tbody>
<tr>
<td style="border: 1px solid green; width: 100px; height: 100px; vertical-align: top;">
<div style="height: 20px;">top div</div>
<div style="margin: 50% 0px;">middle div</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
[/html]
проверил в ФФ3, опера 9.5, ие7, виндовый сафари. Да в принципе думаю и с остальными проблем не будет
ие6 тоже скушал
[html]
<html>
<head> </head>
<body>
<table>
<tbody>
<tr>
<td style="border: 1px solid green; width: 100px; height: 100px; vertical-align: top;">
<div style="height: 20px;">top div</div>
<div style="margin: 50% 0px;">middle div</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
[/html]
проверил в ФФ3, опера 9.5, ие7, виндовый сафари. Да в принципе думаю и с остальными проблем не будет
ие6 тоже скушал
Верхний блок абсолютно позиционировать, для остального vertical-align:middle; и в ячейке паддинг сверху что-бы если вдруг что - на блок не налезло :)
Цитата: cogonet
Верхний блок абсолютно позиционировать, для остального vertical-align:middle; и в ячейке паддинг сверху что-бы если вдруг что - на блок не налезло :)
А как узнавать координаты блока для абсолютного позиционирования? Высота строк таблицы может быть разной.
А зачем их узнавать? Он ведь всегда сверху должен быть т.е. top:0; left:0 Главное паддинг в ячейке задать сверху на высоту блока и еще чуть-чуть )
Цитата: cogonet
А зачем их узнавать? Он ведь всегда сверху должен быть т.е. top:0; left:0 Главное паддинг в ячейке задать сверху на высоту блока и еще чуть-чуть )
При абсолютном позиционировании началом координат является верхний левый угол браузера, а не родительского контейнера.
Цитата: flat
При абсолютном позиционировании началом координат является верхний левый угол браузера, а не родительского контейнера.
:D это вы где такое прочитали?
http://shaelf.ru/book/css2/visuren.html#choose-position
Код:
Попробуй и посмотри, где отображается div.
Помоему ты не внимательно читал спецификацию, если читал вообще.
Код:
<td>
<div style="position:relative">
middle
<div id="top">top</div>
</div>
</td>
<div style="position:relative">
middle
<div id="top">top</div>
</div>
</td>
Цитата: cogonet
Помоему ты не внимательно читал спецификацию, если читал вообще.
Код:
<td>
<div style="position:relative">
middle
<div id="top">top</div>
</div>
</td>
<div style="position:relative">
middle
<div id="top">top</div>
</div>
</td>
Хорошо, ты был прав. Но проблему это не решает. Да, теперь div позиционируется относительно родительского. Как тогда спозиционировать родительский?