0

私が達成したいこと。

ul白い背景画像をナビゲーション バーに正しく挿入できません。挿入後、白い背景のドロップ シャドウとインナー グロー効果が見えなくなります。

挿入後に見られるもの。(jpg 背景画像)

挿入後に見られるもの。(png背景画像)

以下、HTMLとCSS。

<html>
    <head>
        <meta charset="UTF-8"/>
        <title> Foodstant Delivery </title>
        <link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
        <link rel="shortcut icon" href="images/favicon.ico" />
    </head>

<body>
    <div id="container">

    <div id="navbar">
            <ul>
                <li class="OP"><a  href="Orders.html">Your Order</a></li>
                <li class="MP"><a  href="Menu.html">Menu</a></li>
                <li class="CUP"><a  href="ContactUs.html">Contact Us</a></li>
                <li class="JP"><a  href="Jobs.html" target="_blank">Jobs</a></li>
                <li class="TCP"><a  href="TC.html">Terms & Conditions</a></li>
            </ul>   
        </div>
    </div>

</body> 

</html>

CSS :

* {
    margin: 0;
    padding:0;
}

#navbar {
    background:url('images/navbarbg1.jpg');
    position: absolute;
    top: 300px;
    left: 150px;
    font-size: 26px;
}

#navbar ul li {     
        float:left;
        padding:0 60px 0 0; 
        list-style-type:disc;
        }

#navbar ul li.OP {
        list-style-image:url('images/order.png');
}   

#navbar ul li.MP {
        list-style-image:url('images/menulogo2.png');
}

#navbar ul li.CUP {
        list-style-image:url('images/contact.png');
}

#navbar ul li.JP {
        list-style-image:url('images/Pen.png');
}

#navbar ul li.TCP {
        list-style-image:url('images/pin.png');
}

更新: 何とか動作させることができましたが、不可解な状況下でした。サイズは少しずれており、最初のアイコンをカバーしていません。 画像

#navbar {
    background:url('images/navbarw1.png');
    position: absolute;
    top: 300px;
    left: 150px;


    background-position: 50% 50%;
    font-size: 26px;
    font-family: 'Conv_LITHOSPRO-REGULAR';


}
4

3 に答える 3

0

背景画像で div #navbar を選択する代わりに、 でulそれ自体を選択してみてください#navbar ul{...}。最初のアイコンをカバーしていない理由は、 を に設定する必要があるためlist-style-typeですnone。を取り除き、 +をlist-style-type使用してアイコンを作成します。backgroundiimagepadding-leftli

于 2012-07-20T05:49:38.550 に答える
0

「#navbar」にはサイズが設定されてulおらず、「含まれていない」可能性が高い浮動要素を含む が含まれています。これは、おそらく「#navbar」が表示されていないことを意味します。高さの次元で繰り返されない背景を使用しているため、いずれにしてもその次元を設定することをお勧めします。

編集：私はpcridesagainにも同意します（ただし、正確ではないかもしれません）。これは、リストアイテムとしてliをまだ使用しているためです。それらを「display:block;」にして、左と中央（垂直方向）に配置された背景（繰り返しのない）画像として画像を表示し、lisに十分な行の高さを与え、左のパディングもよく使用します。また、この配置では、リスト項目の画像を使用しない背景をどのように配置するかについて、より忠実になります。ただし、すべての忠実度があるため、すべてを実行するのが少し面倒な場合があるため、それらをリスト項目の画像として使用する理由はわかります。

于 2012-07-20T04:04:36.113 に答える
0

ul overflow を hidden に設定してみてください

ul{
    overflow:hidden;
}
于 2012-07-20T04:56:02.040 に答える