Foros del Web » Creando para Internet » CSS »

<a> con dos div

Estas en el tema de <a> con dos div en el foro de CSS en Foros del Web. Hola, foreros: Tengo un link, <a>, que tiene dentro dos divs. Este <a> esta dentro de un li, el cual pertenece a una lista con ...
  #1 (permalink)  
Antiguo 10/06/2008, 09:34
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
<a> con dos div

Hola, foreros:

Tengo un link, <a>, que tiene dentro dos divs. Este <a> esta dentro de un li, el cual pertenece a una lista con varios mas li.

Es decir:

Código HTML:
<li><a class="link"><div class="01">Titulo</div><div class="02">Texto</div></a></li> 
Mi problema es que no consigo que al situar el raton encima de cualquiera de los divs que hay dentro de <a> estos cambien de color. He conseguido que al situarte encima del div 01 este cambie de color, pero no que si te situas en 01 cambien de color 01 y 02, lo que he hecho es:

Código HTML:
.link :hover{ background:#FF66CC}
¿Como debo hacer para que si se situa el raton dentro de <a>, ya sea en el div 01 o en el 02, los dos div cambien de fondo a la vez?
  #2 (permalink)  
Antiguo 10/06/2008, 09:50
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: <a> con dos div

Hola

Sintácticamente tienes un serio error y es incluir elementos de bloque dentro de un inline. Esto, entre otras cosas, genera comportamientos que no solo no son lo que deseas, si no que pueden variar de navegador a navegador.

Sin embargo, si cambias los div's por spans, tendrías un código correcto y siguiendo el ejemplo que te dejo, te funcionará bien, al menos en firefox, opera, konqueror y safari.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css">
		* {background-color: #000; color: #fff;}
		html {background-color: #cf112e;}
		body {background-color: #c1f12e;}
		.link:hover span{ background:#FF66CC; }
		span {display:block;}
	</style>
	<script type="text/javascript">
	</script>
	<title>Pruebilla</title>
</head>
<body>
<ul>
	<li><a class="link"><span class="01">Titulo</span><span class="02">Texto</span></a></li>
</ul>
</body>
</html> 
Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 10/06/2008, 09:53
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Respuesta: <a> con dos div

Hola de nuevo...

Ahora mismo lo pruebo...

Última edición por salbatore; 10/06/2008 a las 10:19
  #4 (permalink)  
Antiguo 10/06/2008, 10:27
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Respuesta: <a> con dos div

Hola de nuevo...

Funciona fantasticamente... muchas gracias...

Tambien por aclarame los demas conceptos...
  #5 (permalink)  
Antiguo 10/06/2008, 10:51
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Respuesta: <a> con dos div

Hola de nuevo... jeje...

En el mismo ejemplo... como puedo hacer para que dentro del <a> tenga otros <a>. Es decir, el <a> me dirige a www.micasa.com y el <a> que esta dentro de <a> me dirige a www.youtube.com .

Es que lo he probado y me sale mal... fuera del estilo...

¿Como lo hago?
  #6 (permalink)  
Antiguo 10/06/2008, 21:08
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: <a> con dos div

Hola

No es posible.

Felicidad
__________________
¡ hey, hou, hou, hey !
  #7 (permalink)  
Antiguo 11/06/2008, 02:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: <a> con dos div

Bueno, en realidad sí es posible, pero no es válido, es decir:

<a href="http://www.google.es">ggg<table><tr><td><a href="http://www.forosdelweb.com">fff</a></td></tr></table></a>

Funcionar funciona, pero no valida porque el elemento a no puede contener un elemento como table. Tú eliges si quieres la funcionalidad y no te impora que no valide.

Mikel.
  #8 (permalink)  
Antiguo 11/06/2008, 15:11
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Respuesta: <a> con dos div

Hola,

Muchas gracias... pero es una pena...

Hasta la siguiente...
  #9 (permalink)  
Antiguo 11/06/2008, 20:56
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Respuesta: <a> con dos div

Hola

Bueno, siendo picajosos, eso no es un vínculo dentro de otro, es un vínculo dentro de una tabla dentro de un vínculo.

;)

Si buscamos formas rebuscadas, es mucho más fácil incluir el vínculo interno en tiempo de ejecución mediante javascript, por ejemplo al pasar el ratón sobre la frase.

En cualquier caso. Carece de sentido práctico, no es semántico, no es usable y definitivamente no está permitido por las recomendaciones.

Aparte de que algunos navegadores no lo entienden, pero aun así es interesante de analizar, veamos:
Código HTML:
<a href="1.htm">primero <a href="2.htm">vínculo interior</a> segunda</a> 
Es interpretado de la siguiente forma:
primera: --> 1.htm
vínculo interior --> 2.htm
segunda --> no hay vínculo

Al ejemplo de Mikmoro le faltaría vínculo a la derecha de la tabla, por ejemplo así:
Código HTML:
<a href="http://www.google.es">ggg<table><tr><td><a href="http://www.forosdelweb.com">fff</a></td></tr></table>kkk</a> 
En este caso, las tres partes son interpretadas, los exteriores de una forma y el interio de otra, con lo que se lograría mejor efecto desde el punto de vista de los vínculos.

De hecho, si sustituimos las tablas por div, span, p y otras tantas combinaciones, no funciona, hasta donde probé antes de aburrirme, solo las tablas tienen el efecto de generar 3 vínculos en el ejemplo puesto.

:)

Felicidad
__________________
¡ hey, hou, hou, hey !
  #10 (permalink)  
Antiguo 12/06/2008, 10:25
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.566
Antigüedad: 10 años, 8 meses
Puntos: 19
Respuesta: <a> con dos div

Hola...

Gracias... espero utilizarlo bien, jeje...

Haber como valida cuando lo termine...

Hasta la siguiente...
  #11 (permalink)  
Antiguo 12/06/2008, 10:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: <a> con dos div

No, si tu objetivo es validar no lo hagas, porque no te va a validar de ninguna manera. Empezando porque estoy casi seguro de que al margen de otras cosas, un enlace dentro de otro no valida.

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:42.