0

私は tafe のサイトを作成してきましたが、これを行うためのさまざまな方法を調べましたが、これまでのところどれもうまくいきませんでした。div id を使用してリスト メニューにボタン イメージを追加しようとしていますが、機能していないようです。このデモ ページは、私のページのオンライン バージョンです。イメージ メニューは左側にあり、その上にテキストが表示されます。

背景画像として順序付けられていないリストに画像を入れようとしていますが、機能していないようです。私はそれをcssのこの部分に入れようとしています

#navcontainer ul {
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
    width: 200px;
    display: block;
    line-height: 34px;
    background-image: url(images/pg_menu_bg.png);
}

ここに私のhtmlと私のcssがあります：

<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><ul><li><a href="JavaScript:void(0);">HOME</a></li><li><a href="JavaScript:void(0);">NEWS</a></li>
<li>
<a href="JavaScript:void(0);">CONTACT</a></li><li><a href="JavaScript:void(0);">ABOUT</a></li></ul></div>
<div id="leftcolumn">
  <div id="navcontainer">
  <ul>
    <li><a href="JavaScript:void(0);">Upcoming Events</a></li>
    <li><a href="JavaScript:void(0);">Members</a></li>
    <li><a href="JavaScript:void(0);">Specials</a></li>
    <li><a href="JavaScript:void(0);">Who is Snap Nature</a></li>
    </ul>
  </div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

CSS:

@charset "utf-8";
* {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    background-color: #F90;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#header {
    background-color: #6F0;
    height: 124px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#navigation {
    background-color: #F3F;
    float: left;
    height: 25px;
    width: 960px;
}
#leftcolumn {
    background-color: #009;
    float: left;
    height: 350px;
    width: 250px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#content {
    background-color: #69F;
    width: 710px;
    float: left;
    height: 350px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#footer {
    background-color: #F00;
    clear: both;
    height: 25px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#navigation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 960px;
    height: 0px;
}
#navigation li {
    float: left;
    background-color: #F3F;
}
#navigation a {
    line-height: 25px;
    text-decoration: none;
    color: #000;
    background-color: #F3F;
    display: block;
    text-align: center;
    vertical-align: middle;
    width: auto;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 25px;
}

#navigation a:hover {
    color: #999;
    text-decoration: none;
}

#navcontainer ul {
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
    width: 200px;
    display: block;
    line-height: 34px;
    background-image: url(images/pg_menu_bg.png);
}

TYジャレッドを助けてください

4

1 に答える 1

1

編集：

はい、これがまさに問題です。あなたが投稿したリンクを確認したところ、ブラウザは次の場所にある画像を探しています: http://www.156.onl.checit.info/CSS/images/pg_menu_bg.png - 存在しません。

そこにある「CSS」を参照してください。意図的ではないことは 99% 確信しています。絶対/相対パスの問題です。読む...

画像が表示されない場合は、画像パスが台無しになっているためだと思います。

解決：

これ：

/* ABSOLUTE PATH solution */
background-image: url(/images/pg_menu_bg.png);

または、これさえも (ファイル構造によって異なります):

/* RELATIVE PATH solution. This is FROM YOUR CSS FILE.*/
background-image: url(../images/pg_menu_bg.png);

説明：

次の間には大きな違いがあります。

background-image: url(images/pg_menu_bg.png);

と

background-image: url(/images/pg_menu_bg.png); /* note the leading slash */

先頭のスラッシュは絶対パス(つまり、「ルート ドメイン URL からのパス」) を意味しますが、先頭のスラッシュがない場合は相対パス(つまり、「このファイル、この場合は CSS ファイルの場所からの相対パス」) を意味します。

つまり、次のようなファイル構造があると仮定します。

root
|
----images
       | pg_menu_bg.png
|
----css
       | mycss.css

css ファイルから、次を呼び出します。

background-image: url(images/pg_menu_bg.png);

実際には次のようになります。

http://yourdomain.com/css/images/pg_menu_bg.png /* note the "css" */

呼び出し中：

background-image: url(/images/pg_menu_bg.png);

結果:

http://yourdomain.com/images/pg_menu_bg.png

したがって、ディレクトリ構造を確認して、そこから作業する必要があると思います。私の推測では、絶対パスを使用する必要があります。

ただし、上記のダミー ファイル構造で相対パスを使用する場合は、次を使用できます。

background-image: url(../images/pg_menu_bg.png); /* ".." means "parent directory"

詳細:
CSS ファイルで相対 URL を使用すると、どの場所に相対的ですか?

2番目の問題:

このスタイルの別の問題があります：

* {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}

このスタイルは、すべての要素に青色の背景を適用します。したがって、その背景画像へのパスに問題がなくても、背景が青色の前景要素によって隠されています。

に変更*してみてくださいbody：

body {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}

注：実際にすべての要素にmargin:0;andが必要な場合padding:0;は、上記のスタイルをそのままにして（ただし を削除しbackground-colorます）、新しいbodyスタイルを定義background-colorして代わりにそこに入れます。このような：

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #6FF;
}
于 2013-04-17T05:25:14.720 に答える