Сумашедшие спрайты

@LilliAnn · Регистрация: 06.10.2014

Студворк — интернет-сервис помощи студентам

Я не нашла ни у кого подобной проблемы, поэтому взываю к вам, друзья! У меня тут есть файл-спрайт с кнопками соц.иконок, есть их координаты на спрайте и т.д. Но! При указании правильных координат (проверено) все время выводится один и тот же кусок спрайта. То есть ссылки на 4 разные соцсети оформлены одной и той же иконкой-иконкой Фейсбука (находится в самом начале спрайта, координаты 0 0

Пожалуйста, помогите!

@Mainstand · 23.01.2015, 15:36

Код ссылок и сам спрайт можете скинуть? У Вас явно какая-то ошибка.

@LilliAnn · 23.01.2015, 15:45 **[ТС]**

Mainstand, да, спасибо что откликнулись! Вот:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 <!DOCTYPE html>
<html>
 
<head>
     
        <meta charset="utf-8">
        
            <title> Интернет-магазин "Нянечка" - детское постельное Qvatro lux и другие товары для малышей. Скоро открытие!</title>
            
        <link rel="stylesheet" type="text/css" href="stylemy.css">
      
     
      
</head>
     
<body style="margin: 0; padding: 0;">
     
         
            
          <div>
                <img id="fon"  src="nanee.jpg" alt="Интернет-магазин Нянечка. Скоро открытие!">
    
          </div>
        
            <div id="social">
                    
                    <a href="https://www.facebook.com/qvatrolux" rel='external nofollow' title="Нянечка на Фейсбуке"> <span class="sprite-fb_soc">&nbsp;</span>&nbsp;</A>
                    
                    <a href="http://www.pinterest.com/nyanechka/coming-soon/" rel='external nofollow' title="Нянечка в Pinterest"> <span class="sprite-pin_soc">&nbsp;</span>&nbsp;</A>
                  
                    <a href="https://twitter.com/nannny4babba" rel='external nofollow' title="Нянечка в Твиттере"> <span class="sprite-tw_soc">&nbsp;</span>&nbsp;</A>
   
                    <a href="http://vk.com/qvatro_lux" rel='external nofollow' title="Нянечка ВКонтакте"> <span class="sprite-vk_soc">&nbsp;</span>&nbsp;</A>
                 
            </div>      
                 <div id="frame">
                <iframe src="https://madmimi.com/signups/131122/iframe" scrolling="no" frameborder="0" height="249" style="max-width: 400px; width: 100%;"></iframe>
          </div>
</body>
 
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@charset "utf-8";
/* CSS Document */
 
#frame {
    border: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    margin-top: -57%;
    margin-left: 6%;
    margin-right: 60%;
    margin-bottom: -51%;
    }
    
#fon {
    border: none;
    width: 100%;
    height: 100%;
    }
 
#social a{
    
    display: inline-block; width: 50px; height: 50px;
   background: url(sprite2.png) no-repeat top left;
 }
    
 
 
    
.sprite-fb_soc{ background-position: 0 0;} 
.sprite-pin_soc{ background-position: -52px 0;} 
.sprite-tw_soc{ background-position: -104px 0;} 
.sprite-vk_soc{ background-position: -156px 0;}

Спрайт:

Название: sprite2.png
Просмотров: 31

Размер: 17.2 Кб

@Mainstand · 23.01.2015, 16:47

Фон указываете ссылке a:

CSS
1
2
3
4
#social a{
   display: inline-block; width: 50px; height: 50px;
   background: url(sprite2.png) no-repeat top left;
 }

А зачем позиционируете его в span?:

CSS
1
2
3
4
5
/* Эти классы принадлежат элементу span, верно? */
.sprite-fb_soc{ background-position: 0 0;} 
.sprite-pin_soc{ background-position: -52px 0;} 
.sprite-tw_soc{ background-position: -104px 0;} 
.sprite-vk_soc{ background-position: -156px 0;}

Добавлено через 27 минут
Собственно, можно сделать при помощи селектора из CSS3 вот так:

CSS
1
2
3
4
#social a:nth-child(1){ background-position: 0 0;} /* Это правило указывать не обязательно, по умолчанию фон встает в левом верхнем углу */
#social a:nth-child(2){ background-position: -52px 0;} 
#social a:nth-child(3){ background-position: -104px 0;} 
#social a:nth-child(4){ background-position: -156px 0;}

Или же присваивайте Ваши классы элементам a, а не span

@LilliAnn · 26.01.2015, 20:00 **[ТС]**

Mainstand, прости что сразу не ответила - оторвали от увлекательного сражения со спрайтами, чтоб их... Попробую твой способ и отпишусь. И спасибо еще раз!

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@LilliAnn 1 / 1 / 0 Регистрация: 06.10.2014 Сообщений: 39

	Сумашедшие спрайты 23.01.2015, 15:12. Показов 1148. Ответов 4 Метки нет (Все метки) Я не нашла ни у кого подобной проблемы, поэтому взываю к вам, друзья! У меня тут есть файл-спрайт с кнопками соц.иконок, есть их координаты на спрайте и т.д. Но! При указании правильных координат (проверено) все время выводится один и тот же кусок спрайта. То есть ссылки на 4 разные соцсети оформлены одной и той же иконкой-иконкой Фейсбука (находится в самом начале спрайта, координаты 0 0 Пожалуйста, помогите! 0

@Mainstand 41 / 41 / 21 Регистрация: 11.01.2015 Сообщений: 143
	23.01.2015, 15:36
	Код ссылок и сам спрайт можете скинуть? У Вас явно какая-то ошибка. 1

@LilliAnn 1 / 1 / 0 Регистрация: 06.10.2014 Сообщений: 39
	26.01.2015, 20:00 [ТС]
	Mainstand, прости что сразу не ответила - оторвали от увлекательного сражения со спрайтами, чтоб их... Попробую твой способ и отпишусь. И спасибо еще раз! 0

Сумашедшие спрайты

Решение