HTML / CSS의 전체 div에 대한 href 링크

HTML / CSS에서 달성하려는 것은 다음과 같습니다.

높이와 너비가 다른 이미지가 있지만 모두 180x235 미만입니다. 그래서 내가하고 싶은 것은 divwith 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>

복사 붙여 넣기를 쉽게하기 위해 스타일 코드는 인라인입니다.

코드 위에 다른 부모 div를 추가 한 다음 그 안에 href를 수행 할 수있는 곳을 읽었습니다. 그러나 일부 연구에 따르면 유효한 코드가 아닙니다.

다시 요약하면 전체 div ( #parentdivimage)가 href 링크가되어야합니다.

업데이트 06/10/2014 : a 안에 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가 아닙니다.

왜 <div>요소 를 벗겨 내고 <a>대신에 바꾸지 않겠습니까? 앵커 태그가 div가 아니라고해서 display:block높이, 너비, 배경, 테두리 등으로 스타일을 지정할 수 없다는 의미는 아닙니다. div 처럼 보이게 만들지 만 여전히 링크처럼 작동 할 수 있습니다 . 그런 다음 일부 사용자가 사용할 수없는 잘못된 코드 또는 JavaScript에 의존하지 않습니다.

다음과 같이하십시오 :

Parentdivimage는 너비와 높이를 지정해야하며 위치는 다음과 같아야합니다.

position: relative;

parentdivimage 안에 부모가 포함하는 다른 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 태그는 높이와 너비가 100 %로 설정되어 parentdiv 인 부모 블록을 채 웁니다. z-index를 다른 요소보다 높게 설정하여 스팬이 모든 주변 요소의 상단에 있습니다. 마지막으로 'a'태그 안에 있으므로 span을 클릭 할 수 있습니다.

당신이 할 수있는 두 가지 :

1. 변경 #childdivimageA와 span요소, 변경 #parentdivimage앵커 태그에. 완벽하게 보이도록 스타일을 더 추가해야 할 수도 있습니다. 시맨틱 마크 업을 사용하고 자바 스크립트에 의존하지 않기 때문에 선호됩니다.

2. 자바 스크립트를 사용하여 클릭 이벤트를에 바인딩합니다 #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의 대신을, 그리고에 그 포장 요소입니다. 애즈 과는 기본적으로 인라인 요소가되는 반면, 이것은 유효 블록 레벨 요소이며, 따라서 무효 마크 업 포함 때 .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 where이벤트가 잡히고 자바 스크립트 이벤트가 끝날 때 false를 반환하여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";
 });