VPF::Ошибка в слоях - Форум программистов

BASILIO

Дата 18.4.2008, 05:04 (ссылка)

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

Загрузка ...

Koté-CAH

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

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

Вот код:

Код


.whint { position: relative; }
.hintself { display: none; position: absolute; border: solid 1px #ff0000; background: #ffff00; }

Код


function myhint(x, y)
    {
        if(y == 1)
            {
            x.getElementsByTagName('div')[0].style.display = 'block';
            }
        else
            {
            x.getElementsByTagName('div')[0].style.display = 'none';
            }
    }

Код


<a onmouseover="lh(this, 1);myhint(this, 1)" onmouseout="lh(this, 0);myhint(this, 0)" class=xtext style="position:relative;z-index:25;" href=h>HIDE<div class="hintself" style="z-index:24;top:30px;left:10px;height:50px;width:300px;">Hint for HIDE</div></a>

Как видно на скрине в файле, по какой-то пречине, слово HIDE заползло на тереторию подзказки, как сделать чтоб этого не было? :(

Добавлено через 1 минуту и 43 секунды
Файл:

Присоединённый файл ( Кол-во скачиваний: 6 )

sloi.jpg 13,87 Kb

SelenIT

Дата 18.4.2008, 06:26 (ссылка)

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

Загрузка ...

баг форума

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

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

1) Не вкладывать блочные элементы (div) в инлайновые (a). Если очень надо, вместо div можно использовать <span style="display:block">.
2) На всякий случай;) поставить подсказке z-index выше, чем у самой ссылки.

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

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

BASILIO

Дата 18.4.2008, 07:40 (ссылка)

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

Загрузка ...

Koté-CAH

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

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

Цитата(SelenIT @ 18.4.2008, 06:26

)

1) Не вкладывать блочные элементы (div) в инлайновые (a). Если очень надо, вместо div можно использовать <span style="display:block">.

А какая пардон разница, ведь он не внутри отображается?

Цитата(SelenIT @ 18.4.2008, 06:26

)

2) На всякий случай;) поставить подсказке z-index выше, чем у самой ссылки.

Так ведь я так и зделал smile

Добавлено через 2 минуты и 28 секунд
а здесь не зделал, но у себя уже менял, не помогает =(

bars80080

Дата 18.4.2008, 09:09 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

странно, у меня всё нормально... хотя почему, так оно и должно быть
однако, неизвестно влияние функции lh(),
а также по примеру подсказка вылетает ниже слова, а по рисунку выше, налицо не совпадение примера с реальной ситуацией

BASILIO

Дата 18.4.2008, 09:45 (ссылка)

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

Загрузка ...

Koté-CAH

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

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

Цитата(bars80080 @ 18.4.2008, 09:09

)

однако, неизвестно влияние функции lh(),

подсветка при наводе, на данную фишку не влияет, вот сейчас ещё один пример, и опять что-то не понятное =(

Добавлено через 2 минуты и 10 секунд

Код


<div id="nnhint" style="position:relative;z-index:23;">
    <INPUT onFocus='myhint(document.getElementById("nnhint"), 1)' onBlur='myhint(document.getElementById("nnhint"), 0)' class="xtext" id="nn" type=text name="nn" value="" style="width:250px;">
    <div class="hintself" style="z-index:24;top:30px;left:10px;height:50px;width:300px;">Dlja regestracii vy mozhete izpol'zovat' tol'ko A-Z,a-z,0..9.</div>
</div>

Добавлено через 3 минуты и 37 секунд

Цитата(bars80080 @ 18.4.2008, 09:09

)

однако, неизвестно влияние функции lh(),

Код


        function lh(x,y)
            {        
                if(y == 1)
                    {
                    x.style.background = "#f9f9f9";
                    }
                else
                    {
                    x.style.background = "#ffffff";
                    }
            }

Во втором примере она не применяется, так что на неё не грешу

Присоединённый файл ( Кол-во скачиваний: 1 )

sloi2.jpg 18,34 Kb

BASILIO

Дата 18.4.2008, 10:24 (ссылка)

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

Загрузка ...

Koté-CAH

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

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

Нашол загвоздку, немного опешил когда прочё от логики тех кто это придумал:

Цитата

Описание
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибут z-index.
Синтаксис
z-index: число | auto
Аргументы
В качестве аргумента допустимо использовать положительное или отрицательно целое число, а также ноль. Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузерах Netscape, Mozilla и Firefox.

http://htmlbook.ru/css/z-index.html

bars80080

Дата 18.4.2008, 10:53 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

а что тут удивительного? вполне нормально

мы когда пишем страницу снизу вверх, всё равно что накладываем листочки бумаги друг на друга - получаются слои

сюрпризы начинаются при наследовании, когда оказывается, что ячейки таблицы тоже воспринимаются как слои и потому иногда вываливаются фортеля, когда вложенный в td слой div оказывается под соседней правой или нижней ячейкой

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