Problema con el W3C

DMR · #1 (**permalink**) 18/10/2008, 19:29

Hola,

Tengo el siguiente menu:

Código:

   <a href="#"><div id="opcMenu">INICIO</div></a>
    <a href="#"><div id="opcMenu">COCHES</div></a>
    <a href="#"><div id="opcMenu">PISOS</div></a>

Os pongo el CSS:

Código:

#menu {
	height:36px;
	width:526px;
	margin:0 auto;
	border:2px solid #3399ff;
	font-size:0.8em;
	
}

#opcMenu {
	cursor:hand;	
	font-weight:bold;
	float:left;
	padding:10px;
}
#opcMenu:hover {
	background-color:#333;
}

Vale, la cosa es que queda muy bonito, pero no me pasa la validacion W3C.

Me da el error:

Cita:

Line 281, Column 33: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

<a href="#"><div id="opcMenu">INICIO</div></a>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Yo se porque da el error (*), pero no se me ocurre ahora como arreglarlo sin complicarme mucho la vida, pero que siga haciendo el mismo efecto.

Alguna sugerencia?

Gracias.

(*) Que pongo la etiqueta <a href... antes del div y ahi esta el fallo... pero al tenerlo asi cuando paso el raton por la "BARRA DE MENU DE LA PAGINA" se cambia el fondo de color y mola.

PD: Tb da error pq repito el nombre de la etiqueta ID... ¿?

Raulmmmm · #2 (**permalink**) 19/10/2008, 03:31

¿Y por qué no cambias tu HTML por este? Queda igual y respeta los estándares:

Código HTML:

 <a href="#" class="opcMenu">INICIO</a>
    <a href="#" class="opcMenu">COCHES</a>
    <a href="#" class="opcMenu">PISOS</a>

Y cambia en tu CSS las # por .
Además, te funcionará en IE6.

nfo · #3 (**permalink**) 19/10/2008, 04:22

estas definiendo las class como id en el css .

nfo · #4 (**permalink**) 19/10/2008, 07:08

jejeje.... yo soy partidario de que sea estandar

DMR · #5 (**permalink**) 19/10/2008, 07:13

Cita:

Iniciado por Raulmmmm

¿Y por qué no cambias tu HTML por este? Queda igual y respeta los estándares:

Código HTML:

 <a href="#" class="opcMenu">INICIO</a>
    <a href="#" class="opcMenu">COCHES</a>
    <a href="#" class="opcMenu">PISOS</a>

Y cambia en tu CSS las # por .
Además, te funcionará en IE6.

Perfecto.
Muchas gracias.

webosiris · #6 (**permalink**) 19/10/2008, 09:36

si eso es un menu, semánticamente está incorrecto. un menú basicamente es una lista desordenada de enlaces, así que debes de usar UL LI y no divs

Raulmmmm · #7 (**permalink**) 19/10/2008, 11:16

Es verdad webosiris. Para que valide y quede igual debería estar así:

Código HTML:

<ul id="menu">
<li><a href="#" class="opcMenu">INICIO</a></li>
<li><a href="#" class="opcMenu">COCHES</a></li>
<li><a href="#" class="opcMenu">PISOS</a></li>
</ul>

Y el CSS:

Código:

#menu {
	height:36px;
	width:526px;
	margin:0 auto;
	border:2px solid #3399ff;
	font-size:0.8em;
	list-style: none;
	
}

.opcMenu {
	cursor:hand;	
	font-weight:bold;
	float:left;
	padding:10px;
}
.opcMenu:hover {
	background-color:#333;
}

Gracias por el apunte

.

webxedo · #8 (**permalink**) 19/10/2008, 14:00

También podria ser de está manera:

Código:

<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Coches</a></li>
<li><a href="#">Pisos</a></li>
</ul>

Código:

#menu {
	height:36px;
	width:526px;
	margin:0 auto;
	border:2px solid #3399ff;
	font-size:0.8em;
	list-style: none;
}

#menu li {
	cursor:hand;	
	font-weight:bold;
	float:left;
	padding:10px;
        text-transform: uppercase;
}
#menu li a:hover {
	background-color:#333;
}

DMR · #9 (**permalink**) 19/10/2008, 14:00

Lo he probado tal cual y no da el mismo resultado...

habria algun problema en dejarlo sin los ul e li?

Mikmoro · #10 (**permalink**) 19/10/2008, 16:02

No da el mismo resultado porque hay que hacer unos retoques en la css. Empieza por aquí:

