VPF::Глюк Оперы - Форум программистов

Alx

Дата 28.4.2007, 16:26 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

вообще-то тема скорее относится к разделу Верстка, но наглядно неполадки можно увидеть только при работе со скриптом.
смотрите пример, объяснять не буду (в коде есть комменты), и так все понятно.

http://alx.vingrad.ru/dev/css/opera_position-relative.html

Код


<script>
function myFunc(id,act)
{   document.getElementById(id).style.visibility = act;
}

</script>
<center>

<!-- [1] работает как надо в IE, в Opera и FF span:lay2 съезжает налево (не спорю, что так правильно) -->
<div style="position:relative;"
      onmouseout="myFunc('lay2','hidden');"
      onmouseover="myFunc('lay2','visible');">
  <span>lalala</span>
  <span id="lay2" style="position:absolute;left:0px;top:15px;visibility:hidden;">blablabla</span>
</div>

<br><br>
<br><br>

<!-- [2] работает в IE и FF, в Opera - нет -->
<div style="position:relative;display:inline;"
      onmouseout="myFunc('lay3','hidden');"
      onmouseover="myFunc('lay3','visible');">
  <span>lalala</span>
  <span id="lay3" style="position:absolute;left:0px;top:15px;visibility:hidden;">blablabla</span>
</div>

<br><br>
<br><br>

<!-- [3] такое же дерьмо, как в [2] -->
<span style="position:relative;"
      onmouseout="myFunc('lay1','hidden');"
      onmouseover="myFunc('lay1','visible');">
  <span>lalala</span>
  <span id="lay1" style="position:absolute;left:0px;top:15px;visibility:hidden;">blablabla</span>
</span>

</center>

Добавлено через 39 секунд
у кого есть идеи?

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

Ferromarron

Дата 28.4.2007, 17:08 (ссылка)

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

Загрузка ...

Новичок

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

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

не пойму, разве можно использовать position:relative в строчных элементах, вернее какой смысл? (если их, конечно, в блоки не переделать)

Alx

Дата 28.4.2007, 18:04 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Ferromarron, смысл на странице: относительное позиционирование слоёв..

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

Ferromarron

Дата 28.4.2007, 18:33 (ссылка)

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

Загрузка ...

Новичок

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

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

Alx, элемент с position:absolute является блоком. И он логически не может позиционироваться внутри строки (span или div c display:inline). Переделывай всё на блоки, если нужно относительное позиционирование.

Alx

Дата 28.4.2007, 19:31 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Ferromarron,
мне это совершенно неудобно.. блок растягивается на всю возможную ширину, а мне надо, чтобы его ширина была равна его контенту, например чтобы событие mouseover не срабатывало на невидимой части блока, т.е. вне контента.
кроме того, как видно из примера [1] в FF и Opera абсолютно позиционированный див в случае родителя-блока и left==0px позиционируется также у левого края невидимой области, а не видимой (контента), как это происходит в IE. мне, разумеется, нужен именно последний вариант..

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

Ferromarron

Дата 28.4.2007, 20:06 (ссылка)

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

Загрузка ...

Новичок

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

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

Alx,
Вот пример решения, цветом выделил, чтобы были видны границы блока. При необходимости можно увеличить по высоте и ширине.

Код


