Foros del Web » Creando para Internet » HTML »

Div dentro de enlace

Estas en el tema de Div dentro de enlace en el foro de HTML en Foros del Web. Quiero hacer que un div sea un enlace y no solo el texto, pero me da fallo, me dice que un div no puede anidar ...
  #1 (permalink)  
Antiguo 02/07/2009, 03:44
Avatar de lunita87  
Fecha de Ingreso: junio-2009
Ubicación: Zaragoza
Mensajes: 19
Antigüedad: 8 años, 5 meses
Puntos: 0
Div dentro de enlace

Quiero hacer que un div sea un enlace y no solo el texto, pero me da fallo, me dice que un div no puede anidar dentro de un enlace, como puedo hacerlo???

Código HTML:
<div style="height:30px; width:100%;"><a href="../principal/trabajos.aspx"><div class="botones">+ trabajos</div></a></div> 
  #2 (permalink)  
Antiguo 02/07/2009, 05:02
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Div dentro de enlace

al enlace ponle la propiedad display: block y te debería pillar todo.

Sino puedes mirar este tutorial
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 02/07/2009, 06:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div dentro de enlace

Hola Lunita
Un elemento que por definición es de línea (como el enlace) no puede contener elementos de bloque (como son los div´s)
Así que tienes que cambiar de planteamiento.
Hacer que un div tenga en su interior el enlace que lo ocupe por completo y haga que todo el div se comporte como el enlace.

Algo así: (editado para jugar un poco con css)
Código css:
Ver original
  1. <style type="text/css">
  2. * {margin:0;padding:0; border:0; position: relative;}
  3. #contenedor {
  4. width: 600px;
  5. margin: 0 auto;
  6. background: #444;
  7. padding: 10px;
  8. color: #cdcdcd;
  9. }
  10. .div_enlace {
  11. width: 10em;
  12. height:5em;
  13. }
  14. a {
  15. display: block;
  16. width: 100&#37;;
  17. height: 100%;
  18. text-decoration: none;
  19. background: #777;
  20. }
  21. a:hover {background: #f60;}
  22. .div_enlace span {
  23. position: absolute;
  24. top: 1.8em;
  25. left: 5px;
  26. font-size: 1em;
  27. color: #777;
  28. }
  29. .div_enlace:hover span {
  30. color:#cdcdcd;
  31. border: 1px inset #444;
  32. background: #444;
  33. }
  34. </style>
y en el html
Código html:
Ver original
  1. <div id="contenedor">
  2.     <div class="div_enlace">
  3.         <a href="#" tittle="un enlace gordo"></a>
  4.         <span>Yo no soy enlace</span>
  5.     </div>
  6. </div>

Un saludo

Para los 174
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 02/07/2009 a las 06:51
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:06.