Problema con DIV embebido en un A

limboings · #1 (**permalink**) 08/11/2006, 09:27

Hola buenas,

Pues mirar tube un problemilla con unos links (se me relantizaban :S),aqui el post: http://www.forosdelweb.com/f91/ralentizacion-links-por-que-439546/ .

Ahora me pasa algo similar pero con la cabecera,os muestro el codigo:

Código:

<a href="no.php"><div id="cabecera">
		<div id="c1"></div>
		<div id="c2"></div>
		<div id="c3"></div>
	</div></a>

Lo que ocurre es lo mismo que en el post que expuse arriba,se me relantiza el cursor del raton al pasarlo por encima de la zona linkeada..

Alguien sabe que pasa??

Un saludo y muchas gracias de antemano!!

JavierB · #2 (**permalink**) 08/11/2006, 09:48

Hola limboings

No se cual puede ser el problema, pero sí me parece incorrecto poner un elemento de bloque (div) dentro de un elemento de línea (a)

Saludos,

AlZuwaga · #3 (**permalink**) 08/11/2006, 10:15

Bueno, no sé si el problema de "relantizamiento" es debido a que estás metiendo elementos de bloque (<div>) dentro de elementos inline (<a>).
Eso no sería correcto y lo confirma mi firefox diciendo esto:

Cita:

línea x columna n - Aviso: missing </a> before <div>
línea xx columna nn - Aviso: discarding unexpected </a>

fearlex · #4 (**permalink**) 08/11/2006, 11:16

Cita:

Iniciado por Al Zuwaga

Bueno, no sé si el problema de "relantizamiento" es debido a que estás metiendo elementos de bloque (<div>) dentro de elementos inline (<a>).
Eso no sería correcto y lo confirma mi firefox diciendo esto:

Whoa, que extension de Firefox, usas para esto ??

AlZuwaga · #5 (**permalink**) 08/11/2006, 12:01

web developer toolbar

(yo creí que todo el mundo de por aquí la usaba ñ_ñ)

fearlex · #6 (**permalink**) 08/11/2006, 13:37

Cita:

Iniciado por Al Zuwaga

web developer toolbar

(yo creí que todo el mundo de por aquí la usaba ñ_ñ)

Bueno, te dire que si la uso, y es la mejor herramienta en mucho tiempo, pero, queria estar seguro para hacerte mi segunda pregunta, como obtienes esas confirmacion del firefox, que validas o que opcion usas ???

AlZuwaga · #7 (**permalink**) 08/11/2006, 15:42

Ah, ya. Pero la verdad no entendí la segunda pregunta :/

limboings · #8 (**permalink**) 08/11/2006, 17:14

Hola buenas,

Bueno es que lo que quiero es linkear la cabecera a la pagina de incio,yo pensaba que se hacia asi (ya veo que no),como las imagenes,como lo hago entonces para linkear ese elemento div??

Otra cosa,sobre el post que expuse en el primer post..alguien sabe que ocurre??

Un Saludo y gracias!!

fearlex · #9 (**permalink**) 08/11/2006, 18:52

Cita:

Iniciado por Al Zuwaga

Ah, ya. Pero la verdad no entendí la segunda pregunta :/

Me refiero a esto :

línea x columna n - Aviso: missing </a> before <div>
línea xx columna nn - Aviso: discarding unexpected </a>

Donde lo vistes

limboings · #10 (**permalink**) 09/11/2006, 09:04

Buenas de nuevo,

Esa herramienta para los herrores del html donde esta??? me he instalado la barra que dijisteis y no veo donde poder ver ese error..

un saludo!!

AlZuwaga · #11 (**permalink**) 09/11/2006, 09:55

Perdón! Me confundí antes.
No es de la extensión "Web Developer Toolbar" sino "Html Validator"!
Y esa descripción sale al hacer una vista del código fuente una vez instalada esta última extensión.

Saludos

limboings · #12 (**permalink**) 09/11/2006, 10:45

Buenas,

Ajá ahora si lo tengo instalado gracias..no habia visto antes esta herramienta..

Porcierto,al problema del post..nadie sabe nada??

Un Saludo!!

