Varias imágenes en CSS

raptor96 · #1 (**permalink**) 12/07/2013, 02:54

Buenas, he estado haciendo una caratula para mis temas que tenga botones en el margen de "Descargar" y "Verlo en YouTube". Se me ocurrió hacerlos como botones que se encendieran al pasar el cursor y que se oprimieran al hacerles click.

Me recomendaron hacerlo con CSS y con la ayuda de los usuarios de este foro lo he conseguido. Ahora se me presenta otro problema, les explico:

Al ser 3 botones que se encienden y oprimen, solo me sale el ultimo citado en el CSS.

Sospecho que sera por el código que tengo en el CSS de modo que se lo cito:

Cita:

Un saludo.

pzin · #2 (**permalink**) 12/07/2013, 09:29

Tendrás que aplicarle alguna clase a los enlaces, porque en tu CSS estás sobreescribiendo las reglas.

Por ejemplo, en tu HTML:

Código CSS:

Ver original<a class="boton2">

Y el CSS:

Código CSS:

Ver originala.boton2 {
  background-image: url(Boton2.png);
}

Y lo mismo para los demás. No hace falta que repitas todas las reglas para cada clase, sólo aquellas que vayan a cambiar.

raptor96 · #3 (**permalink**) 12/07/2013, 11:49

Es que no lo entiendo, si quiero poner varias que cambien como seria?

Es que la a, se puede sustituir por alguna otra cosa?

pzin · #4 (**permalink**) 12/07/2013, 11:58

Cita:

Iniciado por raptor96

Es que no lo entiendo

Realmente es una duda demasiado básica para resolverla en un foro, porque es muy elemental.

Te recomendaría que le echaras un vistazo a este capítulo de librosweb.es.

raptor96 · #5 (**permalink**) 13/07/2013, 06:19

Cita:

Iniciado por pzin

Realmente es una duda demasiado básica para resolverla en un foro, porque es muy elemental.

Te recomendaría que le echaras un vistazo a este capítulo de librosweb.es.

Sera demasiado fácil para ti que lo entiendes bien, yo es la primera vez que uso CSS, de todas formas es de muchísima ayuda que no me digas nada y me mandes a leer cosas que ya me he leído...

pzin · #6 (**permalink**) 13/07/2013, 08:25

No he dicho que sea fácil, sino básico. Si lees esta parte en concreto deberías de poder salir de dudas sobre cómo aplicar diferentes estilos a diferentes elementos.

raptor96 · #7 (**permalink**) 13/07/2013, 15:47

Vale concretamente ahí si me he enterado, pero por alguna cosa sigue pasando lo mismo, solo carga la primera imagen citada en CSS.

¿No será por el atributo Background?

PD: De todas formas he hecho a ver si en vez de así podría hacerlo con CSS pero en diferentes archivos html y con iframes en el html principal.

De modo que queda igual, son actives y hovers pero por separado y luego mostrados en la principal a través del iframe.

¿Está bien la idea o como lo ven?

pzin · #8 (**permalink**) 13/07/2013, 15:54

No te entendí muy bien.

Volviendo al problema inicial, si haces esto:

Código CSS:

Ver originala {
  color: red;
}
 
a {
  color: green;
}
 
a {
  color: blue;
}

Todos los enlaces (etiqueta <a>) tendrán un color azul, porque estás repitiendo el mismo selector y en CSS la última regla es la que se aplica.

Entonces, para tener tres enlaces con diferentes colores, como menciona el artículo que te comenté, tendrás que añadir alguna clase para diferenciar esos enlaces.

Código CSS:

Ver original<a class="importante">Uno</a>
<a class="eco">Dos</a>
<a class="pitufo">Tres</a>

Y en tu CSS, aplicas esa clase:

Código CSS:

Ver originala.importante {
  color: red;
}
 
a.eco {
  color: green;
}
 
a.pitufo {
  color: blue;
}

raptor96 · #9 (**permalink**) 14/07/2013, 03:36

Pues nada, ahora me sale la primera y el hover lo hace donde quiere, he probado con colores a ver si funcionaba y si, con lo cual definitivamente el problema esta en algun sitio del codigo que tengo o que para las imagenes que tienen hover y active hay que hacer otra cosa.

Te dejo el codigo a ver si lo ves tu, por que a mi me parece que esta bien...

Cita:

<html>
<head>
<title>Probando...</title>

<style type="text/css">
.Descargar {
width: 45px;
height: 45px;
}
a.Descargar {display: block;
height: 100%;
width: 100%;
background: url(Boton1.png) no-repeat;
}
a.Descargar:hover {background: url(Boton1ON.png) no-repeat;
}
a.Descargar:active {background: url(Boton1OFF.png) no-repeat;
}

