0

編集：kennypuが問題だと言ったように、高さを27pxに変更しようとしましたが、まだ運がありません。

断片を取得しようとしているアイコンのスプライトがあるので、それらをナビゲーションに使用できます。ただし、スプライトが多すぎるか、ナビゲーション バーにまったく表示されないようです。多くの記事を読み、多くのビデオを見て、多くの SO の質問を読みましたが、修正できないようです。

JSfiddle リンクは次のとおりです。http://jsfiddle.net/m5kbX/

スプライトのリンクはhttps://www.dropbox.com/s/t4fowiw1zda3qcq/icons.pngです。

また、htmlは次のとおりです。

<div id="header-right">
            <ul id="navigation">
                <li>
                    <div class="nav-button">
                        <div id="schools">
                        </div>
                    </div>
                    <div class="nav-text">
                        Schools
                    </div>
                </li>
                <li>
                    <div class="nav-button">
                        <div id="professors">
                        </div>
                    </div>
                    <div class="nav-text">
                        Professors
                    </div>
                </li>
                <li>
                    <div class="nav-button">
                        <div class="Programs">
                        </div>
                    </div>
                    <div class="nav-text">
                        Programs
                    </div>
                </li>
                <li>
                    <div class="nav-button">
                        <div class="account">
                        </div>
                    </div>
                    <div class="nav-text">
                        My Account
                    </div>
                </li>
            </ul>
        </div>

CSSは次のとおりです。

#header-right{
    float: right;
    width: 381px;
    height: 64px;
    background-image:url('http://localhost/gradebyme/gradebyme/public/img/midtile2.png');
    background-repeat:repeat-x;
}

#navigation{
    position: relative;
    background: url('http://localhost/gradebyme/gradebyme/public/img/icontest.png') no-repeat;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation li{
    width: 88px;
    height: 64px;
    display: inline-block;
    text-align: center;
}

.nav-button{
    width: 88px;
    height: 40px;
}

.nav-text{
    width: 88px;
    height: 24px;
    color:white;
}

#schools{
    float: left;
    width: 37px;
    height: 26.75px;
    background-position: 0 0;
}

#professors{
    float: left;
    width: 37px;
    height: 26.75px;
    background-position: 0 -27px;
}

#programs{
    float: left;
    width: 37px;
    height: 26.75px;
    background-color: green;
    background-position: 0 -55px;
}

#account{
    float: left;
    width: 37px;
    height: 26.75px;
    background-color: purple;
    background-position: 0 -83px;
}

スプライトのある最初のスポットには、最初の 2 つ半のアイコンが表示され、コンテナからはみ出していますが、残りは何も表示されません。css スプライトと css についてできるだけ多くのアドバイスをお願いします! 学ぶことが最善の方法です！直すだけじゃないの？

4

2 に答える 2

1

あなたは彼らに背景を与えていません。

    #schools{
        float: left;
        width: 37px;
        height: 26.75px;
        background-position: 0 0;
background: ????
    }

    #professors{
        float: left;
        width: 37px;
        height: 26.75px;
        background-position: 0 -27px;
background: ????
    }

    #programs{
        float: left;
        width: 37px;
        height: 26.75px;
        background-color: green;
        background-position: 0 -55px;
background: ????
    }

    #account{
        float: left;
        width: 37px;
        height: 26.75px;
        background-color: purple;
        background-position: 0 -83px;
background: ????
    }
于 2012-12-29T03:54:44.730 に答える
0

Ok, there were a multitude of things wrong with this, from bad css selectors(case matters, and id's and classes are different!) to the background image not being applied to the correct elements...

I have debugged it to work as I think it should from the original code: updated Fiddle, to get the fiddle to work, download the sprite supplied by the poster and put into your 'localhost/img' directory on your computer with a local server running, like WAMP.

HTML:

<div id="header-right">
    <ul id="navigation">
        <li id="schools" class="nav-text">
            <div class="nav-button">
            </div>
            Schools
        </li>
        <li id="professors" class="nav-text">
            <div class="nav-button">
            </div>
            Professors
        </li>
        <li id="programs" class="nav-text">
            <div class="nav-button">
            </div>
            Programs
        </li>
        <li id="account" class="nav-text">
            <div class="nav-button">
            </div>
            My Account
        </li>
    </ul>
</div>​

CSS:

#header-right{
    float: right;
    width: 381px;
    height: 64px;
    background-image:url('http://localhost/img/midtile2.png');
    background-repeat:repeat-x;
    background-color: grey;
    border: 1px solid;
}

#navigation{
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation li{
    display: inline-block;    
    float: left;
    text-align: center;    
    width: 88px;
    height: 64px;
}

#navigation li .nav-button{    
    background-image: url('http://localhost/img/icons.png');
    background-repeat: no-repeat;    
    width: 37px;
    height: 27px;
    margin: 0 auto 13px;

}
.nav-text{
    color: white;
}

#schools .nav-button{
    background-position: 0 0;
}

#schools .nav-button:hover{
    background-position: -37px 0;
}

#schools .nav-button:active{
    background-position: -74px 0;
}

#professors .nav-button{
    background-position: 0 -27px;
}

#professors .nav-button:hover{
    background-position: -37px -27px;
}

#professors .nav-button:active{
    background-position: -74px -27px;
}

#programs .nav-button{
    background-position: 0 -55px;
}

#programs .nav-button:hover{
    background-position: -37px -55px;
}

#programs .nav-button:active{
    background-position: -74px -55px;
}

#account .nav-button{
    background-color: black;
    background-position: 0 -83px;
}

#account .nav-button:hover{
    background-position: -37px -83px;
}

#account .nav-button:active{
    background-color: #1ca4de;
    background-position: -74px -83px;
}
于 2012-12-29T04:15:53.020 に答える