limboings · #13 (**permalink**) 10/11/2006, 16:12

Buenas,

Nadie sabe como podria linkear ese div??Es una cabecera y necesito que se linkee a la pagina principal.

Y bueno lo de la relantizacion quiza sea por eso que me dijeron en los primeros post..o es otro el problema?

Un Saludo y gracias!!

P.D: Haber si alguien me hecha una mano que llevo un tiempo con este problema y necesito casi urgentemente arreglaro,gracias de nuevo.

kahlito · #14 (**permalink**) 11/11/2006, 06:05

Hola limboings, no entiendo del todo que quieres hacer. Suponiendo que es el primer post que citas arriba como te han dicho no es correcto como tienes colocado los elementos, si por ejemplo quieres crear un enlace en una cabecera a la pagina principal podria ser así:

Código HTML:

<div id="cabecera">
<a href="principal.php"><p>enlace de texto o imagen aquí</p></a>
		<div id="c1"></div>
		<div id="c2"></div>
		<div id="c3"></div>
</div>

limboings · #15 (**permalink**) 11/11/2006, 10:24

Buenas,

Si ya se como enlazar texto,pero lo que quiero es enlazar los divs,estos divs contienen imagenes de fondo con CSS,juntas forman la cabecera..y lo que quiero es linkear ese conjunto de divs para que toda la cabecera sea un link..

Un Saludo y gracias!

elrauli · #16 (**permalink**) 11/11/2006, 11:25

Cita:

<a href="principal.php"><p>enlace de texto o imagen aquí</p></a>

Esto también sería incorrecto ya que el elemento <p> es un elemento de bloque y no podría estar incluido dentro de <a> que es de línea.

Si lo que querés hacer es que distintas partes de un cabezal sean enlaces podés utilizar la etiqueta <a> y asignarle la propiedad display:block.

De esa forma el enlace se comportará como bloque y podrías darle ancho, alto y una imagen de fondo tal como lo hacés con un div.

Te doy un ejemplo...

En la hoja de estilos:

Código HTML:

#c1, #c2, #c3
{
	display:block;
}

#c1
{
	width:[LO QUE SEA];
	height:[LO QUE SEA];
	background-image:url([LO QUE SEA]);
}

#c2
{
	width:[LO QUE SEA];
	height:[LO QUE SEA];
	background-image:url([LO QUE SEA]);
}

#c3
{
	width:[LO QUE SEA];
	height:[LO QUE SEA];
	background-image:url([LO QUE SEA]);
}

En el cuerpo del documento:

Código HTML:

<div id="cabecera">
	<a id="c1" href="no.php"></a>
	<a id="c2" href="no.php"></a>
	<a id="c3" href="no.php"></a>
</div>

Bueno, ojalá te sirva... Saludos!

Raúl

limboings · #17 (**permalink**) 11/11/2006, 12:07

Hola buenas,

Si,era eso lo que queria..pero aun me siga haciendo esa relantizacion..es muchisimo menor pero sigue habiendo un poco..

Un Saludo y gracias!!

buzu · #18 (**permalink**) 11/11/2006, 13:13

no es correcto, eso es un mega herror, no puedes ni siquiera poner esot p.e.

<a href...><li>algo</li></a>

es mucho mejor poner <li><a....>algo</a><li>
ves, no puedes poner, como ;aguen ya dijo, un elemento de bloque dentro de uno de linea... no puedes no deves, no lo hagas....

limboings · #19 (**permalink**) 11/11/2006, 13:57

Hola buenas,

Y como puedo diferenciar un elemento de bloque a uno de linea??

Un saludo y gracias!!

limboings · #20 (**permalink**) 11/11/2006, 14:02

Buenas de nuevo,

Se me olvidava,lo de la cabecera ya esta solucionado,no tengo ningun problema de relantizacion,muchas gracias a todos..

Un Saludo!

elrauli · #21 (**permalink**) 11/11/2006, 14:19

Cita:

Iniciado por limboings

Hola buenas,

Y como puedo diferenciar un elemento de bloque a uno de linea??

Un saludo y gracias!!

Otras buenas...

Un elemento de bloque es aquel que no puede compartir la misma línea con otros elementos, en tanto que los de línea sí pueden hacerlo.

