Спрайт не работает

@a.psycho · Регистрация: 11.03.2011

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

Доброго времени суток.
Столкнулся вот с такой проблемой:

Изначально сделал спрайт на 4 кнопки и 3 состояния у каждой. Потом решил добавить еще один спрайт на сайт, скопировал код в ХТМЛ и ц ЦСС, отредактировал, чтобы он встал на свое место, но видна только первая кнопка, хотя остальные есть, но их не видно. Отличие второго спрайта в том, что там у каждой кнопки по 4 состояния, а не 3, как в первом. Незнаю, может что упустил, прошу вашей помощи.

Вот код первого, рабочего спрайта

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
ul#tabs {
margin-top: 30px;
position: absolute;
right: 0px;
top: -65px;
}
 
ul#tabs li {
background: url('../img/tabs-sprite.png') no-repeat;
float: left;
height: 35px;
margin-right: 1px;
width: 70px;
}
 
ul#tabs li a {
display: block;
height: 100%;
text-indent: -9000px;
width: 100%;
}
 
ul#tabs li#photos {
background-position: 0px 0px;
width:80px;
}
 
ul#tabs li#photos:hover {
background-position: 0px -40px;
}
 
ul#tabs li#photos.current, ul#tabs li#photos:active {
background-position: 0px -80px;
}
 
ul#tabs li#videos {
background-position: -70px 0px;
}
 
ul#tabs li#videos:hover {
background-position: -70px -40px;
}
 
ul#tabs li#videos.current, ul#tabs li#videos:active {
background-position: -70px -80px;
}
 
ul#tabs li#infomain {
background-position: -140px 0px;
}
 
ul#tabs li#infomain:hover {
background-position: -140px -40px;
}
 
ul#tabs li#infomain.current, ul#tabs li#infomain:active {
background-position: -140px -80px;
}
 
ul#tabs li#creators {
background-position: -210px 0px;
}
 
ul#tabs li#creators:hover {
background-position: -210px -40px;
}
 
ul#tabs li#creators.current, ul#tabs li#creators:active {
background-position: -210px -80px;
}

Вот второй, не рабочий

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
ul#tabs2 {
    margin-top: 30px;
    position: absolute;
    right: 520px;
    top: -65px;
}
 
ul#tabs2 li {
background: url('../img/tabs2-sprite.png') no-repeat;
float: left;
height: 35px;
margin-right: 1px;
width: 70px;
}
 
ul#tabs2 li a {
display: block;
height: 100%;
text-indent: -9000px;
width: 100%;
}
 
 
 
ul#tabs2 li#previous {
background-position: 0px 0px;
}
 
ul#tabs2 li#previous:hover {
background-position: 0px -40px;
}
 
ul#tabs2 li#previous.current, ul#tabs2 {
background-position: 0px -80px;
}
 
ul#tabs2 li#previous-na {
background-position: 0px -120px;
}
 
 
ul#tabs2 li#main {
background-position: 70px 0px;
}
 
ul#tabs2 li#main:hover {
background-position: 70px -40px;
}
 
ul#tabs2 li#main.current, ul#tabs2 {
background-position: 70px -80px;
}
 
ul#tabs2 li#main-na {
background-position: 70px -120px;
}
 
 
ul#tabs2 li#back {
background-position: 140px 0px;
}
 
ul#tabs2 li#back:hover {
background-position: 140px -40px;
}
 
ul#tabs2 li#back.current, ul#tabs2 {
background-position: 140px -80px;
}
 
ul#tabs2 li#back-na {
background-position: 140px -120px;
}
 
 
ul#tabs2 li#following {
background-position: 210px 0px;
}
 
ul#tabs2 li#following:hover {
background-position: 210px -40px;
}
 
ul#tabs2 li#following.current, ul#tabs2 {
    background-position: 210px -80px;
}
 
ul#tabs2 li#following-na {
background-position: 210px -120px;
}

на первом скриншоте вид из браузера, на втором из дримвивера. справа старые спрайты, слева новые. Еще не понимаю, почему в новых 2 строки, делал по одному шаблону, в длину они идентичны.

