0

嗨，我正在尝试为我的 UL 插入左侧和右侧图像。Blueprint css 框架包含在我的应用程序中。谁能告诉我我做错了什么。谢谢

CSS 
  
 

body{
    margin:0;
}

#header {
    height:150px;
    background: url("../images/header_bg.png") repeat-x;
    border-bottom: 1px solid #ccc;
}

#logo{
    height:100%;
    width:40%;
    float:left;
}

#top_nav{
    width:100%;
    height:65px;
}

#navigation{
    height:100%;
    width:55%;
    float:right;
    padding-right:50px;
    text-align: right;
}

#navigation ul:BEFORE{
    background-image: url("../images/header_menu_left.png");
}

#navigation ul:AFTER{
    background-image: url("../images/header_menu_right.png");
}

#navigation li{
    list-style: none;
    float:right;
    background: url("../images/header_menu_bg.png");
    height:35px;
    padding-top:10px;   
    padding-left:15px;
    padding-right:10px; 
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <link href="css/blueprint/screen.css" rel="stylesheet" type="text/css" media="print" />
  <link href="css/blueprint/print.css" rel="stylesheet" type="text/css" media="print">
  <link href="css/screen.css" rel="stylesheet" type="text/css">
  <!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Site Ismi | Page Title</title>
</head>
<body>
<div class="container">
<!-- Header Div Start -->
<div id="header" class="span-24 last">
    <div id="logo"></div>
    <div id="navigation">
        <div id="top_nav"></div>
        <div id="menu_nav">
            <ul>
                <li class="first">Item 1</li>
                <li>Item 2</li>
                <li class="last">Item 3</li>
            </ul>
        </div>
    </div> 
</div>
<!-- Content Div Start -->
<div id="content" class="span-24 last">
   Ruby Content Here
</div>
<!-- Footer Div Start -->
<div class="footer"></div>
</div>
</body>
</html>
4

2 回答 2

0

我看不出它有什么特别的问题，如果我在 jsFiddle 中将它与存在的图像一起使用，它会显示在列表项中：

http://jsfiddle.net/pZ9Xj/1/

确保图像确实存在。另外，请确保您不使用不支持 :before 和 :after 的 Internet Explorer。

于 2011-01-28T14:48:54.493 回答
0

你宁愿这样：

#navigation ul:BEFORE{
    content: url("../images/header_menu_left.png");
}

见这个和谷歌css :before content的例子！

于 2011-07-31T02:06:44.090 回答