ERRORES VALIDACION AL ENVOLVER <li> con <a>.

[gmonterog]

Hola a todos:

Al ir a validar mi página he podido comprobar que no se pueden envolver elementos <li> con enlaces <a> (aunque funciona perfectamente en todos los navegadores que he probado). Pongo un ejemplo:

Código PHP:

  <div id="menu"> 
            <ul> 
                <a href="index.html"><li class="mnuActivo">Inicio</li></a> 
                <a href="quienesSomos.html"><li>¿Quiénes somos?</li></a> 
                <a href="tarifas.html"><li>Tarifas</li></a> 
                <a href="ofertas.html"><li>Ofertas</li></a> 
                <a href="talleres.html"><li>Talleres</li></a> 
                <a href="dondeEncontrarnos.html"><li>¿Dónde encontrarnos?</li></a> 
                <a href="contacto.html"><li>Contacto</li></a> 
                <a href="elegirAvanceBioMed.html"><li>¿Por qué elegir Avance BioMed?</li></a> 
            </ul> 
</div>  
   

Quiero hacerlo así porque me gusta que las etiquetas de los menús de navegación funcionen al pulsar sobre la propia etiqueta (a modo de botón, por decirlo de alguna manera) y no al pulsar sobre el texto. Me parece más intuitivo para el usuario.

¿Se puede hacer correctamente (que validen las páginas) con HTML/XHTML y CSS o es necesario acudir a algún tipo de script?

Gracias por la ayuda.

Saludos,

GMG.

[maycolalvarez]

lo que puedes hacer es ejecutar el link con el li:

<li onclick="window.location = this.childNodes[0].href;"><a href="url">link</a></li>

requiere javascript

[Daniel Ulczyk]

Iniciado por gmonterog

Quiero hacerlo así porque me gusta que las etiquetas de los menús de navegación funcionen al pulsar sobre la propia etiqueta (...)

Entiendo que si te preocupan los estándares—por algún motivo has ido a validar tu código—debieras respetarlos.

El markup que presentaste; no valida, porque está mal escrito. Podrá contentarte porque lo probaste en algún navegador y funciona según tus expectativas.

Pero ello no alcanza.

El algún dispositivo, ello fallará: smartphone, tablet, screen reader, smart TV, etc.

Codifica siempre como si el tipo que finalmente mantendrá tu código fuera un psicópata violento que sabe donde vives

[gmonterog]

Gracias maycolalvarez, probaré lo que me dices, tiene buena pinta.

Saludos,

GMG

[gmonterog]

Muy buena la cita del psicopata, Daniel, jeje.

Precisamente por que me preocupan los estandares he hecho esta consulta. Soy consciente de que el código está mal (no lo era cuando lo escribí). Ahora me queda el tedioso camino de arreglar este y otros entuertos para que el proyecto quede lo más correcto posible.

Gracias a todos nuevamente. Si sigo teniendo problemas volveré a dar la lata.

Saludos,

GMG.

[gmonterog]

Estoy empleando la propuesta de maycolalvarez y me ha surgido un problemilla, algunos enlaces tienen el atributo target="blank" y parece no funcionar. Necesito que se abran en ventana o pestaña nueva. ¿Sabrías indicarme la sintaxis correcta?

Gracias de antemano.

Saludos,

GMG.

Iniciado por maycolalvarez

lo que puedes hacer es ejecutar el link con el li:

<li onclick="window.location = this.childNodes[0].href;"><a href="url">link</a></li>

requiere javascript

[gmonterog]

Hola nuevamente;

He indagado un poco y ya he podido dar con la sintaxis (javascript) para abrir los enlaces en una nueva ventana. Por si a algún que otro principiante como yo le interesa, la cosa queda así:

Código Javascript:

<li onclick="window.open (this.childNodes[0].href);"><a href="galeria.html" target="blank">Galería</a></li>
 

Usando window.open en vez de window.location.

Asunto cerrado.

Saludos,

GMG.

[maycolalvarez]

de hecho estaba por indicarte lo mismo, pero con una modificación interesante:

<li onclick="window.open (this.childNodes[0].href, this.childNodes[0].target);"><a href="galeria.html" target="blank">Galería</a></li>ç

en efecto, el 2do parámetro de windows.open es el target

[webosiris]

hay una forma muy sencilla que no requiere ni javascript ni nada, solo css básico.

Escribe el html de forma correcta (los A dentro de los LI) y dale a los A un display:block

[gmonterog]

Hola webosiris,

Llevo "fuera" una temporadita. Gracias por tu aportación. Muy interesante. Lo probaré.

Saludos,

GMG

Iniciado por webosiris

hay una forma muy sencilla que no requiere ni javascript ni nada, solo css básico.

Escribe el html de forma correcta (los A dentro de los LI) y dale a los A un display:block