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

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;

Just inside the parentdivimage, next to other divs that parent contains you should put:

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

Then in css file:

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

The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.

---

Two things you can do:

1. Change #childdivimage to a span element, and change #parentdivimage to an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.

2. Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.location inside this event. This is TheEasyWay^TM, but will not degrade gracefully.

---

Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:

Html:

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

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

---

Make the div of id="childdivimag" a span instead, and wrap that in an a element. As the span and img are in-line elements by default this remains valid, whereas a div is a block level element, and therefore invalid mark-up when contained within an a.

---

put display:block on the anchor element. and/or zoom:1;

but you should just really do this.

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>

---

What I would do is put a span inside the <a> tag, set the span to block, and add size to the span, or just apply the styling to the <a> tag. Definitely handle the positioning in the <a> tag style. Add an onclick event to the a where JavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.

If you're using jQuery, you can use this as your listener and omit the onclick in the a tag.

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

this allows you to attach listeners to any changed elements as necessary.

---

Hi this can be done in many ways. a. Using nested inside an tag.

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

b. Using the Inline JavaScript Method

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

c. Using jQuery inside tag

HTML:

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

jQuery:

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

I hope it helps... Thanks in advance

---

A link with <div> tags:

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

A link with <a> tags:

<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