1

「ホーム」リンクとしてナビゲーションバーに表示したい家の画像があります。これを実装するためにいくつかの CSS を入力しましたが、機能していないようです。画像を表示するのを手伝ってくれる人はいますか? 明確にするために、以下の画像と CSS コードを参照してください。

ここに画像の説明を入力

水色のボックスは、小さな白い家があるべき場所です。CSSは下記参照

html, body
{
padding:            0;
margin-right:       auto;
margin-left:        auto;
}

.navbar
{
height:             48px;
width:              100%;
background-color:   #294052;
text-align:         center;
vertical-align:     middle;
margin-bottom:      10px;
}

li
{
display:            inline;
position:           relative;
padding:            20px;
border-right:       inset 2px white;
font-size:          20px;
font-weight:        normal;
font-family:        sans-serif;
vertical-align:     middle;
padding-top:        31px;
padding-bottom:     14px;
}

a
{
text-decoration:    none;
color:              white;
}

li:hover 
{
text-decoration:    underline;
background-color:   #447294;
}

li.home
{
background-color:   #447294;
background-image:   url('home.png');
}

span
{
font-weight:        bold;
}

修正プログラムを使用してみましたdisplay:blockが、ナビゲーション バーの残りの部分が台無しになります。

そしてHTMLコード...

<div class="navbar">
<ul>
    <a href="#"><li class="home"></li></a>
    <a href="#"><li>ABOUT</li></a>
    <a href="#"><li>CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES</li></a>
    <a href="#"><li>CONTACT</li></a>
</ul>

</div>
4

2 に答える 2

2

デバッグを開始するには、まず絶対 URL を使用して、画像を読み込めることを確認します。

li.home
{
background-color:   #447294;
background-image:   url('full_path_to_image/home.png');
}

また、HTML コードを提供してください。理想的にはhttp://jsfiddle.net/ (または他の同様のサービス) でデモを準備してください。そうすれば、私たちはあなたをより良く助けることができます。

編集: HTML コードを追加した後、問題は実際に画像へのパスのようです。

これが実際のデモです: http://jsfiddle.net/tBNSU/

于 2012-12-18T17:38:08.260 に答える
1

背景画像はli.home;にあります。しかし、li.home何かを表示するのに十分な幅ではありません。背景画像は背景色のようなもので、コンテンツの形を変えることはありません。

いくつかのコンテンツを追加してみてください：

<li class="home">home</li>

または、bg画像の配置をに変更して、center centerよりはっきりと見えるようにします。

于 2012-12-18T17:53:45.947 に答える