VPF::Вёрстка. div. - Форум программистов

the

Дата 20.2.2008, 19:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 20.2.2008

Репутация: нет
Всего: нет

Доброго времени суток.
Созрела проблема.
Есть страница, свёрстана на таблицах, ширина которой фиксирована - 3424пх.
Высота варьируется, больше 800 пх.
Нужно с помощью div-ов разместить блоки
1-й в левом нижнем углу окна броузера
2-ой в правом верхнем углу окна броузера
Соответвенно при скроллинге страницы чтобы они всегда оставались на своём месте в окне броузера.

Моя попытка.

Код


<!DOCTYPE html public "-//w3c//dtd html 4.0 transitional//en" > 
<html> 
<head> 
<title>page</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="style.css" rel="stylesheet" type="text/css" /> 

<!--[if gte IE 5.5]> 
<![if lt IE 7]> 
<style type="text/css"> 
div#hrBox { 
  bottom: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); 
  left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); 
} 

div#vrBox { 
  top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); 
  right: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); 
} 

</style> 
<![endif]> 
<![endif]--> 

<style type="text/css"> 
#hrBox { 
  width:100px; 
  height:20px; 
  position:absolute; 
  bottom:0;  
  left:0; 
  z-index:100; 
  border:1px solid gold; 
} 

#vrBox { 
  width:20px; 
  height:100px; 
  position: absolute;  
  top:0; 
  right:0; 
  z-index:101; 
  border:1px solid gold; 
} 

body > div#hrBox { 
  position:fixed; 
} 

body > div#vrBox { 
  position:fixed; 
} 
</style> 
</head> 

<body> 
<table cellpadding="0" cellspacing="0" border="0" style="width:3424px;height:100%;background:#2d2d2d;"> 
    <tr> 
        <td style="height:800px;">&nbsp;</td> 
    </tr> 
</table> 

<div id="hrBox">1</div> 
<div id="vrBox">2</div> 

</body> 
</html>

Проблема в том, что ИЕ не отображает должным образом положение блоков.
ФФ спасибо, читает. smile

Хотелось бы найти решение.
Спасибо.

Это сообщение отредактировал(а) the - 20.2.2008, 19:45

SelenIT

Дата 20.2.2008, 23:50 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Каков смысл данных expression-ов? Зачем прибавлять позицию скроллинга от верхнего края окна к нижней координате дива и т.д.?

Имхо, единственный выход - пересчитывать от верхней и левой границ соответственно, как-то так:

Код


<!--[if gte IE 5.5]> 
<![if lt IE 7]> 
<style type="text/css"> 
body { background: url(about:blank) fixed; } /* чтобы не дрожало  */
div#hrBox { 
  top: expression( 0 + ( scrollYPos = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + ( myHeight = 

document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) - this.offsetHeight + 'px' ); 
  left: expression( 0 + ( scrollXPos = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px' ); 
} 
div#vrBox { 
  top: expression( 0 + scrollYPos + 'px' ); 
  left: expression( 0 + scrollXPos + ( myWidth = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) - 

this.offsetWidth + 'px' ); 
} 
</style> 
<![endif]> 
<![endif]-->

P.S. Поскольку приведенный пример работает в Quirks mode, условия и ветви с documentElement можно смело повыбрасывать вместе проверкой на IE7 - в Quirks mode он тоже не поддерживает position:fixed smile

Либо поставить "взрослый" доктайп...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

the

Дата 28.2.2008, 15:54 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 20.2.2008

Репутация: нет
Всего: нет

Цитата(SelenIT @ 20.2.2008, 23:50)

Каков смысл данных expression-ов? Зачем прибавлять позицию скроллинга от верхнего края окна к нижней координате дива и т.д.?

Да, там была ошибка в подсчете позиции элементов.
Спасибо большое, это решение помогло. smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »