Foros del Web » Creando para Internet » CSS »

Enlazar con un div completo

Estas en el tema de Enlazar con un div completo en el foro de CSS en Foros del Web. Hola gente, que tal andamos? Me asalta una duda... en la cabecera de una web tengo un div tal que así: Código: <a href='index.html'><div class="logo"></div></a> ...
  #1 (permalink)  
Antiguo 14/03/2008, 15:03
Avatar de Jowy  
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 232
Antigüedad: 10 años, 9 meses
Puntos: 0
Enlazar con un div completo

Hola gente, que tal andamos? Me asalta una duda... en la cabecera de una web tengo un div tal que así:

Código:
 <a href='index.html'><div class="logo"></div></a>
El div tiene una imagen de fondo que es el logo de la web... al hacer click en él debería llevarme al index.

Bien, funciona en firefox. En IE7 funciona pero no aparece el cursor en forma de mano... y en IE6 no funciona nada de nada... ¿Que puedo hacer para que en IE me funcione correctamente? ¿Se os ocurre alguna otra forma de conseguirlo?
  #2 (permalink)  
Antiguo 14/03/2008, 15:12
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Enlazar con un div completo

Poner todo el CSS del logo al <a>, y luego añadirle el display:block;. Ejemplo:
.logo{ width: 300px; height: 400px; background: url('logo.gif'); display: block;}
Y el html:
<a href="index.html" class="logo"></a>
  #3 (permalink)  
Antiguo 14/03/2008, 15:55
Avatar de Jowy  
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 232
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Enlazar con un div completo

Gracias! en IE7 ya funciona perfecto! Pero en IE6 ni se ha inmutado...

:(
  #4 (permalink)  
Antiguo 14/03/2008, 16:34
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Enlazar con un div completo

Intenta borrar la caché y vuelve a probar, a mí me va en IE6, y si sigue sin ir, pon aquí el código del .logo.
  #5 (permalink)  
Antiguo 14/03/2008, 17:53
Avatar de Jowy  
Fecha de Ingreso: febrero-2007
Ubicación: En la red
Mensajes: 232
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Enlazar con un div completo

Vale, esta bien como tu habías dicho. He comprobado que funciona, pero como uso un fix para preservar la transparencias de los .png:

Código:
img, div, a { behavior: url(js/iepngfix.htc) }
entonces se ve que interactua de alguna manera y no me detecta el enlace...

Creo que voy a tener que usar otro fix para transparencias de png... :(
  #6 (permalink)  
Antiguo 16/03/2008, 21:54
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 10 años, 2 meses
Puntos: 4
Re: Enlazar con un div completo

<a href='index.html'><div class="logo"></div></a>
Los div son elementos de bloque en (x)html y no pueden ir dentro de los <a>, que son elementos en linea. Eso es un fallo grave sintactico que te puede dar problemas en el CSS y en el DOM a parte de una validacion negativa del codigo (x)html.
Usa una etiqueta <span> en vez del div, y luego si quieres le das un comportamiento block al span en el CSS (block e inline en CSS no son lo mismo que en (x)html), en CSS todo elemento puede ser block o inline (posicionalmente) pero en xhtml no, por defecto tienen el mismo comportamiento que en xhtml pero se puede cambiar.

Por ejemplo <span> es un elemento en linea de (x)html, y siempre sera en linea en el (x)html, por lo tanto se puede colocar dentro de otro elemento en linea como <a>. Sin embargo en CSS span puede mostrarse en linea o en bloque, por defecto sera mostrado en linea (como en (x)html) pero se puede cambiar.

En cuanto a tu problema si lo he entendido bien quieres poder hacer clic en una imagen de fondo a modo de enlace.. lo que no se es como has conseguido hacer eso en algun navegador ya que las imagenes de fondo CSS no son interactivas, para que una imagen pueda ser clickeada es necesario que este puesta mediante <img> en el codigo fuente del (x)html. Creo que debe estar relacionado con el fallo del codigo que has puesto que de alguna manera extraña activa tu div como si fuera un enlace en algunos navegadores.

Quizas la manera mas sencilla de hacer lo que tu quieres si he entendido bien lo que quieres hacer seria;
<div>
<a href="#"><img src="#" alt="logo" /></a>
</div>

Tambien como te han dicho antes podrias aplicar a la etiqueta <a> todo el CSS, pero un logo en mi opinion sobrepasa en significado a un elemento decorativo (imagenes de fondo), por lo tanto es mas adecuado usar img en el codigo (x) html para mostrarlo.

Última edición por feral; 16/03/2008 a las 22:22
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 19:16.