Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > ссылка под div

Автор: jsse 4.9.2010, 22:48

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

Код


    <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>

Слой с названием "ПЕРЕКРЫВАЮ" должен быть сверху первого.
Возможно сделать так, чтоб ссылка стала кликабельной не применяя к ней стилей?

Автор: ksnk 4.9.2010, 22:57

Цитата(jsse @ 4.9.2010, 22:48

)

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

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

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

Автор: jsse 4.9.2010, 23:48

Цитата

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

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

Цитата

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

Мышей не кликабельна 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>

Автор: ayax2005 5.9.2010, 02:01

накидывал в 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 всегда верхним слоем.
Если не секрет, зачем вам понадобилось такое решение?

Автор: jsse 5.9.2010, 12:55

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

Цитата(ayax2005 @ 5.9.2010, 02:01

)

Если не секрет, зачем вам понадобилось такое решение?

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

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

Знаю что в ie6 c pngfix эта штука работала. Т.е. прозрачная область картинки не была прозрачной, осел ее вообще вырезал.

Автор: ksnk 5.9.2010, 13:07

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

Автор: jsse 5.9.2010, 13:27

Цитата(ksnk @ 5.9.2010, 13:07

)

Установить обработчик, при клике выкинуть событие в нижележащий див.

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

Теперь можно строить очень красивые менюшки smile