Foros del Web » Creando para Internet » CSS »

Enlazar un div entero

Estas en el tema de Enlazar un div entero en el foro de CSS en Foros del Web. Pues me gustaria saber si es posible enlazar todo un div entero y que esto este dentro de lo accesible, osea q cumpla las pautas. ...
  #1 (permalink)  
Antiguo 11/10/2007, 03:37
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Enlazar un div entero

Pues me gustaria saber si es posible enlazar todo un div entero y que esto este dentro de lo accesible, osea q cumpla las pautas.

Ejemplo:

Código:
<a href="http://www.forosdelweb.com"><div>Ir a foros del web</div></a>
Muchisimas gracias por adelantado.
  #2 (permalink)  
Antiguo 11/10/2007, 05:29
 
Fecha de Ingreso: septiembre-2007
Mensajes: 20
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Enlazar un div entero

Puedes utilizar un simple enlace, que cuando el css no actue se muestre como enlace sin más, y en el css definir para el <a> un display: block y así tratarlo como si fuera un div
  #3 (permalink)  
Antiguo 11/10/2007, 05:34
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Enlazar un div entero

Si lo que quieres es que sea un div en plan "grande" (300x300) o algo del estilo, puedes crearle un trigger con algun framework (ejemplo yahoo yui) que al hacer click en el te redirija a la pagina.
  #4 (permalink)  
Antiguo 11/10/2007, 05:37
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: Enlazar un div entero

El problema básico q tengo es que son varios divs en una linea q no llega a cumplir el parametro de tabla y tengo 3 divs flotando a la izquierda y me gustaria que al pasar por encima pues hicieran el rollover los 3 divs, siento no haberlo dicho antes :/ a ver si sabeis como podría hacerlo muchisimas gracias :)
  #5 (permalink)  
Antiguo 11/10/2007, 05:40
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: Enlazar un div entero

Shade no habia visto tu respuesta estaba escribiendo la otra respuesta y cuando he acabado has aparecido jeje

La verdad no se bien bien de que me estas hablando :/ me podrías dar más información? recuerda q quiero q sea accesible, muchísimas gracias.
  #6 (permalink)  
Antiguo 11/10/2007, 05:48
 
Fecha de Ingreso: septiembre-2007
Mensajes: 20
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Enlazar un div entero

puedes utilizar un marcado css del estilo:
a span { }
a:hover span { }
y crear un enlace con varios spans dentro (que creo que es más correcto que crear divs dentro, aunque no lo tengo del todo claro).
  #7 (permalink)  
Antiguo 11/10/2007, 05:55
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: Enlazar un div entero

Cojonudo :D me ha ido de perlas tengo otra cosa del estilo por ahí tb probaré a ver si lo consigo ;) muchisimas gracias rubenlopez :)
  #8 (permalink)  
Antiguo 12/10/2007, 21:01
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Enlazar un div entero

Hola LoBo2024, se puede hacer de varias maneras. Te paso un ejemplo a la ligera

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Roolover en párrafos y enlaces</title>
<style type="text/css">
#parrafo1{background-color:#c90;}
#parrafo1 a{display:block;text-decoration: none;height:300px;}
#parrafo1 a:hover{background-color:#990;height:300px}
#parrafo2{display:inline;}
#parrafo2 a{text-decoration: none;height:300px;widt:200px;background-color:#999;}
#parrafo2 a:hover{background-color:#ccc;height:300px;text-decoration:underline;}
</style>
</head>

<body>
<div id="parrafo1"><p><a href="www.forosdelweb.com">Este es el párrafo que te lleva a forosdelweb.com incluyendo todo un div entero.<br />
<span>Imagina que quieres seguir el contenido y así hasta hacer un div bastante largo...</span></a></p>
</div>
<div id="parrafo2"><p><a href="www.forosdelweb.com">Este es el párrafo que te lleva a forosdelweb.com incluyendo todo un div entero.<br />
<span>Imagina que quieres seguir el contenido y así hasta hacer un div bastante largo...</span></a></p>
</div>
</body>
</html> 
  #9 (permalink)  
Antiguo 15/10/2007, 03:39
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: Enlazar un div entero

Tu solución es muy buena y se agradece el curro hecho :) pero mi problema es q dentro de ese div, aparte de que se cambia el fondo... pues dentro del div hay un h2 y un p donde aparece un texto al colocarse encima.