<style>
.bl {position:relative; margin-left:340px; background:#CFC; float:left;}
*html .bl {margin-left:170px;} // хак для ИЕ6
</style>

<div class="bl">
  <span>lalala</span>
  <span id="lay2" style="position:absolute;left:0px;top:15px;">blablabla</span>
</div>

Добавлено через 9 минут и 5 секунд
Еще, если нужно именно по центру, margin подбираешь в процентах.

Alx

Дата 3.5.2007, 16:35 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Ferromarron,
спасибо, но это немного не то.. нужно чтобы все было автоматически, нельзя каждый раз определять отступы..

Добавлено через 46 секунд
это должен быть блок, который можно разместить как угодно: хоть слева, хоть по цетру, хоть справа к краю родителя.

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

ksnk

Дата 3.5.2007, 17:01 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Раз уж Javascript все равно используется, почему бы не позиционировать именно им?

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Alx

Дата 4.5.2007, 20:47 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

ksnk,
а если таких блоков много? ловить события на onload для всех? некрасиво...

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

Sardar

Дата 4.5.2007, 23:30 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.men { width: 100px; margin-left: auto; margin-right: auto; position: relative; border: 1px solid red;}
.hid { position:absolute;left:0px;top:15px;visibility:hidden; }
</style>

<script type="text/javascript">
function show(cont, state) {
    for(var i=0; i < cont.childNodes.length; i++)
        if(cont.childNodes[i].className == 'hid') {
            cont.childNodes[i].style.visibility = state? 'visible': 'hidden';
            break;
        }
}
</script>

</head>
<body>

<div>
    <div class="men" onmouseover="show(this, true);" onmouseout="show(this, false);">
        <span>test</span>
        <span class="hid">blablabla</span>
    </div>
</div>

</body>
</html>

Доктайп не убирай, иначе всё улетит. Единственный trade-off - нужно указывать ширину.

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

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Alx

Дата 5.5.2007, 08:41 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Sardar,
если бы я мог указывать ширину, у меня вообще никаких проблем бы не было))... но ширину я тоже не знаю... smile

Код


<html>
<head>
<style type="text/css">
.men { width: 100px; position: relative; border: 1px solid red;}
.hid { position:absolute;left:0px;top:15px;visibility:hidden; }
</style>
<script type="text/javascript">
function show(cont, state) {
    for(var i=0; i < cont.childNodes.length; i++)
        if(cont.childNodes[i].className == 'hid') {
            cont.childNodes[i].style.visibility = state? 'visible': 'hidden';
            break;
        }
}
</script>
</head>
<body>
<div align="center"><!-- !!! вот так должно задаваться позиционирование!!! -->
    <div class="men" onmouseover="show(this, true);" onmouseout="show(this, false);">
        <span>test</span>
        <span class="hid">blablabla</span>
    </div>
</div>
</body>
</html>

Sardar, а к чему фишки с doctype?

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

Sardar

Дата 5.5.2007, 10:28 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

Цитата(Alx @ 5.5.2007, 07:41

)

если бы я мог указывать ширину, у меня вообще никаких проблем бы не было)).

Есть блок текста, который необходимо поместить в центре, при этом он сам должен взять ширину достаточную что бы вместить свой контент?

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.men {
    float: left;
    position: relative;
    border: 1px solid red;
}

.hid { position:absolute;left:0px;top:15px;visibility:hidden; }
</style>

<script type="text/javascript">
function show(cont, state) {
    for(var i=0; i < cont.childNodes.length; i++)
        if(cont.childNodes[i].className == 'hid') {
            cont.childNodes[i].style.visibility = state? 'visible': 'hidden';
            break;
        }
}
</script>

</head>
<body>

<div style="padding-left: 50%">
    <div class="men" onmouseover="show(this, true);" onmouseout="show(this, false);">
        <span>test</span>
        <span class="hid">blablabla</span>
    </div>
</div>

</body>
</html>

Цитата(Alx @ 5.5.2007, 07:41

)

Sardar, а к чему фишки с doctype?

Ставим все браузеры в standard-compilance режим, по дефолту они в quirksmode (рисуют согласно фазе луны и погоды на марсе). Когда встретишься с вёрсткой посложней, поймёшь. Пока не поставил доктайп на глюки браузеров ссылаться не имеешь права, ибо глупо smile

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

Alx

Дата 6.5.2007, 22:26 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Цитата(Sardar @ 5.5.2007, 10:28

)

да, только в центре ли, слева ли, справа - никто не знает. желательно естесственно задавать позиционирование стандартными методами - параметром align..

последний вариант, конечно, уже лучше, но он не подходит, т.к. опять же таки мы не знаем ширину дива. если она будет очень большой, то будет расти не в обе стороны, а только вправо, так как левый край всегда прикреплен на расстоянии 50% от родителя

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

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

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