嗨我正在嘗試爲我的UL插入左側和右側圖像。 Blueprint css框架包含在我的應用程序中。任何人都可以告訴我我做錯了什麼。由於使用前後的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>

來源

2011-01-28 Cem Baykam

我不明白你的問題到底是什麼？ – 2011-01-28 14:44:45

我看不出有什麼特別不妥的地方，如果我的jsfiddle與存在的圖像使用它，它就會顯示列表中的項目：

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

確保圖像確實存在。另外，請確保您不使用Internet Explorer，它不支持：before和：after。

來源

2011-01-28 14:48:54

您更希望這樣的：

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

見this和谷歌css :before content的例子！

來源

2011-07-31 02:06:44 Ardik

使用前後的Css

HTML

回答

相關問題