Новая тема   Ответить

 3Sky
привет, коллеги, подсобите плиз, надо сделать следующее

http://imageshack.us/photo/my-images/542/unled2j.jpg/

вверху текст
середка - линка
низ текст

НО! кликабельна должна быть вся серая область, а линка только та что в середке

спасибо!

 Alexandur
Через
Код:
Вот только ссылка будет тоже обрабатываться.

Последний раз редактировалось: Alexandur (09/05/11 в 15:38), всего редактировалось 3 раз(а)

 3Sky
подробнее плиз )

 Alexandur
Добавил, а почему бы всё в ссылку не воткнуть и display: block?

 Alexandur
Вот тут ещё и с жквери: http://css-tricks.com/creating-clickable-divs/

 3Sky
пасиб )

 3Sky
не, что-то не то, не получается

 3Sky
пока у меня получается

<div class="r">Title <a href="#URL#" target="_blank"><img src="http://#URL#/img.jpg" width="240" height="180" border="0" /></a>
Desription
<p>Nolink <a href="#URL#" target="_blank">Link</a> Nolink!</p></div>

.r {text-transform:none; font-size:11px; padding-top:3px;}
.r p{background-color:#000; width:240px; height:30px; }
.r a{text-align:center; line-height:2; color:#FFF;font-size:17px; display:block;}

как победить?

 3Sky
победить, это чтобы все в <p></p> кликалось, но ссылка была только на анкоре

 AniS
можно как-то так попробывать

<div class="r">Title <a href="#URL#" target="_blank"><img src="http://#URL#/img.jpg" width="240" height="180" border="0" /></a>
Desription
<div class="linka">
<p>Nolink</p>
<a href="#URL#" target="_blank">Link</a>
<p>Nolink!</p>
</div>
</div>

стили
.r {text-transform:none; font-size:11px; padding-top:3px; width: 240px; position:relative; z-index: 1 }
.r a{text-align:center;line-height: 17px;color:#FFF;font-size:17px;width:240px;
}
.linka{ height: 30px}
.r .linka a{z-index: 5;height: 17px;position: absolute;top: 210px;left:0px;width: 240px; text-align:center; display:block;padding: 15px 0;
}
.r .linka p{background-color:#090; width:240px; margin:0 auto; height: 15px; padding: 4px 0; overflow:hidden; z-index: 2; cursor:pointer}

Но тут в некоторых броузерах если навести конкретно на слово "nolink" не будет ссылки

 Alexandur
AniS: Хм, чистый CSS Хотя да, в Опере nolink не открывается.

Для случая с обработчиком событий:

.r {text-transform:none; font-size:11px; padding-top:3px;}
.r p{background-color:#000; color: #fff; width:240px; height:60px; cursor:pointer}
.r a{text-align:center; line-height:2; color:#FFF;font-size:17px; display:block;}
...
<div class="r">Title <a href="#URL#" target="_blank"><img src="http://#URL#/img.jpg" width="240" height="180" border="0" /></a>
Desription
<p onclick="document.location.href='http://link-here.th/ere/';">Nolink <a href="#URL#" target="_blank">Link</a> Nolink!</p></div>

 3Sky
спасибо ) попробую

 adde.biz
может такое решение подойдёт.

HTML:
<div class="block">
<div class="ta">sample text</div>
<div class="linka"><a href="http://www.google.com" target="_blank">LINK HERE</a></div>
<div class="tb">sample text</div>
</div>


CSS:
.block {
width: 250px;
background: #666;
text-align: center;
position: relative;
height: 100px;
}

.ta, .tb {
color: #ccc;
text-decoration:none;
position: absolute;
z-index: 5;
width: 100%;
display: block;
}
.ta {
left: 0px;
}
.tb {
left: 0px;
bottom: 0px;
}

a {
color:#fff;
font-size:24px;
display: block;
position: absolute;
z-index: 50;
height: 70px;
width: 250px;
left: 0px;
top: 0px;
text-align: center;
padding-top: 30px;
}
a:hover { color:#ffff00;}

Последний раз редактировалось: adde.biz (11/05/11 в 12:33), всего редактировалось 1 раз

 3Sky
спасибо всем во вторник пришел лесник и дал всем дюлей

зы. появился Скат и за 5 минут нужное мне решение состряпал с минимумом кода.

респекты!

 Alexandur
Ну а где - "Внимание, правильный ответ"?

 3Sky
у Ската это его хлеб, не могу нашару распространять интеллектуальную собственность