CSS спрайт ролловеры отображаются вертикально вместо горизонтали - PullRequest
Новая
       0

CSS спрайт ролловеры отображаются вертикально вместо горизонтали

1 голос
/ 30 августа 2011

Я пытаюсь сделать простой ролловер для этой страницы - www.radioandweb.com.Код CSS Sprite, который я использовал, работает нормально, пока я не вставлю его в реальную структуру страницы.Затем он меняется от горизонтального к вертикальному.Я предполагаю, что это из-за вмешательства в другие свойства CSS.

Может кто-нибудь предложить простое решение для этого?Изображение в вопросе находится в верхнем правом углу (facebook, twitter, linkedin).Вот код CSS: 

ul#socialnavigation {
    width:109px;
    height:34px;
    margin-left:auto;
    margin-right:auto;
}
ul#socialnavigation li {
    position:relative;
    float:left;
    text-indent:-9999px;    
    list-style-type:none;
}
ul#socialnavigation li a {
    border:0;
    display:block;
    text-decoration:none;
    background:transparent url('http://www.radioandweb.com/wp-content/themes/u-design/styles/style1/images/socialnetworkrollovers.png') no-repeat;
}
li#facebook a {
    width:36px;
    height:34px;
}
li#twitter a {
    width:37px;
    height:34px;
}
li#linkedin a {
    width:36px;
    height:34px;
}    
li#facebook a:hover, li#facebook a:focus {
    background-position:0px -34px;
}
li#twitter a:link, li#twitter a:visited {   
    background-position:-36px 0px;
}
li#twitter a:hover, li#twitter a:focus {    
    background-position:-36px -34px;
}
li#linkedin a:link, li#linkedin a:visited { 
    background-position: -73px 0px;
}
li#linkedin a:hover, li#linkedin a:focus {  
    background-position: -73px -34px;
}

А вот код HTML: 

<ul id="socialnavigation">
   <li id="facebook"><a href="http://www.facebook.com" title="Facebook">Facebook</a></li>
   <li id="twitter"><a href="http://www.twitter.com" title="Twitter">Twitter</a></li>
   <li id="linkedin"><a href="http://www.linkedin.com" title="Linkedin">Linked In</a></li></ul>

Спасибо, любая помощь действительно ценится!

Ответы [ 2 ]

0 голосов
/ 30 августа 2011

В вашем файле text.css 

li {
    margin-left: 30px;
}

, что противоречит вашему спрайту css. Если вы просто обновите свой «ul # socialnavigation li», добавив что-то вроде «margin-left: auto», это должно исправить это.

Да здравствует оканаган! :)

0 голосов
/ 30 августа 2011

Родительский контейнер недостаточно широк, поэтому ваши библиотеки не плавают влево. 

ul#socialnavigation{
    width: 200px;
}
...