CSS 배경을 클릭 할 수 없음 - a href = ""not working

Question

다음과 같은 코드를 사용하여 로고가 정확한 위치에 표시되지만 a href=""은 왜 작동하지 않습니까?

HTML :

<div class="banner"> 
    <span><a href="<?php echo BASE_URL()?>link" title="View information about award"></a></span> 
</div> 

CSS :이

div.banner{ 
      width:592px; 
      height:1px; 
      position: fixed; 
      top:0; 
      right:0; 
      overflow: visible; 
     } 
     div.banner span{ 
      display: block; 
      position: fixed; 
      top: 0; 
      right: 0; 
      background: url(../../../i/ribbon.png) top right no-repeat; 
      width: 197px; 
      height: 145px; 
      text-indent: -999em; 
     } 
     div.opens span a{ 
      display:block; 
      width: 197px; 
      height: 145px; 
     } 

Answer 1

귀하의 링크 클래스는 div.banner span a 대신 div.opens span a해야한다. 따라서 링크에는 텍스트가 없으므로 CSS 규칙이 적용되지 않으므로 너비가 적용되지 않습니다. 따라서 아무 것도 클릭 할 필요가 없습니다.

Answer 2

아마 당신은 당신의 코드는 특별히 작동하지 않는 이유를 내가 당신에게 말할 수 없다,이

<div class="banner"> 
    <span> 
      <a href="<?php echo BASE_URL().'/thisFile.html'; ?>" title="View information about award"> 
      This is the link to the file 
      </a> 
    </span> 
</div> 

Answer 3

DEMO on jsfiddle

내 생각 같은 것을 필요하지만, 나는 그것이 될 수있는 몇 가지를 참조하십시오. 이것은 내가 그것에 접근하는 방법이다. 전체 배너를 링크로 만들면 -999em이 페이지에서 벗어난 텍스트를 클릭하기가 더 쉽습니다.

당신은 정말로 래퍼를 필요로하지는 않지만, 모듈화 된 것을 유지하기 위해 다른 상황에서이 배너 클래스를 반복적으로 사용할 수 있습니다.

내가 질문에서 벗어나면 알려주세요. 나는 돌아 다니려고 노력할 것입니다.

HTML

<div class="fixed-wrapper"> 

    <a class="banner" href="#"> 

     Some words for robots and for assistive text ?   

     <span class="open">a different image I'm assuming?</span> 

    </a> <!-- end .banner --> 

</div> <!-- end .fixed-wrapper --> 

CSS

.fixed-wrapper { 
    position: fixed; 
    top: 0; right: 0; 
} 

.banner { 
    position: relative; 
    display: block; 
    width:592px; 
    height:145px; 

    background-color: #f06; 
} 

.banner { 
    text-indent: -999em; 
} 

.open { 
    display:block; 
    position: absolute; 
    top: 0; right: 0; 
    width: 197px; 
    height: 145px; 

    background-color: orange; 
} 

.banner:hover .open {  
    background-color: yellow; 
} 

/* i assume that your .open does something... */ 

DEMO on jsfiddle