@Talik · 11.03.2011, 14:37

А координаты какие, может они, есть но с низу одна под другой.

@a.psycho · 11.03.2011, 14:45 **[ТС]**

Не думаю, что я что-то напутал с координатами, просто скопировал код с 1го спрайта, поменял ul на второй и изменил правило

CSS
1
2
3
4
5
6
ul#tabs {
margin-top: 30px;
position: absolute;
right: 0px;
top: -65px;
}

на

CSS
1
2
3
4
5
6
ul#tabs {
margin-top: 30px;
position: absolute;
right: 520px;
top: -65px;
}

Как я думал, все должно было просто сдвинуться, а он "сложился" в 2 этажа и не показывает 2-4ые кнопки, но первая нормально работает.

@Talik · 11.03.2011, 14:59

CSS
1
2
3
4
5
6
7
8
9
10
11
ul#tabs2 li#previous {
background-position: 0px 0px;
}
 
ul#tabs2 li#previous:hover {
background-position: 0px -40px;
}
 
ul#tabs2 li#previous.current, ul#tabs2  ?????? {
background-position: 0px -80px;
}

А тут.

@a.psycho · 11.03.2011, 15:15 **[ТС]**

Нет-нет, я проверял это.

Я думаю проблема может тут? Все таки он отвечает за выстраивание в ряд.

CSS
1
float: left;

@Talik · 11.03.2011, 15:48

Скопировав, вы создали два спика, которые имеют не только одинаковие настройки стиля, но позиционирование. Перепишите шапку. Для начала постройте список без параметров, как должно бить, можно просто HTML для проверки, потом замените в том же пордяке уже в коде CSS.
Когда я програмировал, писал все в ручную, потому как разбирать скопированый код, теряешь больше времени и сил.

CSS
1
margin-top: 30px;

Отмените, во втором, если оно в одном списке.

@a.psycho · 11.03.2011, 16:02 **[ТС]**

Без мэрджин-топа кнопки вверх уезжают, что те, что те.

Начал переписывать все, и заметил, что с первой кнопкой все в порядке, а вот с остальными уже нет.

Собственно, прописаны координаты только первых двух кнопок, первая работает, вторая пропала.

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
ul#tabs2 li#previous {
background-position: 0px 0px;
}
 
ul#tabs2 li#previous:hover {
background-position: 0px -40px;
}
 
ul#tabs2 li#previous.current, ul#tabs2 li#previous:active {
background-position: 0px -80px;
}
 
ul#tabs2 li#previous-na {
background-position: 0px -120px;
}
 
 
 
ul#tabs2 li#main {
background-position: 70px 0px;
}
 
ul#tabs2 li#main:hover {
background-position: 70px -40px;
}
 
ul#tabs2 li#main.current, ul#tabs2 li#main:active {
background-position: 70px -80px;
}
 
ul#tabs2 li#main-na {
background-position: 70px -120px;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="tabs2">
<li id="previous">
<a href="pages/photos.html" title="photos.html">наз</a>
</li>
<li id="main">
<a href="pages/videos.html" title="videos.html">На главную</a>
</li>
<li id="back">
<a href="pages/infomain.html" title="infomain.html">Назад</a>
</li>
<li id="following">
<a href="pages/creators.html" title="creators.html">впер</a>
</li>
</ul>

И кстати, теперь они в один ряд выстроились, спасибо за совет переписать все.

@Talik · 11.03.2011, 16:33

a.psycho,

@a.psycho · 11.03.2011, 16:59 **[ТС]**

А как вернуть кнопку, ты мне не скажешь?

@Talik · 11.03.2011, 17:13

CSS
1
2
3
ul#tabs li#photos {
background-position: 0px 0px;
width:80px;

Может это, в рабочем варианте это есть.

@a.psycho · 11.03.2011, 17:19 **[ТС]**

3ий параметр уже ненужен, я убрал его, сделал все одинаковыми.
А вообще уже незнаю что и думать, пропробую новые блоки создать.

@Talik · 11.03.2011, 17:47

Я так понял , должно бить 4-ри закладки, у вас все есть и рабочие кроме второй?

