1

ウェブサイト用に小さなソーシャルメディアバーを作成しようとしていますが、何らかの理由で、スプライトの作成に使用したい画像が読み込まれません。また、背景画像が表示されないという同様の問題が発生したことにも言及する必要があります。

HTML呼び出しは次のとおりです。

<div id="socialbar">
    <div class="plus"><a href="https://plus.google.com/u/0/105252399036646613257/posts">Google Plus</a></div>
    <div class="twitter"><a href="https://twitter.com/DarrenLumber">Twitter</a></div>
    <div class="facebook"><a href="http://www.facebook.com/Dazzla2020">Facebook</a></div>
    <div class="youtube"><a href="http://www.youtube.com/user/dazzla2020">YouTube</a></div>
    <div class="flickr"><a href="http://www.flickr.com/photos/dazzla2020/">Flickr</a></div>
</div>

CSSは次のようになります。

#socialbar
{
    width: 245px;
    margin: 0px;
    display: inline;
    border: 0px;
}

#socialbar a.plus
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.plus
{
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px -32px;
}

#socialbar a.twitter
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/d2133ecf83fc76b78008ed1357a8fb8213e6c2300c26f6af3b1758c576ed17db6g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.twitter
{
    background-image: url('http://www.mediafire.com/conv/d2133ecf83fc76b78008ed1357a8fb8213e6c2300c26f6af3b1758c576ed17db6g.jpg');
    background-position: 0px -32px;
}

#socialbar a.facebook
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/df04514676d02be959e52f440b9c10e82d09eefdb82d34fdd336a896be551d026g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.facebook
{
    background-image: url('http://www.mediafire.com/conv/df04514676d02be959e52f440b9c10e82d09eefdb82d34fdd336a896be551d026g.jpg');
    background-position: 0px -32px;
}

#socialbar a.youtube
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/6de4cbb7ecf8e81a25e0ebe35e2cb82af5859b4b2cb3ac9c3ec2fe8c62348c296g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.youtube
{
    background-image: url('http://www.mediafire.com/conv/6de4cbb7ecf8e81a25e0ebe35e2cb82af5859b4b2cb3ac9c3ec2fe8c62348c296g.jpg');
    background-position: 0px -32px;
}

#socialbar a.flickr
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/dbab33ccef1c60b2974d10a0323f7bb04f594f3b57468dc1a7be8551eb9d1b176g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.flickr
{
    background-image: url('http://www.mediafire.com/conv/dbab33ccef1c60b2974d10a0323f7bb04f594f3b57468dc1a7be8551eb9d1b176g.jpg');
    background-position: 0px -32px;
}

ここでも私のコードを見つけてください：http： //jsfiddle.net/Yx8tT/122/
（私のウェブサイトのホストは私の実際以外の画像などへの直接リンクを許可していないため、私はこれに別のホストを使用していることに注意してくださいWebサイト）

そして問題のサイトは次のとおりです： http ：//www.darrenlumber.co.uk

前もって感謝します！

4

1 に答える 1

0

プラス要素にCSSを適用していません。

<div class="plus"><a href="https://plus.google.com/u/0/105252399036646613257/posts">Google Plus</a></div>


#socialbar a.plus
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

セレクターは次のようになります。

#socialbar .plus a

他のそれぞれについても同様です。

于 2012-11-14T00:19:59.450 に答える