2 つの個別の div 内に 2 つの画像を使用して、検索バー用のタブを作成しようとしていますが、何らかの理由で 1 つの画像しか表示されません。どちらか一方。css から home-searchbar-school id をコメントアウトすると、教授タブが表示されます。それ以外の場合は学校のみが表示され、教授タブがあるべき場所に表示されます。Google Chrome の dev ヘルパーで div がどこにあるかを確認すると、適切な場所に表示されるので、困惑しています。
HTMLは次のとおりです。
<div id="home-searchbar">
<div id="home-searchbar-tabs">
<div id="home-searchbar-professor" class="home-searchbar-tab">
</div>
<div id="home-searchbar-school" class="home-searchbar-tab">
</div>
</div>
<div id="home-searchbar-container">
</div>
</div>
そしてCSS:
#home-searchbar{
margin-left: 20px;
float: left;
height: 115px;
width: 980px;
background-color: green;
}
#home-searchbar-tabs{
float: left;
width: 980px;
height: 32px;
background-color: red;
}
.home-searchbar-tab{
background-color: yellow;
width: 190px;
height: 32px;
float: left;
}
#home-searchbar-professor{
background: url('../img/searchtabs.png') 0 0 no-repeat;
}
#home-searchbar-professor{
background: url('../img/searchtabsinactive.png') 0 -64px no-repeat;
}
#home-searchbar-container{
float: left;
width: 980px;
height: 83px;
background-color: purple;
}
画像はスプライトです。正しく機能しているので、そのうちの 1 つだけをアップロードします。他の画像は配色が違うだけで同じです。
また、ランダムな小さな質問ですが、div にクラスと id を含めるための適切なスタイルですか? 私はまだCSSについて学んでいるので、それがdivで両方を使用する正しい方法/最適な方法であるかどうか疑問に思っていましたか?
あなたが与えることができる助けやアドバイスをありがとう!