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

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

HTML/CSS에서 제가 달성하고자 하는 것은 다음과 같습니다.

높이와 폭이 다른 이미지를 가지고 있지만 모두 180x235 이하입니다.은 그서제하싶것을 만드는 입니다.div와 함께border그리고.vertical-align: middle그들 모두성공적으로 완료했지만 이제는 전체를 적절하게 hreflink하는 방법에 대해 고민하고 있습니다.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 (가서그저는전요면, 다체필요합니자하약다시, 래가▁(다그▁so필요니합▁the▁div▁entire▁i▁need)가 필요합니다.#parentdivimage 임. ) href 크니다링입다링▁).

업데이트 06/10/2014: HTML5에서 a의 내부에 div를 사용하는 것은 의미적으로 올바른 것입니다.

다음 시나리오 중에서 선택해야 합니다.

<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>▁an로 합니다.<a>대신에?앵커 태그가 디브가 아니라고 해서 스타일을 만들 수 없는 것은 아닙니다.display:block높이, 너비, 배경, 테두리 등당신은 그것을 디브처럼 만들 수 있지만 여전히 링크처럼 행동할 수 있습니다.그러면 일부 사용자에 대해 활성화되지 않은 잘못된 코드나 JavaScript에 의존하지 않습니다.

다음과 같이 수행합니다.

Parentdiv 영상에는 지정된 너비와 높이가 있어야 하며 위치는 다음과 같아야 합니다.

position: relative;

parentdiv 영상 바로 안쪽, 부모가 포함하는 다른 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;
}

높이와 폭이 100%로 설정되어 있기 때문에 스팬 태그는 부모 블록인 parentdiv를 채웁니다.z-index를 다른 요소보다 높게 설정하기 때문에 스팬은 주변의 모든 요소의 맨 위에 있습니다.마지막 스팬은 'a' 태그 안에 있으므로 클릭할 수 있습니다.

초현실적인 꿈이 말한 것처럼, 아마도 제 경험에서 앵커 태그를 스타일링하는 것이 최선일 것입니다. 하지만 그것은 실제로 여러분이 무엇을 하고 있는지에 달려 있습니다.다음은 예입니다.

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

다음 두 가지 작업을 수행할 수 있습니다.

1. #childdivimagespan 및 변경 #parentdivimage닻줄까지따라서 완벽하게 보이도록 스타일링을 추가해야 할 수도 있습니다.이것은 의미 마크업을 사용하고 자바스크립트에 의존하지 않기 때문에 선호됩니다.

2. 를 Javascript로 .#parentdivimage.window.location이 행사 안에서.이것은^TM 쉬운 방법이지만 우아하게 저하되지는 않습니다.

지금까지 아무도 이 간단한 속임수를 제안하지 않았다니 놀랍습니다! (그래도 denu는 비슷한 것을 합니다.)

하는 링크를 원하시면div아이디어는 빈 공간을 만드는 것입니다.<a> 번째자식으로 지정: " 번째자로태그지정으":

<div class="covered-div">
  <a class="cover-link" href="/my-link"></a>
  <!-- other content as usual -->
</div>

div.covered-div {
  position: relative;
}

a.cover-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

이기은사시특유용다니합히용능을 할 때 .<ul>블록 섹션 또는 슬라이드 쇼를 만들고 전체 슬라이드를 링크로 만듭니다(슬라이드에 있는 텍스트만 제외)..<li>그것을 그것으로 포장하는 것은 유효하지 않습니다.<a> 당신은 항목 .<li>블록으로 막다

첫 번째 자식으로 설정하면 클릭으로 텍스트 내부의 다른 링크나 단추에 연결할 수 없게 됩니다.클릭할 수 있게 하려면 마지막 아이로 만들어야 합니다.

원래 질문의 경우:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
  <a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
  <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
    <img src="myimage.jpg" height="62" width="180">
  </div>
  <!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>

를 .divid="childdivimag" a span대신, ▁an▁that다▁instead니포▁in장합▁and▁wrap,.a원소의처럼span그리고.img 요소이며,는 유효한 됩니다.div블록 레벨 요소이므로, 블록 레벨 요소 내에 포함된 경우 마크업이 유효하지 않습니다.a.

놓다display:block및/또는 요및또소앵는/커▁the또는.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 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";
 });

제가 할 일은 그 안에 스판을 넣는 것입니다.<a>태그를 지정하거나, 스판을 블록으로 설정하고, 스판에 크기를 추가하거나, 스타일링을 적용합니다.<a>tag. 하십시오. 위치 지정을 확실히 처리합니다.<a>꼬리표식추가 anonclick event에▁a where후때하여 JavaScript의 합니다.href그리고 딸깍 소리가 납니다.이것은 JavaScript가 활성화되어 있거나 활성화되어 있지 않은 경우에 작동하며 모든 AJAX는 Javascript Listener에서 처리할 수 있습니다.

당신이하고 jQuery ▁the▁j▁▁use다▁you▁and▁omit▁this있니습▁asqu▁j▁can수▁your▁you,'▁listenerre략생할▁using를을 생략할 수 있습니다.onclick에 시대에a꼬리표를 달다

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

필요에 따라 수신기를 변경된 요소에 부착할 수 있습니다.

저는 그냥 해요.

onClick="location.href='url or path here'"

이 링크<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>

언급URL : https://stackoverflow.com/questions/4465923/a-href-link-for-entire-div-in-html-css