link href untuk seluruh div dalam HTML / CSS

Inilah yang saya coba capai dalam HTML / CSS:

Saya memiliki gambar dengan tinggi dan lebar berbeda, tetapi semuanya di bawah 180x235. Jadi yang ingin saya lakukan adalah membuat divdengan borderdan vertical-align: middlesemuanya. Saya telah berhasil melakukannya tetapi sekarang saya terjebak pada cara membuat tautan href dengan benar secara keseluruhan div.

Ini kode saya:

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

Harap perhatikan bahwa demi kemudahan menyalin di sini, kode gayanya sebaris.

Saya membaca di suatu tempat bahwa saya dapat menambahkan div induk lain di atas kode dan kemudian melakukan href di dalamnya. Namun, berdasarkan beberapa penelitian, itu tidak akan menjadi kode yang valid.

Jadi untuk meringkasnya lagi, saya membutuhkan seluruh div ( #parentdivimage) menjadi tautan href.

UPDATE 06/10/2014: menggunakan div di dalam a benar secara semantik di HTML5.

Anda harus memilih di antara skenario berikut:

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

yang secara semantik tidak benar, tetapi akan berhasil.

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

yang secara semantik benar tetapi melibatkan penggunaan JS.

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

yang secara semantik benar dan berfungsi seperti yang diharapkan tetapi bukan div lagi.

Mengapa Anda tidak menghapus <div>elemen dan menggantinya dengan an <a>? Hanya karena tag anchor bukan div bukan berarti Anda tidak dapat menatanya dengan display:block, tinggi, lebar, latar belakang, batas, dll. Anda dapat membuatnya terlihat seperti div tetapi tetap bertindak seperti tautan. Maka Anda tidak mengandalkan kode tidak valid atau JavaScript yang mungkin tidak diaktifkan untuk beberapa pengguna.

Lakukan seperti ini:

Parentdivimage harus memiliki lebar dan tinggi yang ditentukan, dan posisinya harus:

position: relative;

Tepat di dalam parentdivimage, di samping div lain yang berisi induk Anda harus meletakkan:

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

Kemudian di file css:

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

Tag span akan mengisi blok induknya yaitu parentdiv, karena tinggi dan lebarnya disetel menjadi 100%. Span akan berada di atas semua elemen di sekitarnya karena menyetel z-index lebih tinggi daripada elemen lainnya. Akhirnya span dapat diklik, karena berada di dalam tag 'a'.

Dua hal yang dapat Anda lakukan:

1. Ubah #childdivimageke spanelemen, dan ubah #parentdivimageke tag anchor. Ini mungkin mengharuskan Anda untuk menambahkan beberapa gaya lagi untuk membuat semuanya terlihat sempurna. Ini diutamakan, karena menggunakan markup semantik, dan tidak bergantung pada javascript.

2. Gunakan Javascript untuk mengikat event klik #parentdivimage. Anda harus mengarahkan ulang jendela browser dengan memodifikasi window.locationdi dalam acara ini. Ini adalah TheEasyWay ^TM , tetapi tidak akan menurun dengan anggun.

Sesuai dengan apa yang dikatakan Surreal Dreams, mungkin yang terbaik adalah menata tag jangkar menurut pengalaman saya, tetapi itu benar-benar tergantung pada apa yang Anda lakukan. Berikut contohnya:

Html:

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

Kemudian 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

Membuat divdari id="childdivimag"sebuah spansebaliknya, dan bungkus bahwa dalam aelemen. Karena spandan imgmerupakan elemen in-line secara default, ini tetap valid, sedangkan a divadalah elemen level blok, dan oleh karena itu mark-up tidak valid ketika terdapat dalam file a.

letakkan display:blockdi elemen jangkar. dan / atau zoom:1;

tetapi Anda harus benar-benar melakukan ini.

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>

Apa yang akan saya lakukan adalah meletakkan span di dalam <a>tag, mengatur span untuk memblokir, dan menambahkan ukuran ke span, atau hanya menerapkan gaya ke <a>tag. Tangani pemosisian dengan pasti dalam <a>gaya tag. Tambahkan onclick eventke a whereJavaScript akan menangkap acara, kemudian mengembalikan false di akhir acara JavaScript untuk mencegah tindakan default dari hrefdan menggelembungnya klik. Ini berfungsi dalam kasus dengan atau tanpa mengaktifkan JavaScript, dan AJAX apa pun dapat ditangani di pendengar Javascript.

Jika Anda menggunakan jQuery, Anda dapat menggunakan ini sebagai pendengar dan menghilangkan onclickdi atag.

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

ini memungkinkan Anda untuk melampirkan listener ke elemen yang diubah sesuai kebutuhan.

Ini bisa dilakukan dengan banyak cara. Sebuah. Menggunakan bersarang di dalam tag.

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

b. Menggunakan Metode JavaScript Inline

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

c. Menggunakan jQuery inside tag

HTML:

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

jQuery:

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

Tautan dengan <div>tag:

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

Tautan dengan <a>tag:

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