Мне нужно, чтобы фоновое изображение отдельной <li>было другим - PullRequest
Новая
       4

Мне нужно, чтобы фоновое изображение отдельной <li>было другим

1 голос
/ 03 апреля 2012

У меня есть этот код (показанный ниже), который представляет собой очень простую веб-страницу (только в html), и, как вы можете видеть, есть div, называемый navbar, который содержит «ul».Я хочу, чтобы у каждого из 'li' в этом списке было разное фоновое изображение (причина в том, что я создал изображения кнопок в фотошопе и хочу использовать их вместо обычного текста).Я начал с предоставления каждому 'li' идентификатора и пытался манипулировать этими идентификаторами в css, но это не сработало.Кто-нибудь может мне помочь?Если я не предоставил достаточно информации, я, конечно, могу предоставить больше.

Большое спасибо! 

<head>
    <link rel="stylesheet" type="text/css" href="main.css" />

    <title>Resonance Recording & Rehearsals</title>
</head>

<body>
    <div id="wrapper">

        <div id="header">
        </div>


        <div id="navbar">
            <ul>
                <li id="gallerybutton"> <a href="gallery.html"> Gallery </a> </li> 
                <li id="homebutton"> <a href="index.html"> Home </a> </li> 
                <li is="about_usbutton"> <a href="about_us.html"> About Us </a> </li> 
            </ul>
        </div>

        <div id="cgiform">
        </div>

        <div id="footer">
        </div>

    </div>
</body>

CSS: 

body{
background-image:url("mainbg.png");
background-repeat:no-repeat;
background-color:#000000;
background-size: 100%;

height: 100%; 
width: 100%;

}

#header{

background-image:url("mainheader.png"); 
height: 146px;
width: 1000px;
margin: 0px auto;
background-size: 100%;
}

#navbar{

background-image:url("mainnavbar.png");
height: 88px;
width: 1000px;
margin: 0px auto;
background-size: 100%;

}

ul{
list-style-type: none;
list-style-position: initial;
list-style-image: initial;
padding: 28px 0px 0px 40px; /* padding syntax = top right bottom left */
}

li{
color: #fff;
display:inline; 

}

a:link {
text-decoration:none;
color: #fff;
}

a:visited {
text-decoration:none;
color: #fff;
}

a:hover {
text-decoration:underline;
color: #fff;
}

a:active {
text-decoration:underline;
color: #fff;
}

#navbar #gallerybutton{
background-image:url("gallery.png") no-repeat top center;
}

Ответы [ 3 ]

2 голосов
/ 03 апреля 2012

Пара вещей на самом деле.Вам не нужно вкладывать li-идентификаторы в #navbar.Тот факт, что они являются идентификаторами, означает, что они являются уникальными элементами, поэтому вы просто путаете вещи, делая это.Не имеет значения, что он находится в #navbar, так как всегда будет только один экземпляр # gallerybutton.

Для каждого идентификатора вам понадобится следующий CSS: 

#ID {
    background: url("gallery.png") no-repeat top center;
}

Если выВы собираетесь использовать однострочный фон в CSS, тогда просто background, background-image не будет работать.Если вы хотите использовать это, то вам также нужно использовать background-position и background-repeat.

Также я бы не использовал идентификаторы для остальных ваших элементов, но это действительно другая дискуссия.

2 голосов
/ 03 апреля 2012

Измените свойство CSS " background-image " на " background ", как показано ниже. 

#navbar #gallerybutton{
  background:url("gallery.png") no-repeat top center;
}
1 голос
/ 03 апреля 2012

Вы должны сделать это и для остальных идентификаторов (установите правильную высоту n ширину) 

#gallerybutton {
background:url("image.jpg") no-repeat top left; display: block; height: 50px; width: 200px;
}
...