Por eso cuando pongo todo el a dentro del div englobo h2 y p... y muy accesible no me sale la verdad :/

Ese es mi problema más grande... aparte de explicarme como el culo así que pegaré aquí el código que tengo:

Código:
	<div <?php if($_GET["fuseaction"] <> "razon"){?>onmouseover="this.className='pastilla-menu-over';document.getElementById('txt-razones').innerHTML='blablabla';" onmouseout="this.className='pastilla-menu';document.getElementById('txt-razones').innerHTML='';"<?php }?> class="pastilla-menu <?php if($_GET["fuseaction"] == "razon"){ echo "pastilla-menu-over";}?>">
		<h2><a class="menu" href="index.php?fuseaction=razon">razon</a></h2>
	 	<p class="subtitulo" id="txt-razones"><?php if($_GET["fuseaction"] == "razon"){?>blablabla<?php }?></p>
	</div>
A ver si así consigo explicarme bien y ya de paso veis la burrada q he hecho xP que fijo q se puede mejorar y tal pero ahora por ahora quiero centrarme solo en eso en q todo el div sea enlazable, pq al ponerme encima del div sí, cambia de color pero es como raro a la hora de darle al enlace.

Muchísimas gracias
  #10 (permalink)  
Antiguo 15/10/2007, 19:40
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Enlazar un div entero

La verdad me he perdido un poco...¿podrías poner lo códigos completos del ejemplo que usas o ver algo en linea?
  #11 (permalink)  
Antiguo 16/10/2007, 04:07
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: Enlazar un div entero

Bueno ya había puesto el código antes de lo que uso.. pero voy a volver a copiarlo, omitiendo el javascript a ver si se ve más claro:

Código:
<div class="pastilla-menu">
		<h2><a class="menu" href="index.php?fuseaction=razon">razon</a></h2>
	 	<p class="subtitulo" id="txt-razones">blablabla</p>
	</div>
Bueno ahora espero que se vea más claro :) ese es el div que tengo que quisiera que todo el fuese un enlace y no solo lo que es el texto y claro está siguiera dentro de las pautas de accesibilidad, gracias :)
  #12 (permalink)  
Antiguo 16/10/2007, 11:30
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Re: Enlazar un div entero

Creo que también me he perdido un poco...
A ver... sirve este ejemplo para comparar con lo que necesitás?
Ask the CSS Guy - Link boxes
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #13 (permalink)  
Antiguo 16/10/2007, 19:00
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Re: Enlazar un div entero

Hola:

Inspirado en el ejemplo de kahlito te he propuesto mi idea:

Código PHP:
<!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" xml:lang="es" lang="es">
<
head>
<
meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<
meta name="Author" content="derkeNuke" />
<
title>P&#225;gina nueva</title>
<style type="text/css">
#enlace1 { 
    
displayblock;
    
backgroundred
    
width600px
    
height300px
}
#enlace1:hover {
    
displayblock;
    
background#880000; 
    
width600px
    
height300px;
}
</
style>
</
head>

<
body>


<
p>
    <
a id="enlace1" href="http://www.forosdelweb.com">
        
Este es el p&#225;rrafo que te lleva a forosdelweb.com incluyendo todo un div entero.<br/>
        
Imagina que quieres seguir el contenido y as&#237; hasta hacer un div bastante largo...
    
</a>
</
p>


</
body>
</
html
Teniendo en cuenta que los elementos A sólo pueden contener elementos %inline que no sean A (esto es:
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
Lo que viene siendo texto, (TT | I | B | BIG | SMALL) |
(EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM) |
(A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO) |
(INPUT | SELECT | TEXTAREA | LABEL | BUTTON)
)
(todo esto en la especificacion 4.01)

Doy por supuesto que no vas a colocar un DIV dentro de un A.


De lo demás, H2's DIV's y textos que cambian y cosas que se colorean no he entendido nada. He intentado descifrarlo. Doy por sabido que conoces javascript y sabes programar en ello. He hecho un efecto mediante el cual al hacer click en el DIV es como si se hiciera click en el enlace, es decir, vamos a donde apunta el enlace. No me acuerdo donde vi la idea original, no he podido encontrarlo:

