您好我正在尝试为我的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;
}
<!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>
答案 0 :(得分:0)
我没有看到任何特别的错误,如果我在jsFiddle中使用它存在的图像,它会显示在列表项中:
确保图像确实存在。此外,请确保您不使用Internet Explorer,它不支持:before和:after。
答案 1 :(得分:0)
你想要这个:
#navigation ul:BEFORE{
content: url("../images/header_menu_left.png");
}
请参阅this和谷歌搜索css :before content
以获取示例!