CSS спрайт для чайника или попытка заспрайтить все картинки

[volosok]

Всем привет!

Пытаюсь объединить все картинки в спрайты, поскольку есть страницы, на которых приходится грузить до 40 изображений галереи.

Прикручена carouFredSel-6.0.4

она гоняет по кругу все <div> из дивки <div id="carousel">

по задумке, в css-спрайт объединены изображения 75Х100. В таблице стилей добавлены дивки с фоновыми изображениями из спрайта и нужными смещениями.

Что сделано:

в css добавлен классы

#carousel div span .1{position:absolute;top:0;left:0;background-position:0px 0px;width:75px;height:100px;background-image:url(head.jpg)}

#carousel div span .2{position:absolute;top:-75px;left:0;background-position:0px 0px;width:75px;height:100px;background-image:url(head.jpg)}

и т.д.

в html в <div id="carousel"> вставляются <div><span><div class="1"></div></span></div> и остальные.

<span> еще используется для эффектов при наведении курсора.

Ни в одном браузере не отображается. Более того, картинка head.jpg даже не запрашивается с сервера (ни с полным, ни с коротким адресом в коде).

Но, ЧСХ, в дримвивере все выглядит как надо.

Прошу помочь доделать этот вариант применения css-спрайтов или предложить другой рабочий.

Спасибо!

[UnitZ]

#carousel div span .1{position:absolute;top:0;left:0;background-position:0px 0px;width:75px;height:100px;background-image:url(head.jpg)}
#carousel div span .2{position:absolute;top:-75px;left:0;background-position:0px 0px;width:75px;height:100px;background-image:url(head.jpg)}

Незнаю, может ли из-за этого не запрашиваться head.jpg, но смещение нужно задавать в background-position а не через, "position:absolute;top:-75px;left:0".  Я сам делал спрайты один раз, и мне в этом помог букмарклет с сайта spriteme.org, думаю он и в вашем случае подойдет.

[volosok]

Спасибо за внимательность это опечатка.

в таблице стилей смещение задаю через background-position:-300px 0px;

[Clever]

#carousel div span .1{position:absolute;top:0;left:0;background-position:0px 0px;width:75px;height:100px;background-image:url(head.jpg)}
#carousel div span .2{position:absolute;top:-75px;left:0;background-position:0px 0px;width:75px;height:100px;background-image:url(head.jpg)}

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

#carousel div span .1 , #carousel div span .2{position:absolute;top:0;left:0;width:75px;height:100px;}
#carousel div span .1{background:url(head.jpg) 0 0 no-repeat;}
#carousel div span .2{background:url(head.jpg) 0 -75px no-repeat;}

Если изображение находится не в одной папке с файлом стилей , то нужен правильный путь. Отсчет идет от главного файла . Допустим если index.php или index.html главный файл , и там где он лежит есть папка images допустим , то в таком случае путь будет :   background:url("../images/head.jpg") 0 -75px no-repeat;

[volosok]

всем спасибо!

Проблема была в имени класса! ИМЯ не должно начинаться с цифры (ну, так вапщет и принято везде   ) добавлением бокувки в имя класса все решилось.

теперь #carousel div span .d2 работает на УРА!

Для этого, правда, пришлось все перебрать по дивочке, по спаночке, вынести все отдельно, а потом собрать и сократить...

Даже не знаю, за такой фэйл, наверно, и карму обратно заберут?!   

[Erutan]

CSS спрайты — это класс!