0

CSS スプライトを画像リンクとして使用する方法を研究してきましたが、これがわかりません。http://i.stack.imgur.com/ta3Va.png私は（簡単にするために）2つの画像を含むPNG（ここでは：）を持っています。各画像を、外部 Web サイト (Twitter および Facebook) にリンクできるアイコンとして機能させたいと考えています。私は次のようにCSSを設定しました：

CSS

#authorpage-links  ul {
    list-style-type:none;
}

#authorpage-links ul li {
    background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}

#authorpage-links ul li.twitter {
    background: url("/links-authorpage1.png") no-repeat 0 0; 
    width: 20px; 
    height: 14px; 
}

#authorpage-links ul li.facebook {
    background: url("/links-authorpage1.png") no-repeat -21px 0; 
    width: 14px; 
    height: 14px; 
}

...そして私のHTMLは次のようになります:

HTML

<ul id="authorpage-links">
<li id="authorpage-links" class="twitter">
<a target="_blank" href="http://twitter.com/"></a>
</li>
<li id="authorpage-links" class="facebook">
<a target="_blank" href="http://facebook.com/"></a>
</li>
</ul>

さて、2つの質問：

1) リストを使用してこれらの画像を表示するのが最善の方法ですか、それとも div を使用する必要がありますか?

2) これは私の CSS ID とクラスの問題ですか?

どんな助けでも大歓迎です。

4

3 に答える 3

3

あなたの CSS のリビジョンに基づいて (問題については後で説明します)、次のようにします。

#authorpage-list {
    list-style-type: none;
}
#authorpage-list li {
    float: left;
}
#authorpage-list li a {
    background-color: transparent; /* I broke the background down into individual parts */
    background-image:    url(http://i.stack.imgur.com/ta3Va.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    display: block; /* in order that the a elements could be assigned a width/height */
    border: 1px solid #f90; /* for diagnostic purposes while working on this, adjust to taste */
}

#authorpage-list #authorpage-facebook-link a {
    /* a specific selector, in order to be more specific than the previous
       selector which styled the defaults for the a elements in this position */
    background-position: -21px 0;
}​

そして、HTML を次のように修正します。

<ul id="authorpage-list">
    <li id="authorpage-twitter-link" class="twitter">
    <a target="_blank" href="http://twitter.com/"></a>
    </li>
    <li id="authorpage-facebook-link" class="facebook">
    <a target="_blank" href="http://facebook.com/"></a>
    </li>
</ul>

私はこれを思いつきました: JS Fiddle demo。

<時間/>

CSSの問題

  1. これは、HTML に関する限り最大の禁止事項です (または、私がこれまでに確認した限りでは、blinkタグよりもさらに悪いことです): HTMLに同じ例が複数あります。はドキュメント内で一意である必要があります。そうでない場合は、HTML が無効です。これは CSS や JavaScript で問題を引き起こします。 idid

    プロパティ/スタイルなどを共有する必要がある複数の要素がある場合は、classではなくを使用しidます。

  2. あなたのセレクター。の祖先要素内の要素#authorpage-links ulと一致する必要があります。はそれを持つ要素です。その子要素にもそれがあったことは無視します。その部分については説明したと思うからです。他のすべての CSS はそのベースから開始されましたが、これは正確ではなかったため、機能しませんでした。ulid="#authorpage-links"ulidid

于 2012-04-22T19:50:49.080 に答える
1

<li>要素のサイズが 14x14 に設定されている可能性がありますが、タグには何も含まれていない<a>ため、タグは 0x0 領域に縮小され、リスト要素のクリック可能な領域が効果的に非表示になります。おそらくアンカータグにスペースを入れる必要があるので、それらを開くための何かがあります。

<a target="_blank" href="http://facebook.com/">&nbsp;</a>
                                               ^^^^^^
于 2012-04-22T19:39:04.303 に答える
-1

リンクaにはサイズが必要です。私は、aにクリック可能な領域を持たせるためにそうしました。あなたはサイズを必要としないので、私はリンクlisにサイズを与えました。a

licssを次のように置き換えます。

ul#authorpage-links li a {
    display: inline-block;
    background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}

ul#authorpage-links li.twitter a {
    background-position: 0 0; 
    width: 20px; 
    height: 14px; 
}

ul#authorpage-links li.facebook a {
    background-position -21px 0; 
    width: 14px; 
    height: 14px; 
}

また、からid属性を削除しますlis。

「...素晴らしい答え...」-Sparky672

于 2012-04-22T19:39:39.447 に答える