HTML

Cita:

<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Coches</a></li>
<li><a href="#">Pisos</a></li>
</ul>
</div>

CSS

Cita:

#menu {
height:36px;
width:526px;
margin:0 auto;
border:2px solid #3399ff;
font-size:0.8em;
list-style: none;
}
#menu ul {list-style-type: none;}

#menu li a {display: block;
font-weight:bold;
float:left;
padding:10px;
text-transform: uppercase;
}
#menu li a:hover {
background-color:#333;
}

Y con esta base ya retoca lo que necesites.

DMR · #11 (**permalink**) 20/10/2008, 09:43

Perfecto.

Ahora si me sale aunque he tenido que usar el clasico:

nfo · #12 (**permalink**) 20/10/2008, 10:01

el clasico hack para IE que asco !

Mikmoro · #13 (**permalink**) 20/10/2008, 10:06

Cita:

Iniciado por nfo

el clasico hack para IE que asco !

Este comentario sería más interesante si le aportaras una alternativa sin usar el comentario condicional para IE.

daPhyre · #14 (**permalink**) 20/10/2008, 10:12

Yo no le veo el lado asqueroso (Excepto la propia idea que debamos usarlo o~o).

Un mal necesario... Aunque no debería ser

Lo bueno es que ya arreglaron lo de la página

Mikmoro · #15 (**permalink**) 20/10/2008, 11:04

Cita:

Iniciado por DMR

Perfecto.

Ahora si me sale aunque he tenido que usar el clasico:

Pero entonces... ¿dónde sigues usando la clase .enlacesPics?

DMR · #16 (**permalink**) 20/10/2008, 12:10

Cita:

Iniciado por Mikmoro

Pero entonces... ¿dónde sigues usando la clase .enlacesPics?

Lo de .enlacesPics lo uso en otro sitio que no es el menu.

Pero entonces el rollo este del "hack de IE" es malo?

Yo pensaba que era algo normal cuando no se comportaba como deberia...

¿Debo hacerlo de otra forma?

Por cierto, ya que estamos... alguien me puede decir la diferencia basica entre id y class?... a parte de que el id es unico (o debe serlo)...

DragonX · #17 (**permalink**) 20/10/2008, 12:15

ID --> es unico e irrepetible dentro del HTML
CLASS --> lo podemos utilizar las veces que querramos dentro de nuestro HTML

Mikmoro · #18 (**permalink**) 20/10/2008, 12:16

Cita:

Iniciado por DMR

Lo de .enlacesPics lo uso en otro sitio que no es el menu.

Entendido.

Cita:

Iniciado por DMR

Pero entonces el rollo este del "hack de IE" es malo?

Yo pensaba que era algo normal cuando no se comportaba como deberia...

¿Debo hacerlo de otra forma?

No, no es malo. Efectivamente es lo que se usa cuando no queda otro remedio. Siempre es bueno intentar encontrar código compatible que funcione bien sin hacks, que suele ser posible pero no siempre. Y cuando no hay manera, se usa un comentario condicional y listo.

Cita:

Iniciado por DMR

Por cierto, ya que estamos... alguien me puede decir la diferencia basica entre id y class?... a parte de que el id es unico (o debe serlo)...

Pues esa es la diferencia: ID es único y se referencia en la CSS con una almohadilla (#), y class es para poder ser usado en varios elementos (del mismo tipo o no), y se referencia con un punto (.)

Mikmoro · #19 (**permalink**) 20/10/2008, 12:18

Cita:

Iniciado por DragonX

ID --> es unico e irrepetible dentro del HTML
CLASS --> lo podemos utilizar las veces que querramos dentro de nuestro HTML

Buen choque

Te has adelantado. Sobraba ya mi tercera respuesta entonces.

DragonX · #20 (**permalink**) 20/10/2008, 12:39

no, no, no es preferible que sobre y no que falte

nfo · #21 (**permalink**) 20/10/2008, 13:10

Cita:

Iniciado por DMR

Lo de .enlacesPics lo uso en otro sitio que no es el menu.

Pero entonces el rollo este del "hack de IE" es malo?

Yo pensaba que era algo normal cuando no se comportaba como deberia...

¿Debo hacerlo de otra forma?

Por cierto, ya que estamos... alguien me puede decir la diferencia basica entre id y class?... a parte de que el id es unico (o debe serlo)...

no es malo, pero si no queda otro remedio.... hay que usarlo, es por los navegadores.