ссылка href для всего div в HTML / CSS

Вот что я пытаюсь сделать в HTML / CSS:

У меня есть изображения разной высоты и ширины, но все они меньше 180x235. Так что я хочу сделать , это создать divс borderи vertical-align: middleих всех. Я успешно сделал это, но теперь я застрял на том, как правильно ссылаться на всю ссылку div.

Вот мой код:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

Обратите внимание, что для простоты копирования здесь код стиля встроен.

Я где-то читал, что я могу просто добавить еще один родительский div поверх кода, а затем сделать href внутри этого. Однако, основываясь на некоторых исследованиях, это не будет действительный код.

Итак, чтобы подвести итог, мне нужно, чтобы весь div ( #parentdivimage) был ссылкой.

ОБНОВЛЕНИЕ 06/10/2014: использование div внутри a семантически правильно в HTML5.

Вам нужно будет выбрать один из следующих сценариев:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

что семантически неверно, но это будет работать.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

что семантически правильно, но включает использование JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

это семантически правильно и работает, как ожидалось, но больше не является div.

Почему бы вам не удалить <div>элемент и заменить его <a>вместо? Тот факт, что тег привязки не является элементом div, не означает, что его нельзя стилизовать display:block, высоту, ширину, фон, границу и т. Д. Вы можете сделать его похожим на элемент div, но при этом действовать как ссылка. Тогда вы не полагаетесь на неверный код или JavaScript, которые могут быть не включены для некоторых пользователей.

Делай это так:

Родительское изображение должно иметь указанную ширину и высоту, а его положение должно быть:

position: relative;

Прямо внутри родительского раздела, рядом с другими элементами div, которые содержит родитель, вы должны поместить:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

Затем в файле CSS:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

Тег span будет заполнять родительский блок, который является parentdiv, поскольку высота и ширина установлены на 100%. Span будет сверху всех окружающих элементов из-за установки z-index выше, чем у других элементов. Наконец, span будет кликабельным, потому что он внутри тега 'a'.

Вы можете сделать две вещи:

1. Перейдите #childdivimageк spanэлементу и измените #parentdivimageтег привязки. Это может потребовать от вас добавить больше стиля, чтобы все выглядело идеально. Это предпочтительнее, поскольку он использует семантическую разметку и не полагается на JavaScript.

2. Используйте Javascript, чтобы привязать событие щелчка к #parentdivimage. Вы должны перенаправить окно браузера, изменив window.locationвнутри этого события. Это TheEasyWay ^TM , но не будет изящно деградировать.

Исходя из того, что сказал Surreal Dreams, вероятно, лучше всего стилизовать якорный тег в моем опыте, но это действительно зависит от того, что вы делаете. Вот пример:

Html:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

Тогда CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

Сделать divиз вместо этого, и завернуть , что в элементе. Так как и являются встроенными элементами по умолчанию, это остается действительным, тогда как a является элементом уровня блока и, следовательно, недопустимой разметкой, когда содержится в .id="childdivimag"spanaspanimgdiva

положить display:blockна якорный элемент. и / или zoom:1;

но вы должны просто сделать это.

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

Что бы я сделал, это поместил бы span внутри <a>тега, установил span на block и добавил бы размер к span, или просто применил стиль к <a>тегу. Определенно обработайте позиционирование в <a>стиле тега. Добавление onclick eventв a whereJavaScript будет перехватывать событие, а затем возвращать false в конце события JavaScript, чтобы предотвратить действие по умолчанию hrefи всплывающие клики. Это работает в случаях с включенным JavaScript или без него, и любой AJAX может быть обработан в слушателе Javascript.

Если вы используете jQuery, вы можете использовать его в качестве слушателя и опустить onclickв aтеге.

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

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

Ссылка с <div>тегами:

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

Ссылка с <a>тегами:

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>

Это можно сделать разными способами. а. Использование вложенных внутри тега.

<a href="link1.html">
   <div> Something in the div </div>
 </a>

б. Использование встроенного метода JavaScript

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

с. Использование jQuery внутри тега

HTML:

<div class="demo" > Some text here </div>

JQuery:

$(".demo").click( function() {
  window.location.href="link1.html";
 });