CSS спрайт в WordPress - PullRequest
Новая
       6

CSS спрайт в WordPress

0 голосов
/ 12 марта 2012

Я создал спрайт css, который показывает разные изображения при наведении курсора.

Я использую спрайт css на моей странице WordPress, но, похоже, я не могу получить его внутри содержимого.

Изображения просто по всей странице.

Есть идеи? это моя страница [http://www.pixeltouch.no/?p=65][1]

Это HTML 

<ul id="toprow">
        <li id="orginal"><a href="#"></a></li>
        <li id="png"><a href="#"></a></li>
        <li id="jpgx"><a href="#"></a></li>
    </ul>

    <ul id="secondrow">
        <li id="bpp2"><a href="#"></a></li>
    </ul>

    <ul id="thirdrow">
        <li id="bpp1"><a href="#"></a></li>
    </ul>

    <ul id="fourthrow">
        <li id="bpp05"><a href="#"></a></li>
    </ul>

    <ul id="fifthrow">
        <li id="bpp025"><a href="#"></a></li>
    </ul>

И КСС 

 #uppg1container{
margin:10px;
padding:0;
}

/*Första raden*/
#toprow {
position:absolute;
}

#toprow li{
list-style-type:none;
position:absolute;
}

#toprow li, #toprow a{
height:212px;
display:block;
}

#orginal{
background:url('lena.png') 0 0;
left:0;
width:212px;
}

#png{
background:url('lena.png') -212px  0;
left:220px;
width:212px;
}

#png a:hover{
background: url('lena.png') 0 0;
}

#jpgx{
background:url('lena.png') -424px 0;
left:440px;
width:212px;
}

#jpgx a:hover{
background: url('lena.png') 0  0;
}

/*Andra raden*/
#secondrow{
position:absolute;
}

#secondrow li{
top:220px;
left:440px;
list-style-type:none;
position:absolute;
}

#secondrow li, #secondrow a{
height:212px;
display:block;
}

#bpp2{
background:url('lena.png') -636px 0;
left:940px;
width:212px;
}

#bpp2 a:hover{
background: url('lena.png') 0  0;
}

/*Tredje raden*/
#thirdrow{
position:absolute;
}

#thirdrow li{
top:440px;
left:440px;
list-style-type:none;
position:absolute;
}

#thirdrow li, #thirdrow a{
height:212px;
display:block;
}

#bpp1{
background:url('lena.png') -848px 0;
left:940px;
width:212px;
}

#bpp1 a:hover{
background: url('lena.png') 0  0;
}

/*Fjärde raden*/
#fourthrow{
position:absolute;
}

#fourthrow li{
top:660px;
left:440px;
list-style-type:none;
position:absolute;
}

#fourthrow li, #fourthrow a{
height:212px;
display:block;
}

#bpp05{
background:url('lena.png') -1060px 0;
left:940px;
width:212px;
}

#bpp05 a:hover{
background: url('lena.png') 0  0;
}

/*Femte raden*/
#fifthrow{
position:absolute;
}

#fifthrow li{
position:absolute;
top:880px;
left:440px;
list-style-type:none;
}

#fifthrow li, #fifthrow a{
height:212px;
display:block;
}

#bpp025{
background:url('lena.png') -1272px 0;
left:940px;
width:212px;
}

#bpp025 a:hover{
background: url('lena.png') 0  0;
}

1 Ответ

0 голосов
/ 12 марта 2012

Как сказано, ваш html недействителен
Во-вторых, вы используете половину пикселей, они не существуют
вы ставите :hover на a вместо #jpegx
попробуйте это: 

#jpegx {
    background-image:url('http://www.pixeltouch.no/wp-content/uploads/2012/03/lena1.png');
    background-position: -328.8px 0; /*-328.8px is invalid use -328 or -329*/
}
#jpegx:hover {
    background-position: 0  0;
}

не проверено, но оно должно помочь вам на вашем пути.

...