.YouTube {
width: 45px;
height: 45px;
}
a.YouTube {display: block;
height: 100%;
width: 100%;
background: url(Boton2.png) no-repeat;
}
a.YouTube:hover {background: url(Boton2ON.png) no-repeat;
}
a.YouTube:active {background: url(Boton2OFF.png) no-repeat;
}

.Logo {
width: 45px;
height: 41px;
}
a.Logo {display: block;
height: 100%;
width: 100%;
background: url(Boton3.png) no-repeat;
}
a.Logo:hover {background: url(Boton3ON.png) no-repeat;
}
a.Logo:active {background: url(Boton3OFF.png) no-repeat;
}
</style>

</head>
<body>

<center>
<a class="Descargar" href="Http://www.google.es/" target="_Blank"></a><br>
<br>
<br>
<a class="YouTube" href="Http://www.YouTube.com/DJRaptorOficial" target="_Blank"></a><br>
<br>
<br>
<a class="Logo" href="Http://DJRaptor.do.am/" target="_Blank"></a><br>
</center>

</body>
</html>

Rafael · #10 (**permalink**) 14/07/2013, 17:37

Básicamente te recomiendo: Escribe el código por partes, como que estás copiando y pegando sin nada de órden.

raptor96 · #11 (**permalink**) 15/07/2013, 07:17

Lo tengo por partes, no estoy copiando así sin sentido lo que me van diciendo, te has llevado una impresión equivocada colega.

Pero en vez de criticar y decir cosas que no ayudan alguien tiene idea?

pzin · #12 (**permalink**) 15/07/2013, 07:42

Es que el código es un cacao. Aparte de usar cosas que ya no existen como <center>, luego estás repitiendo código y declarando código que luego sobreescribes.

¿Qué medida quieres que tengan los enlaces? Porque el problema lo tienes ahí.

Rafael · #13 (**permalink**) 15/07/2013, 07:47

A ver, si no sabes que es una crítica allá tú, y si no te sirve cuanto lo siento, pero leyendo esto que estás haciendo es simplemente desorden.

Código HTML:

Ver original.Logo {
width: 45px;
height: 41px;
}
a.Logo {display: block;
height: 100%;
width: 100%;
background: url(Boton3.png) no-repeat;
}

Independientemente que ya arreglaste un poco tu código inicial, en tu último código tienes un class genérico que luego encimas por un 100% que no tiene sentido ya que no tienes un contenedor.

Mete las cosas en un solo estilo.

Código CSS:

Ver originala.Logo {
display: block
width: 45px;
height: 41px;
background: url(Boton3.png) no-repeat;}
 
a.Logo:hover {
background: url(Boton3ON.png);}
 
a.Logo:active {
background: url(Boton3OFF.png);}

Rafael · #14 (**permalink**) 15/07/2013, 07:52

P.D. Si esto es además una sección de botones específicos puedes ordenarlos en un div específico también.

Código HTML:

Ver original<div class="BotonesExternos">
<a class="Logo...>
<a class="Video...>
 
</div>

Código CSS:

Ver original.BotonesExternos a {
display: inline-block;
width: 45px;
height: 45px;}
 
a.Logo {background: url...}
a.Video {background...}

Ya solamente pones los fondos en cada a.Logo, a.Video.

raptor96 · #15 (**permalink**) 15/07/2013, 10:49

Vale, ahora si me ayudaron bastante, solo me queda saber como llamarlos al HTML desde le CSS, les explico que sucede:

Cuando llamo por ejemplo al .Logo (<a class="Logo"></a>) no me sale nada, si pongo por ejemplo; (<a class="Logo">Hola</a>) sale Hola con el fondo el boton funcionando.

Lo que quiero es que solo salga el boton sin texto y sin nada, como he de llamarlo?

pzin · #16 (**permalink**) 15/07/2013, 10:52

Pues como te puso Rafael, y en realidad como más o menos tenías, el enlace debe de ser un elemento de bloque, o inline-block, y tener unas medidas. Y estas dos cosas ya las tenías.

raptor96 · #17 (**permalink**) 15/07/2013, 11:18

Me refiero a llamarlo en el HTML, con div, a o con que por que no me sale a no ser que escriba, lo puse como me dijo Rafael.

pzin · #18 (**permalink**) 15/07/2013, 11:50

Si lo tienes puesto como dijo Rafael, te tiene que funcionar con un enlace sin poner texto alguno.

http://jsfiddle.net/xyPGB

raptor96 · #19 (**permalink**) 15/07/2013, 12:17

Ah vale ya localice el error, ¡conseguido!

Muchas gracias a todos por la ayuda, y sobre todo por la paciencia ;)