Error en entrega CU01037D curso CSS Sprite CSS: concepto. ¿Qué es, cómo crearlo?

[Jonathan Ramos]

Leyendo el curso y realizando el ejercicio final de la entrega No.37 del curso CSS "Uso de sprites", al visualizar en el navegador el codigo propuesto en dicha entrega, se explica lo que va a realizar el codigo y se pone una imagen de ejemplo; pero en la visualizacion en el navegador y en la imagen final de ejemplo del ejercicio, el orden de los iconos no son los correctos con lo que se buscaba y explico con la primera imagen. Para que el ejercicio se aprecie como la imagen y por lo que se busca el codigo debe ser este:

Código: [Seleccionar]

*{font-family: arial; }
#barra {height: 40px; background-image: url("barra.png"); margin-bottom:30px;}
li {list-style-type: none;}
#itemsMenu li {height: 45px; line-height:2em; margin-top: 5px; }
#itemsMenu li div { height: 40px; width:40px;
margin-right:15px; background-image: url(cuatroiconos.png); float:left;}
#itemsMenu li:nth-child(1) div {background-position: 0px;}
#itemsMenu li:nth-child(2) div {background-position: -40px;}
#itemsMenu li:nth-child(3) div {background-position: -80px;}
#itemsMenu li:nth-child(4) div {background-position: -120px;}
De esta manera se obtiene el orden de los iconos como se requerian y como eran explicados y no inversos. O bien pueden dejarse los valores positivos, pero tendrian que cambiar la imagen en donde se explica como se va a mover la imagen del background.

[Alex Rodríguez]

Hola Jonathan, gracias por informar, efectivamente el orden en que se muestran los iconos no es el que se muestra en la imagen explicativa del curso

Saludos