Кликабельный div

[7ion]

Здравствуйте.

Задача сверстать это:

Необходимо:

Картинка и название темы, а также кавычка-елочка кликабельны и ведут по ссылкам.

Вся остальная область также кликабельна и ведет туда же, куда ведет название темы.

Как я сверстал:

<div class="thread hand" onclick="window.location='http://абсолютная_ссылка_на_тему_с_адресом_сайта'">
   <a href="ссылка_на_картинку"><div class="thumb" style="background-image: url('ссылка_на_превью');"></div></a>
   <a href="просто_ссылка_на_тему_без_адреса_сайта_но_от_его_корня">$4</a> [9999]
   <a href="просто_ссылка_на_тему_без_адреса_сайта_но_от_его_корня#end">»</a><br />
   <small>Первое сообщение темы</small>
</div>
<hr class="nomarg" />

hr { border-style: solid none none none; border-width: 1px; clear: both; }
hr.nomarg { margin: 0; }
small { font-size: 0.8em; max-width: 100%; }

.thread { padding: 10px; }
.hand { cursor: pointer; overflow: hidden; }

.thumb { float: left; margin: 5px; margin-right: 15px; width: 64px; height: 64px; background-position: 50% 50%; background-repeat: no-repeat; }

Цвета не пишу, они в отдельном css-файле и значения не имеют.

Также стоит отметить, что на сайте кроме ссылок от корня кое-где используются относительные ссылки, которые отсчитываются от тега base.

Моя проблема:

Сайт верстается для телефонов. Несмотря на то, что Opera Mini и Opera Mobile в теории поддерживают window.location, - на практике эта поддержка... Короче говоря, может бросить на выбор: либо обратно на список тем, либо вообще в случайную тему, либо все-таки туда куда надо. И все это только при попытке открыть страницу в новой вкладке. Сначала я погрешил на ссылку от корня. Решил написать ее с адресом сайта, чтоб наверняка. Ну может нужен Опере такой костыль. Никакой разницы. По-прежнему происходит черте что.

Поэтому вопрос: как сверстать необходимый мне шаблон без использования window.location?

Шаманил с ссылкой с параметром position: absolute, но ее не ограничить родителем. Пытался использоваться вместо div тег a с display:block - так внутри ссылки нельзя размещать другие ссылки, браузеры при виде следующей ссылки предыдущую сразу закрывают.

Обернуть div в a, как я сделал с картинкой - только частичный выход из положения, некликабельным остается текст в теге <small>, т.е. приходится целиться между строчек, но это как раз единственный рабочий способ на мобильных Операх, причем там можно целиться куда угодно. Если совместить оборачивание div в a и div onclick, то приоритет имеет, конечно, onclick и выходом это тоже не является.

Edited November 20, 2011 by 7ion

[sammasati]

Вот, как вариант: http://jsfiddle.net/TKAHn/1/

Классу thread добавляем:

position: relative;

В сам div добавляем ссылку со спаном:

<a href="http://htmlbook.ru"><span></span></a>

И прописываем ей такой стиль:

a>span {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}

[Switch74]

не пойму как js связан тут с css.

Если хочешь открыть в новом окне

<a href="/" target="_blank">link</a>

Eсли нужно в новом окне через js

window.open("/", "Title")

[7ion]

sammasati

Спасибо огромное! Изящное решение, не нарушающее стандарты и работающее абсолютно везде. Вы очень меня выручили.

Switch74

Вы не поняли мою проблему, я просто писал что глюк проявляется при попытке открыть страницу в новой вкладке

[7ion]

Совсем забыл написать о том, что к текстовым ссылкам и диву с картинкой мне пришлось применить класс .z

.z { position: relative; z-index: 2; }

т.к. ссылка с z-index:1; перекрывает всю область, не давая нажимать то, что под ней.

[7ion]

Печально, но проблема все-таки не решена.

Теперь проблема со всеми Операми Мини 3.2 и ниже.

Эти Оперы просто никак не хотят воспринимать position отличный от static, и они просто сбрасывают все позиционированные элементы вниз страницы.

Пофиг на ссылку с position:absolute; на весь div - она падает внизу просто линией и ладно.

Но элементы с классом

.z { position: relative; z-index: 2; }

тоже падают вниз. И в итоге ссылки внизу.

Надо либо по-другому переверстывать, либо есть ли какой-то способ спозиционировать элемент выше z-index:1, оставив при этом position: static?

Вот как сверстано сейчас (чтоб не утруждать всех просмотром темы):

<div class="thread hand">
   <a class="glad" href="ссылка"></a>
   <a href="ссылка">
       <div class="thumb z" style="background-image: url('ссылка');"></div>
   </a>
   <a class="z" href="ссылка">Название темы</a> [999]
   <a class="z" href="ссылка">»</a><br />
<small>Первое сообщение темы</small>
</div>
<hr class="nomarg" />

hr { border-style: solid none none none; border-width: 1px; clear: both; }
hr.nomarg { margin: 0; }
small { font-size: 0.8em; max-width: 100%; }

.thread { padding: 10px; }
.hand { overflow: hidden; }

.thumb { float: left; margin: 5px; margin-right: 15px; width: 64px; height: 64px; background-position: 50% 50%; background-repeat: no-repeat; }
a.glad { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; }
.z { position: relative; z-index: 2; }

Edited November 22, 2011 by 7ion