Css до и после использования - PullRequest
Новая
       5

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

0 голосов
/ 28 января 2011

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

Ответы [ 2 ]

0 голосов
/ 31 июля 2011

Вы скорее хотите это: 

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

См. this и Google для css :before content для примеров!

0 голосов
/ 28 января 2011

Я не вижу в этом ничего особенно плохого, если я использую его в jsFiddle с существующим изображением, оно отображается в элементах списка:

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

Убедитесь, что изображения действительно существуют. Также убедитесь, что вы не используете Internet Explorer, который не поддерживает: before и: after.

...