Código PHP:
<!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" xml:lang="es" lang="es">
<
head>
<
meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<
meta name="Author" content="derkeNuke" />
<
title>P&#225;gina nueva</title>
<style type="text/css">
.
pastilla-menu {
    
background#cc0000;
}
.
pastilla-menu-over {
    
backgroundred;
}
.
menu {
    
color#0f0;
}
</
style>
</
head>

<
body>


<
script type="text/javascript">
<!--

// document.getElementById abreviado
function $(x) { return document.getElementById(x); }


function 
over(elem) {
    
elem.className='pastilla-menu-over'
    $(
'txt-razones').innerHTML='blablabla';
}
function 
out(elem) {
    
elem.className='pastilla-menu'
    $(
'txt-razones').innerHTML='';
}

function 
expandirEnlace(id) {
    var 
elEnlace = $(id);
    
// subimos hasta que encontramos un div
    
var padre elEnlace.parentNode;
    while( 
padre.nodeType==&& padre.tagName.toUpperCase()!="DIV" )
        
padre padre.parentNode;
    
padre.style.cursor "pointer";
    
padre.style.cursor "hand";
    
padre.onclick = function() {
        
self.location.href elEnlace.href;
    }
}

window.onload = function() {
    
expandirEnlace("enlaceRazon");
}

// -->
</script>


<div onmouseover="over(this)" onmouseout="out(this)" class="pastilla-menu">
    <h2><a id="enlaceRazon" class="menu" href="index.php?fuseaction=razon">razon</a></h2>
    <p class="subtitulo" id="txt-razones">&nbsp;</p>
</div>


</body>
</html> 

Bueno, no es la mejor solución porque usa javascript, hay mejores maneras de hacerlo, pero con tantos requisitos... no sé cómo se podría hacer sin javascript. No sé hasta que punto podrías transformarlo en ésto:

Código PHP:
<!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" xml:lang="es" lang="es">
<
head>
<
meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<
meta name="Author" content="derkeNuke" />
<
title>P&#225;gina nueva</title>
<style type="text/css">
#enlaceRazon {
    
displayblock;
    
height300px;
    
width500px;
    
background#cc0000;
}
#enlaceRazon span {
    
displayblock;
    
margin-top3em;
}
#enlaceRazon:hover {
    
displayblock;
    
height300px;
    
width500px;
    
backgroundred;
}
</
style>
</
head>

<
body>


<
script type="text/javascript">
<!--

// document.getElementById abreviado
function $(x) { return document.getElementById(x); }


function 
over(elem) {
    
elem.className='pastilla-menu-over'
    $(
'txt-razones').innerHTML='blablabla';
}
function 
out(elem) {
    
elem.className='pastilla-menu'
    $(
'txt-razones').innerHTML='';
}

// -->
</script>


<a id="enlaceRazon" onmouseover="over(this)" onmouseout="out(this)">
    <em>razon</em>
    <span class="subtitulo" id="txt-razones">&nbsp;</span>
</div>


</body>
</html> 


Espero que haya aportado algo.
Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #14 (permalink)  
Antiguo 17/10/2007, 03:32
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: Enlazar un div entero

Ostia no se como agradecer tanto esfuerzo la verdad x) diosss que currada sus pegais :) gracias gracias mil millones de gracias pero lo q yo estaba buscando basicamente al final es lo que me ha pasado daniel, ahí está basicamente lo que quería hacer :)

Pero vamos que igualmente yo me miro el código que te has currado que no va a quedar en el aire jeje que siempre puede ser válido para cualquier otra cosa :)

Pues nada de nuevo muchisimas gracias a todos me habeis ayudado un montón :)
  #15 (permalink)  
Antiguo 17/10/2007, 10:41
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Re: Enlazar un div entero

Sí he visto el ejemplo de Daniel, creo que algo así estaba buscando yo (aunque lo ví redactado en castellano, en un tutorial y bastante más simplificado).

Un saludo y no hay de qué
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #16 (permalink)  
Antiguo 18/10/2007, 09:38
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Enlazar un div entero

Hola, para hacerlo todavía más accesible y sin javascript aquí también hay algo parecido

http://www.smileycat.com/miaow/archives/000230.php
http://www.smileycat.com/miaow/archi...lock-hover.php (ejemplo)

  #17 (permalink)  
Antiguo 18/10/2007, 11:06
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Re: Enlazar un div entero

Excelente ejemplo kahlito!
Sin JavaScript y más accesible...
Saludos!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
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 22:35.