<a> por ejemplo es un elemento de línea porque puede compartir la línea con otros elementos.

<p> en cambio es un elemento de bloque porque cada vez que insertás un párrafo, éste comienza en una nueva línea.

Aunque como ya viste este comportamiento puede alterarse con la propiedad display en algunos casos.

Saludos,

Raúl

limboings · #22 (**permalink**) 11/11/2006, 15:27

Ajá,okey gracias elrauli.

Y si pongo un elemento de bloque dentro de uno de linea y no hay ningun error aparente..hay que modificarlo?o da lo mismo?por que creo que tengo mas de una linea de codigo asi..(como para tardar una tarde en arreglar este error).

Un Saludo y gracias!!

elrauli · #23 (**permalink**) 11/11/2006, 16:26

Hola limboings:

Los navegadores en general son bastante permisivos respecto a este tipo de errores y por eso la mayoría de las veces la página se muestra de forma aparentemente correcta. Pero aunque parezca que esté todo bien, en realidad no es así porque estarías violando las reglas propias del lenguaje XHTML.

Quiero decir que aunque se vea bien, internamente está mal. Yo creo que te convendría localizar esos errores y corregirlos para que tu página sea sintácticamente válida lo cual es un valor agregado para tu proyecto.

Saludos,

Raúl

limboings · #24 (**permalink**) 11/11/2006, 18:32

Buenas,

Ajá,pues nada..mañana toca localizar y modificar..jaja..me pasare la tarde con esto..

Enga un saludo y gracias!

kahlito · #25 (**permalink**) 12/11/2006, 12:18

Cita:

Iniciado por kahlito

Código HTML:

<div id="cabecera">
<a href="principal.php"><p>enlace de texto o imagen aquí</p></a>
		<div id="c1"></div>
		<div id="c2"></div>
		<div id="c3"></div>
</div>

Cita:

Iniciado por elrauli

Esto también sería incorrecto ya que el elemento <p> es un elemento de bloque y no podría estar incluido dentro de <a> que es de línea.

Así es

, en que estaria pensando...

limboings · #26 (**permalink**) 13/11/2006, 09:36

Buenas,

Y si utilizo display: inline; se convierte en un elemento de linea,no?Utilizo bastante ese valor de la propiedad display para que no me haga el salto de linea,eso es correcto?

Un Saludo y gracias!!

AlZuwaga · #27 (**permalink**) 13/11/2006, 10:56

"Visualmente" se comporta como un elemento in-line, pero sigue siendo uno de bloque. Así que tampoco estaría bien.

limboings · #28 (**permalink**) 13/11/2006, 13:55

Buenas,

Mmmm..y entonces en vez de un elemento <p> que utilizo para texto si quiero embeberlo en un elemento de linea??el elemento <font>??(me dijeron que font estaba desaprobado en su utilizacion,es correcto utilizarlo?).

Un Saludo!!

Rafael · #29 (**permalink**) 17/11/2006, 21:57

El elemento font si está depreciado, dicho de otra manera ya es obsoleto.

Yo no estoy seguro de que sea incorrecto meter un div dentro de un link, después de todo ¿no se han metido imágenes por años dentro de un link?
y a excepción de que se pueden poner varias imagenes juntas en una linea sin que generen una nueva, ¿no es parecido a un elemento de bloque?¿No le podemos asignar un ancho y alto, un borde y un margen?
Si necesitas que tooodo tu banner sea un link no le veo mucho problema. No recuerdo haberlo visto como ilegal.

En la especificación si marca por ejemplo como ilegal anidar links, pero no dice que esté prohibido anidar un div.
Y si lo que necesitas es aindar divs que tienen imagenes, mejor anida las imagenes. ¿no?.

Si alguien tiene la cita donde dice que es ilegal, agradecería la mencione.

limboings · #30 (**permalink**) 18/11/2006, 18:40

Buenas,

Bueno el problema es que los div contienen imagenes de fondo mediante l apropiedad CSS background-image,por tanto no hay elemento de imagen que anidar sino el div,de todas formas me sigue dando problemas..

Un Saludo y gracias!