-1

私はロゴを生成する次のコードを持っていますが、ロゴは正しい場所に表示されますが、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;
        }
4

3 に答える 3

3

Your link class should be div.banner span a instead of div.opens span a. So your link has no text and because of that no width as the CSS rule doesn't apply. So there's nothing to click on.

于 2013-03-01T19:31:43.367 に答える
0

おそらくあなたはこのようなものが必要です

<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>
于 2013-03-01T19:34:34.050 に答える
0

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... */

jsfiddleのデモ

于 2013-03-01T20:01:42.473 に答える