href-посилання на весь div у HTML / CSS

Ось що я намагаюся досягти в HTML / CSS:

У мене є зображення різної висоти та ширини, але всі вони знаходяться під 180x235. Тож, що я хочу зробити, це створити divс borderі vertical-align: middleвсі їх. Я успішно це зробив, але тепер я затримався, як правильно href зв’язати весь 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>

Зауважте, що задля того, щоб легко скопіювати сюди легко, код стилю є вбудованим.

Десь я прочитав, що я можу просто додати ще один батьківський дів поверх коду, а потім зробити href всередині цього. Однак, виходячи з деяких досліджень, це не буде дійсним кодом.

Отже, щоб підсумувати це ще раз, мені потрібен весь div ( #parentdivimage), щоб бути посиланням href.

ОНОВЛЕННЯ 10.10.2014: використання div у внутрішніх точках семантично правильне в 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>елемент і не замінити його <a>замість нього? Просто тому , що якір тег НЕ ДІВ не означає , що ви можете не стиль його display:block, висоту, ширину, фон, межі і т.д. Ви можете зробити це виглядати як DIV , але по- , як і раніше діяти , як посилання. Тоді ви не покладаєтесь на недійсний код або JavaScript, який може бути не ввімкнено для деяких користувачів.

Зробіть так:

Parentdivimage повинен мати задану ширину та висоту, а його положення повинно бути:

position: relative;

Біля інших батьківських дивім поруч із іншими дивами, які містить батьків, слід поставити:

<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-індексу вище, ніж у інших елементів. Нарешті, проміжок можна натискати, оскільки він знаходиться всередині тегу "a".

Дві речі, які ви можете зробити:

1. Перейдіть #childdivimageдо spanелемента та перейдіть #parentdivimageдо тега прив’язки. Це може зажадати від вас додаткових стилів, щоб речі виглядали ідеально. Це є переважним, оскільки він використовує семантичну розмітку і не покладається на JavaScript.

2. Використовуйте Javascript для прив’язки події клацання #parentdivimage. Ви повинні перенаправити вікно браузера, змінивши window.locationвсередині цієї події. Це TheEasyWay ^TM , але не буде виграшно виграшно .

Якщо говорити про сюрреалістичні мрії, то, мабуть, найкраще стилізувати тег якоря на моєму досвіді, але це дійсно залежить від того, що ти робиш. Ось приклад:

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>

Що я б робив, - це помістити промінь всередині <a>тегу, встановити блокування діапазону і додати розмір до простору або просто застосувати стиль до <a>тегу. Однозначно обробляйте позиціонування в <a>стилі тегів. Додавання onclick eventдо a whereJavaScript призведе до події, а потім повернеться помилковим в кінці події 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>

c. Використання jQuery всередині тегу

HTML:

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

jQuery:

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