link href do całego div w HTML / CSS

Oto, co próbuję osiągnąć w HTML / CSS:

Mam obrazy w różnych wysokościach i szerokościach, ale wszystkie są poniżej 180 x 235. Więc to, co chcę zrobić, to stworzyć divz borderi vertical-align: middlewszystko. Zrobiłem to pomyślnie, ale teraz utknąłem na tym, jak poprawnie połączyć href w całości div.

Oto mój kod:

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

Zwróć uwagę, że ze względu na łatwe wklejanie kopii, kod stylu jest wbudowany.

Przeczytałem gdzieś, że mogę po prostu dodać kolejny nadrzędny div na górze kodu, a następnie zrobić w nim href. Jednak na podstawie niektórych badań nie będzie to prawidłowy kod.

Podsumowując ponownie, potrzebuję, aby całe div ( #parentdivimage) było linkiem href.

AKTUALIZACJA 10.06.2014: używanie elementów div wewnątrz a jest semantycznie poprawne w HTML5.

Musisz wybrać jeden z następujących scenariuszy:

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

co jest semantycznie niepoprawne, ale zadziała.

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

co jest poprawne semantycznie, ale wymaga użycia JS.

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

który jest poprawny semantycznie i działa zgodnie z oczekiwaniami, ale nie jest już elementem div.

Dlaczego nie usuniesz <div>elementu i nie zastąpisz go <a>zamiast niego? Tylko dlatego, że znacznik kotwicy nie jest elementem div, nie oznacza, że ​​nie display:blockmożesz nadać mu stylu , wysokości, szerokości, tła, obramowania itp. Możesz sprawić, że będzie wyglądał jak element div, ale nadal będzie działał jak łącze. Wtedy nie polegasz na nieprawidłowym kodzie lub JavaScript, który może nie być włączony dla niektórych użytkowników.

Zrób to tak:

Parentdivimage powinien mieć określoną szerokość i wysokość, a jego położenie powinno być:

position: relative;

Wewnątrz parentdivimage, obok innych elementów div, które zawiera rodzic, powinieneś umieścić:

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

Następnie w pliku css:

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

Znacznik span wypełni swój blok nadrzędny, którym jest parentdiv, ponieważ wysokość i szerokość są ustawione na 100%. Rozpiętość będzie znajdować się na górze wszystkich otaczających elementów z powodu ustawienia indeksu Z wyższego niż inne elementy. Wreszcie span będzie klikalny, ponieważ znajduje się wewnątrz tagu „a”.

Możesz zrobić dwie rzeczy:

1. Zmień #childdivimagena spanelement i zmień #parentdivimagena znacznik kotwicy. Może to wymagać dodania więcej stylizacji, aby wszystko wyglądało idealnie. Jest to preferowane, ponieważ używa znaczników semantycznych i nie opiera się na JavaScript.

2. Użyj JavaScript, aby powiązać zdarzenie kliknięcia z #parentdivimage. Musisz przekierować okno przeglądarki, modyfikując window.locationwewnątrz tego zdarzenia. To jest TheEasyWay ^TM , ale nie ulegnie wdzięcznej degradacji.

Wychodząc od tego, co powiedziała Surreal Dreams, prawdopodobnie najlepiej jest stylizować tag kotwicy z mojego doświadczenia, ale tak naprawdę zależy to od tego, co robisz. Oto przykład:

HTML:

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

Następnie 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

Uczynić divz zamiast, i owinąć że w elemencie. Ponieważ elementy i są domyślnie wbudowane, pozostaje to ważne, podczas gdy a jest elementem na poziomie bloku, a zatem nieprawidłowym znacznikiem, gdy jest zawarty w elemencie .id="childdivimag"spanaspanimgdiva

założyć display:blockelement kotwicy. i / lub zoom:1;

ale naprawdę powinieneś to zrobić.

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>

To, co zrobiłbym, to umieścić rozpiętość wewnątrz <a>tagu, ustawić rozpiętość na blok i dodać rozmiar do rozpiętości lub po prostu zastosować stylizację do <a>tagu. Zdecydowanie zajmij się pozycjonowaniem w <a>stylu znacznika. Dodanie onclick eventdo a whereJavaScript przechwyci zdarzenie, a następnie zwróci false na końcu zdarzenia JavaScript, aby zapobiec domyślnemu działaniu hrefi propagacji kliknięcia. Działa to w przypadkach z włączoną obsługą JavaScript lub bez niego, a każdy AJAX może być obsługiwany przez nasłuchiwanie JavaScript.

Jeśli używasz jQuery, możesz użyć tego jako nasłuchiwania i pominąć onclickw atagu.

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

pozwala to na dołączanie słuchaczy do dowolnych zmienionych elementów w razie potrzeby.

Link z <div>tagami:

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

Link z <a>tagami:

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

Można to zrobić na wiele sposobów. za. Używanie zagnieżdżenia wewnątrz tagu.

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

b. Korzystanie z wbudowanej metody JavaScript

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

do. Używanie tagu wewnętrznego jQuery

HTML:

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

jQuery:

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