Добавлено через 10 минут
А зачем вы создавали другой файл CSS, добавте этот спрайт в HTML коде и примените к нему, тот же CSS и не надо его пороть по швам.

@a.psycho · 11.03.2011, 18:00 **[ТС]**

Нет-нет, 4 копки - 4 положения (спокойствие, неведено, выбрано, неактивно). У первой кнопки все положения работают, а остальные просто исчезают.

Так я все в одном CSS и делаю, резервную копию сохранил и эксперементирую. Если до завтра не разберусь, отброшу эту идею с неактивным состоянием кнопок.

@Talik · 11.03.2011, 18:03

а остальные просто исчезают.

При каком событи, или их просто нет при обновлении.

@a.psycho · 11.03.2011, 19:32 **[ТС]**

Их изначально просто нету. Ни в каком состоянии, кнопка есть, картинки нету.

@Talik · 11.03.2011, 19:37

CSS
1
background: url('../img/tabs2-sprite.png') no-repeat;

По такому адресу вы и картинку переименовали.

Добавлено через 1 минуту
И втой ли директории все делаете (в одной папке)?

@a.psycho · 11.03.2011, 22:49 **[ТС]**

Да, конечно. Все 4 кнопки и 4 положения, т.е. 16 уникальных кнопок в одной картинке tabs2-sprite, соответственно, если первая кнопка отображается корректно, то и все остальные тоже должны. Выше в отрывке кода перемещение картинки, ну т.е. полная теория спрайтов. Если бред, извините, я немного подшафэ.

Новые блоги и статьи Все статьи Все блоги /
Вывод текста со шрифтом 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 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .

@Talik 12 / 12 / 1 Регистрация: 07.02.2009 Сообщений: 269
	11.03.2011, 14:37
	А координаты какие, может они, есть но с низу одна под другой. 0

@Talik 12 / 12 / 1 Регистрация: 07.02.2009 Сообщений: 269
	11.03.2011, 16:33
	a.psycho, 0

@a.psycho 1 / 2 / 0 Регистрация: 11.03.2011 Сообщений: 57
	11.03.2011, 16:59 [ТС]
	А как вернуть кнопку, ты мне не скажешь? 0

@a.psycho 1 / 2 / 0 Регистрация: 11.03.2011 Сообщений: 57
	11.03.2011, 17:19 [ТС]
	3ий параметр уже ненужен, я убрал его, сделал все одинаковыми. А вообще уже незнаю что и думать, пропробую новые блоки создать. 0

@Talik 12 / 12 / 1 Регистрация: 07.02.2009 Сообщений: 269
	11.03.2011, 17:47
	Я так понял , должно бить 4-ри закладки, у вас все есть и рабочие кроме второй? Добавлено через 10 минут А зачем вы создавали другой файл CSS, добавте этот спрайт в HTML коде и примените к нему, тот же CSS и не надо его пороть по швам. 0

@a.psycho 1 / 2 / 0 Регистрация: 11.03.2011 Сообщений: 57
	11.03.2011, 18:00 [ТС]
	Нет-нет, 4 копки - 4 положения (спокойствие, неведено, выбрано, неактивно). У первой кнопки все положения работают, а остальные просто исчезают. Так я все в одном CSS и делаю, резервную копию сохранил и эксперементирую. Если до завтра не разберусь, отброшу эту идею с неактивным состоянием кнопок. 0

@a.psycho 1 / 2 / 0 Регистрация: 11.03.2011 Сообщений: 57
	11.03.2011, 19:32 [ТС]
	Их изначально просто нету. Ни в каком состоянии, кнопка есть, картинки нету. 0

@a.psycho 1 / 2 / 0 Регистрация: 11.03.2011 Сообщений: 57
	11.03.2011, 22:49 [ТС]
	Да, конечно. Все 4 кнопки и 4 положения, т.е. 16 уникальных кнопок в одной картинке tabs2-sprite, соответственно, если первая кнопка отображается корректно, то и все остальные тоже должны. Выше в отрывке кода перемещение картинки, ну т.е. полная теория спрайтов. Если бред, извините, я немного подшафэ. 0