Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> ссылка под div, Позиционирование div над ссылками 
:(
    Опции темы
jsse
Дата 4.9.2010, 22:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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



Есть два блока:

Код

    <div style="border: solid 1px red; width: 200px; height: 200px;">
        text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext text
        <a href="ссылка">ссылка</a>
        text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext text
    </div>
    
    <div style="border: solid 1px green; position: absolute; top: 0; width: 200px; height: 200px;">
        ПЕРЕКРЫВАЮ
    </div>


Слой с названием "ПЕРЕКРЫВАЮ" должен быть сверху первого.
Возможно сделать так, чтоб ссылка стала кликабельной не применяя к ней стилей?
PM WWW Skype   Вверх
ksnk
Дата 4.9.2010, 22:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

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



Цитата(jsse @  4.9.2010,  22:48 Найти цитируемый пост)
Слой с названием "ПЕРЕКРЫВАЮ" должен быть сверху первого.
Возможно сделать так, чтоб ссылка стала кликабельной не применяя к ней стилей? 

Еще раз и помедленнее...  smile 

слой должен быть поверх первого с самого верха первого блока? Он может даже и не "задевать" ссылку...
Это достаточно несложно, нужно паренту этих блоков установить position:relative, а блоку "перекрываю" установить position:absolute. Если после удастся вычислить-угадать  правильные top и left, то вполне можно попасть в нужное место.

ссылка вообще говоря и так кликабельна, без дополнительных стилей...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
jsse
Дата 4.9.2010, 23:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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



Цитата

слой должен быть поверх первого с самого верха первого блока? Он может даже и не "задевать" ссылку...

Блоки должны быть одинакового размера.
Блок "Перекрываю" должен находиться сверху предыдущего(перекрывать первый).

Цитата

ссылка вообще говоря и так кликабельна, без дополнительных стилей... 

Мышей не кликабельна  smile . По-крайней мере я проверял в хроме и лисе.

Добавлено @ 23:53
На всякий случай, оборачиваю в div

Код

<div style="position: relative">

    <div style="border: solid 1px red; width: 200px; height: 200px;">
        text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext text
        <a href="ссылка">ссылка</a>
        text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext text
    </div>
    
    <div style="border: solid 1px green; position: absolute; top: 0; width: 200px; height: 200px;">
        ПЕРЕКРЫВАЮ
    </div>

</div>



Это сообщение отредактировал(а) jsse - 4.9.2010, 23:54
PM WWW Skype   Вверх
ayax2005
Дата 5.9.2010, 02:01 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


echo $smile
**


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

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



накидывал в firebug, может быть избыточность стилей:

Код

   <div style="background:none repeat scroll 0 0 #00FF00;border:1px solid red;height:200px;width:200px;">
        text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext text
        <a href="LINK">LINK</a>
        text text text texttext texttext texttext texttext texttext texttext texttext texttext texttext text
    </div>
    
    <div style="background-color:#FF0000;border:1px solid green;height:200px;margin-top:-200px;width:200px;">
        UPPON
    </div>


Весь секрет в использовании фичи с отрицательными отступами. Специаьлно добавил фоновые заливки, можете проверить, что блок UPPON всегда верхним слоем.
Если не секрет, зачем вам понадобилось такое решение?


--------------------
все вопросы - из-за неверной формулировки задачи
PM MAIL ICQ   Вверх
jsse
Дата 5.9.2010, 12:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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



ayax2005, Спасибо, то что нужно.

Цитата(ayax2005 @  5.9.2010,  02:01 Найти цитируемый пост)
Если не секрет, зачем вам понадобилось такое решение? 


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

Оказалось, что нет  smile 

Знаю что в ie6 c pngfix эта штука работала. Т.е. прозрачная область картинки не была прозрачной, осел ее вообще вырезал.
PM WWW Skype   Вверх
ksnk
Дата 5.9.2010, 13:07 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


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

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



Если ссылка перекрыта, можно ее "кликать" вручную. 
Установить обработчик, при клике выкинуть событие в нижележащий див.
С помощью fireEvent или trigger от jQuery. Другое дело, что больше одной ссылки не кликнуть...
  


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
jsse
Дата 5.9.2010, 13:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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



Цитата(ksnk @  5.9.2010,  13:07 Найти цитируемый пост)
Установить обработчик, при клике выкинуть событие в нижележащий див.


Отличная идея!
Берем все нижние ссылки, jabascript-ом рисуем сверху "прозрачные" ссылки с теми же урлами и размерами как у реальных ссылок.

Теперь можно строить очень красивые менюшки  smile 
PM WWW Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0755 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.