Enlazar un div entero

LoBo2024 · #1 (**permalink**) 11/10/2007, 02:37

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.

rubenlopez · #2 (**permalink**) 11/10/2007, 04:29

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

Shade · #3 (**permalink**) 11/10/2007, 04:34

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.

LoBo2024 · #4 (**permalink**) 11/10/2007, 04:37

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 :)

LoBo2024 · #5 (**permalink**) 11/10/2007, 04:40

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.

rubenlopez · #6 (**permalink**) 11/10/2007, 04:48

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).

LoBo2024 · #7 (**permalink**) 11/10/2007, 04:55

Cojonudo :D me ha ido de perlas tengo otra cosa del estilo por ahí tb probaré a ver si lo consigo ;) muchisimas gracias rubenlopez :)

kahlito · #8 (**permalink**) 12/10/2007, 20:01

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>

LoBo2024 · #9 (**permalink**) 15/10/2007, 02:39

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

kahlito · #10 (**permalink**) 15/10/2007, 18:40

La verdad me he perdido un poco...¿podrías poner lo códigos completos del ejemplo que usas o ver algo en linea?

LoBo2024 · #11 (**permalink**) 16/10/2007, 03:07

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 :)

Daniel Ulczyk · #12 (**permalink**) 16/10/2007, 10:30

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

derkenuke · #13 (**permalink**) 16/10/2007, 18:00

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 { 
    display: block;
    background: red; 
    width: 600px; 
    height: 300px; 
}
#enlace1:hover {
    display: block;
    background: #880000; 
    width: 600px; 
    height: 300px;
}
</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 {
    background: red;
}
.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==1 && 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 {
    display: block;
    height: 300px;
    width: 500px;
    background: #cc0000;
}
#enlaceRazon span {
    display: block;
    margin-top: 3em;
}
#enlaceRazon:hover {
    display: block;
    height: 300px;
    width: 500px;
    background: red;
}
</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

LoBo2024 · #14 (**permalink**) 17/10/2007, 02:32

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 :)

derkenuke · #15 (**permalink**) 17/10/2007, 09:41

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é

kahlito · #16 (**permalink**) 18/10/2007, 08:38

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)

Daniel Ulczyk · #17 (**permalink**) 18/10/2007, 10:06

Excelente ejemplo kahlito!
Sin JavaScript y más accesible...
Saludos!