Encuesta

¿Cómo hacer que el CSS funcione?

No se
1 (100%)
Ni idea
0 (0%)

Total de votos: 1

Autor Tema: Imágenes con CSS que no funcionan como deben  (Leído 1127 veces)

Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Imágenes con CSS que no funcionan como deben
« en: 15 de Julio de 2011, 18:16:25 pm »
Hola!

Este es mi primer tema en phperos :B

Bueno, tengo una imágen (link: http://i.imgur.com/W5G8U.png). Lo que intento es usar la X pero no hay manera, siempre sale el Tick???

Probé esto:

CSS:
Código: [Seleccionar]
#icon{
background:
url(icons.png)
no-repeat;
width: 300px;
height: 300px;
}
#icon .tick{
background-position: 0 0;
}
#icon .cross{
background-position: 0 -310px;
}

HTML:
Código: [Seleccionar]
<div id="icon"><div class="cross"></div></div>


También probé esto (según la explicación de westwest) :
CSS
Código: [Seleccionar]
span.icon{
background:
url(icons.png)
no-repeat;
width: 300px;
height: 300px;
}
.icon tick{
background-position: 0 0;
}
.icon cross{
background-position: 0 -310px;
}

HTML:
Código: [Seleccionar]
<span class="icon cross"></span>

Y no hay manera :/
Siempre sale el tick y no el cross ._.

Lo he probado en localhost (con XAMPP), lo he probado en un host gratuito (byet), y no hay manera de hacer que salga el cross en vez del tick.
¿Alguna sugerencia?

PD: Uso Firefox 5 para ver la página; pongo el estilo (<style type="text/css"></style>) en <head> y el HTML (<div></div>) en <body>.
PD2: No se cómo quitar la encuesta :/

Comunidad PHPeros

Imágenes con CSS que no funcionan como deben
« en: 15 de Julio de 2011, 18:16:25 pm »

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #1 en: 15 de Julio de 2011, 18:21:43 pm »
El fallo es que usas ".icon tick", que vendría a seleccionar los elementos tick (o sea, un elemento <tick> que no existe) dentro de los elementos con clase icon.
Debe ser ".icon.tick" y ".icon.cross"

Tambien te recomendaría añadirle a span.icon un display: inline-block; (o display: block; si puede ir en una sola linea).

Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #2 en: 15 de Julio de 2011, 19:28:55 pm »
El fallo es que usas ".icon tick", que vendría a seleccionar los elementos tick (o sea, un elemento <tick> que no existe) dentro de los elementos con clase icon.
Debe ser ".icon.tick" y ".icon.cross"

Tambien te recomendaría añadirle a span.icon un display: inline-block; (o display: block; si puede ir en una sola linea).

No sé por qué, pero no, no funciona. He probado desde lo que decía en tu tutorial hasta cualquier bobada con tal de que salga, y no hay manera (siempre sale el tick).

¿Qué hice?
Poner el punto al tick y al cross, como tú dijiste, pero sigue saliendo el tick.  >:(
Al CSS le puse inline-block; le puse block; se lo quité; ¡y no va!  :mad:
PD: dejo el HTML que uso, a ver si no me equivoco ahí ._.
Código: [Seleccionar]
<span class="icon"><span class="cross"></span></span>también probé con esto pero tampoco ._. :
Código: [Seleccionar]
<span class="icon cross"></span>

Desconectado YaGo

  • PHPerit@
  • *
  • Mensajes: 13
  • Karma: 0
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #3 en: 16 de Julio de 2011, 00:14:27 am »
Prueba con esto:

span.icon{
   background: url(icons.png) no-repeat;
   width: 300px;
   height: 300px;
}
span.cross{
   background-position: 0 -50%;
}

Le quite el .tick por que te sobra, por defecto el span mostrara la bola verde y si le poner cross a class te saldrá la roja (class="icon cross").

Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #4 en: 16 de Julio de 2011, 00:46:50 am »
Prueba con esto:

span.icon{
   background: url(icons.png) no-repeat;
   width: 300px;
   height: 300px;
}
span.cross{
   background-position: 0 -50%;
}

Le quite el .tick por que te sobra, por defecto el span mostrara la bola verde y si le poner cross a class te saldrá la roja (class="icon cross").

Tampoco :/ (no aparece nada)

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #5 en: 16 de Julio de 2011, 11:19:19 am »
El problema es que usas un span, y dentro otro. Lo que debes hacer es poner <span class="icon cross">

Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #6 en: 16 de Julio de 2011, 17:50:28 pm »
El problema es que usas un span, y dentro otro. Lo que debes hacer es poner <span class="icon cross">
No :/, ni con span class=icon cross :/
PD: estoy usando el HTML en un archivo con extensión PHP (porque tambien incluyo PHP, naturalmente)

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #7 en: 16 de Julio de 2011, 18:01:11 pm »
He logrado resolver el problema con este codigo:
CSS:
Código: [Seleccionar]
span.icon{
background-image: url(icons.png);
width: 300px;
height: 300px;
display: block;
}

.icon.tick{
background-position: 0 0;
}
.icon.cross{
background-position: 0 -310px;
}
HTML:
Código: [Seleccionar]
<span class="icon cross"></span>

Se ve que al usar tal como usabas el "background" se ponía automaticamente un background-position que hacía que se viera el verde. Al usar background-image no ocurre esto.

Otra solución hubiera sido añadir !important a cada background-position, por ejemplo...

Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #8 en: 16 de Julio de 2011, 18:07:47 pm »
He logrado resolver el problema con este codigo:
CSS:
Código: [Seleccionar]
span.icon{
background-image: url(icons.png);
width: 300px;
height: 300px;
display: block;
}

.icon.tick{
background-position: 0 0;
}
.icon.cross{
background-position: 0 -310px;
}
HTML:
Código: [Seleccionar]
<span class="icon cross"></span>

Se ve que al usar tal como usabas el "background" se ponía automaticamente un background-position que hacía que se viera el verde. Al usar background-image no ocurre esto.

Otra solución hubiera sido añadir !important a cada background-position, por ejemplo...

Por fin, funcionó. Muchas gracias.
PD: ¿Cómo se da "karma +"? Acabo de llegar y nunca he usado foros SMF, y por eso, no se como :P

Desconectado -Pituko-

  • PHPero Experto
  • *****
  • Mensajes: 954
  • Karma: 20
  • Sexo: Masculino
  • ¡Hala Madrid!
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #9 en: 16 de Julio de 2011, 19:02:41 pm »
Por fin, funcionó. Muchas gracias.
PD: ¿Cómo se da "karma +"? Acabo de llegar y nunca he usado foros SMF, y por eso, no se como :P
Necesitas 25 mensajes, no te preocupes, yo se lo doy por ti.

Desconectado nmartin021

  • PHPero Avanzado
  • ****
  • Mensajes: 250
  • Karma: 9
    • Ver Perfil
Re:Imágenes con CSS que no funcionan como deben
« Respuesta #10 en: 16 de Julio de 2011, 19:04:17 pm »
Necesitas 25 mensajes, no te preocupes, yo se lo doy por ti.
Gracias  :D
PD: Pronto podré dar karma, estoy segurísimo  8)