| |
|
|
| | Помогите разобраться, а то уже начинаю впадать в ступор :(
Делал я сайт, на странице располагался флэш в табличке. И я эту табличку запихивал вниз страницы таким кодом:
<body onresize="move_flash()";>
<table id='tblFlash' align=center width=385px border=1
style='height:100; border-collapse:collapse; border-color:f0a0a0;'>
<tr>
<td>
<!-- тут в таблице сидит флэш -->
</td>
</tr>
</table>
<script>
function move_flash() {
var top = document.body.clientHeight - 110;
var left = (document.body.clientWidth - 385)/2;
document.getElementById('tblFlash').style.left = left;
document.getElementById('tblFlash').style.top = top;
}
</script>
</body>
|
Все прекрасно работает.
Теперь делаю другой сайт, и хочу так же табличку разместить внизу страницы.
Делаю аналогично первому примеру:
<body onResize="move_footer();">
<table id='footer' align=center width=100% border=1
style='height:50; border-collapse:collapse; border-color:f0a0a0;'>
<tr>
<td>
<div align="center">FOOTER</div>
</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
function move_footer(){
document.getElementById('footer').style.top = document.body.clientHeight - 100;
}
</script>
</body>
|
И ничего не получается. Таблица сидит где-то в центре страницы (сразу после предыдущих элементов)
В чем разница между двумя примерами? Почему второй не работает?
На всякий случай проверил document.getElementById('footer') - возвращает objectHTMLTable,
document.body.clientHeight тоже определяется верно. Консоль javascript показывает, что никаких ошибок в коде нет.
Что делать? | |
| |
|
|
| |
|
|
| |
для: Хулиган
(14.05.2007 в 11:31)
| | |
<style>
html {height:100%;}
body{...; height:100%; ...}
</style>
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(14.05.2007 в 11:42)
| | | Это ничего не меняет. Дело не в высоте body, она определяется нормально (document.body.clientHeight равна ~700, в зависимости от браузера).
Более того, после
document.getElementById('footer').style.top = document.body.clientHeight - 100;
я вставил для проверки
alert(document.getElementById('footer').style.top);
И получаю ~600. Т.е. стиль top таблицы принял новое нужное значение, но по-прежнему таблица сидит в центре страницы. Во всех трех браузерах. | |
| |
|
|
| |
|
|
| |
для: Хулиган
(14.05.2007 в 11:31)
| | |
function move_footer(){
with (document.getElementById('footer').style) {position = 'absolute'; top = document.body.clientHeight - 100}
}
|
| |
| |
|
|
| |
|
|
| |
для: CNT
(14.05.2007 в 12:22)
| | | Да, со стилем position = 'absolute'; работает...
Тогда возникает вопрос: почему первый пример работает без этого стиля? Там точно нет position = 'absolute'; Ни в файле css, ни в теле самого index.php. | |
| |
|
|
| |
|
|
| |
для: Хулиган
(14.05.2007 в 12:31)
| | | Видимо, потому работает, что в первом примере таблица была первым объектом после тега <body> и её относительные координаты совпали с абсолютными. | |
| |
|
|
| |
|
|
| |
для: CNT
(14.05.2007 в 12:22)
| | | Хотя position = 'absolute'; это не есть гут...
По причине того, что на странице есть невидимый div (display:none;) и когда я его показываю, то он наезжает на таблицу, которая жестко закреплена из-за position = 'absolute'; | |
| |
|
|
| |
|
|
| |
для: Хулиган
(14.05.2007 в 12:36)
| | | так в момент, когда ты показываешь див, прибавляй к свойству top таблицы высоту этого дива | |
| |
|
|
