Привет Я пытаюсь вставить левый и правый изображения для моего 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

Я не понимаю, каков ваш вопрос? –

Пожалуйста, уточните свой вопрос: что вы хотите, что происходит на самом деле, как они отличаются, есть ли ошибки, что вы пытались исправить? –

Я не вижу ничего особенно плохого с ним, если я использую его в 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 и Google для css :before content примеров!

источник

2011-07-31 02:06:44 Ardik

Css до и после использования

HTML

ответ

Смежные вопросы