Форум Flasher.ru - Как такое сделать в IE ?

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - Как такое сделать в IE ? (http://www.flasher.ru/forum/showthread.php?t=81973)

Konstantin S.

30.06.2006 19:55

Как такое сделать в IE ?

Добрый день.

Вот такой вот вопросик есть к участникам форума...
Имеем вот такой HTML файл:

Код HTML:

<html>

<body style="border: 1px dashed #999;">

<div style="background-color: #9F9; position:absolute; left: 0px; top: 0px;">ABSOLUTE DIV</div>

<div style="background-color: #99F;">NORMAL DIV</div>

</body>

</html>

В браузере видим такую картинку:
http://www.smartposter.ru/pic7.gif

Теперь добавляем в заголовок вот такой стиль:

Код:

html {margin-top: 100px;}

FireFox показывает вот так:
http://www.smartposter.ru/pic8.gif
(то есть, он весь контент сместил вниз).

А вот в Internet Explorer вниз смещается весь контент, кроме абсолютно позиционированного слоя (ABSOLUTE DIV).

Не знает ли кто-нибудь, как сделать, чтобы в IE вниз сместилось все ?

Заранее спасибо.

KidsKilla

30.06.2006 22:12

никак. создать див{позишн:релатив}
и внутри него уже рулить его же и маргином награждать

Konstantin S.

30.06.2006 22:46

То есть засунуть все, что между <body> </body> в отдельный <div> ?
Хммм... А все равно div'ы с position:absolute не сместятся...

Хотя, я тут кое-что уже "нарыл"...
Вот:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<style type="text/css">

body { position: relative; margin-top: 100px; }

</style>

</head>

<body style="border: 1px dashed #999;">

<div style="background-color: #9F9; position:absolute; left: 0px; top: 0px;">ABSOLUTE DIV</div>

<div style="background-color: #99F;">NORMAL DIV</div>

</body>

</html>

Если вставить DOCTYPE в шапку, то, вроде, содержимое съезжает вниз. Однако, слои наложены друг на друга. А так быть не должно...

KidsKilla

05.07.2006 04:05

не просто дмв, а див{позишн:релатив}

> Хммм... А все равно div'ы с position:absolute не сместятся...

попробуй сперва, потом говори.

All87

05.07.2006 15:09

если ниче не получается (или просто впадлу чтобы получалося), просто сделай так:
1. margin-top присваиваеш body
2. перед </body> вставь

Код:

<script>

        bd=document.body.style.marginTop;

        dv=document.getElementsByTagName('div');

        for (i=0; i<dv.length; i++)

        {

                if (dv[i].style.position=='absolute')

                {

                        if(dv[i].style.top)

                        {

                                dvI=dv[i].style.top;

                                dv[i].style.top=(dvI.replace('px','')*1)+(bd.replace('px','')*1);

                                alert(dvI);

                        }

                }

        }

</script>

:victory:
Чикс и готово:)

All87

05.07.2006 15:11

блин! забыл в предыдущем коде алерт убрать, так что сделай это сам:) просто убери -- alert(dvI);

Konstantin S.

06.07.2006 09:38

Цитата:

Сообщение от KidsKilla

Снимаю шляпу перед Вами. :)

Вот такой код:

Код HTML:

<html>

<head>

<style type="text/css">

/* body { position:relative;left:0px;top:100px; background-color: #CFC; } */

</style>

</head>

<body style="border: 1px dashed #999;">



<div style="position:relative;margin-top:100px;">



<div style="background-color: #9F9; position:absolute; left: 0px; top: 0px;">ABSOLUTE DIV</div>

<div style="background-color: #99F;">NORMAL DIV</div>

<div>TEST TEST TEST</div>



</div>



</body>

</html>

Работает как мне надо. Отдельными строками выделен див, про который Вы писали. Единственное, я не могу понять, почему это работает ? :confused:

Konstantin S.

06.07.2006 09:43

Цитата:

Сообщение от All87

если ниче не получается (или просто впадлу чтобы получалося), просто сделай так:
1. margin-top присваиваеш body
2. перед </body> вставь
[code]...[СODE]
:victory:
Чикс и готово:)

Я как раз этот вариант оставил на потом. Идея с дивом мне больше нравится, так как меньше писанины. :)

KidsKilla

06.07.2006 21:20

работает потому что у родителя относительное позиционирование. (по умолчанию -- статическое) позишн релатив кроме прочего нужен как раз для того чтобы вложеные элементы с абсолютной позицией отсчитывались от этого элемента.

Konstantin S.

07.07.2006 12:11

Спасибо за подсказку. Наконец-то я нашел, что искал. :)

Часовой пояс GMT +4, время: 19:23.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.