¿Cómo hacer que se pueda hacer click en todo el botón y no solo en el texto?

Xanina · 11 Abr 2014

Insertar CODE, HTML o PHP:

[B]el html:[/B]
<nav>
<ul style="list-style-type: none;">
	<li><a href=""> PRODUCTOS </a></li>
	<li><a href=""> VÍDEOS </a></li>
	<li><a href=""> SOPORTE </a></li>
	<li><a href=""> NOSOTROS </a></li>
</ul>
</nav>

[B]el css:[/B]
nav ul li {
    margin-top: 25px;
    padding: 5px 15px; 
    background: rgba(0,0,0,0.2);
    color: white; 
    display: inline-block; 
    float: left;
    border-right: dotted 1px rgba(235,208,58,0.4);
}

nav ul li:hover {
    background: rgba(235,208,58,1);
    border-right: dotted 1px black;
    color: black;    
}

con el padding y el hover se me "ilumina" un botón, pero sólo va al link al clickar sobre el texto, ¿cómo he de hacer para que se pueda hacer click en tódo el botón?

Usuario eliminado 42850 · 11 Abr 2014

En el HTML, mete las etiquetas <li> dentro de las etiquetas <a> tal que así:

Insertar CODE, HTML o PHP:

<nav>
<ul style="list-style-type: none;">
	<a href=""><li> PRODUCTOS </li></a>
	<a href=""><li> VIDEOS </li></a>
	<a href=""><li> SOPORTE </li></a>
	<a href=""><li> NOSOTROS </li></a>
</ul>
</nav>

Saludos :encouragement:

Xanina · 11 Abr 2014

Zinxsk dijo:
En el HTML, mete las etiquetas <li> dentro de las etiquetas <a> tal que así:

Insertar CODE, HTML o PHP:

<nav> <ul style="list-style-type: none;"> <a href=""><li> PRODUCTOS </li></a> <a href=""><li> VIDEOS </li></a> <a href=""><li> SOPORTE </li></a> <a href=""><li> NOSOTROS </li></a> </ul> </nav>

Saludos :encouragement:

PERFECTO!!! que cosa tan sencilla y no daba con ella, eres un crack!! :encouragement:😛8:😛8:

---------- Post agregado el 11-abr-2014 hora: 17:18 ----------

¡¡¡ AHORA ME HA SURGIDO ALGO EXTRAÑISIMO!!!

pongo este código

Insertar CODE, HTML o PHP:

<ul style="list-style-type: none;">
	<a href="http://isawcamera.es/soporte"><li> GARANTÍA </li></a>
	<a href="http://isawcamera.es/descargas"><li> DESCARGAS </li></a>
</ul>

y en el navegador me pone el siguiente:

Insertar CODE, HTML o PHP:

<ul style="list-style-type: none;">
	<a href="http://isawcamera.es/soporte">
<li> GARANTÍA </li>
</a><p><a href="http://isawcamera.es/soporte"></a><br>
	<a href="http://isawcamera.es/descargas">
</a></p><li><a href="http://isawcamera.es/descargas"> DESCARGAS </a></li><a href="http://isawcamera.es/descargas">
</a><p><a href="http://isawcamera.es/descargas"></a>
</p></ul>

es extrañísmo, es un menú lateral que tengo, y lo cuando cambié el orden de <li> y <a href> me hizo eso, entonces copié y pegué el código de mi menú de la cabecera en el que me funcionó tu idea y cambié solo lo de "soporte" y "descargas" pq son otros links y no sé porqué me hace eso

tengo subida la web para que lo podais ver :ambivalence:

Usuario eliminado 42850 · 11 Abr 2014

¿Qué editor de código usas? A simple vista parece que sólo debes quitar los párrafos y el salto de línea que te ha creado y ya se te ordenará.

Feddy · 11 Abr 2014

HTML:

<li><a href="#" style="display:block;width:XXXXpx;height:XXXXpx;"></a></li>

reemplaza el XXXX con el largo y alto que quieras el boton. deberia funcionar

lombervid · 11 Abr 2014

Eso de meter los li dentro de los a no está bien, lo que debes de hacer es, en lugar de ponerle el diseño a los li ponselo a los a dentro de los li.

Jxit3 · 11 Abr 2014

el css ponlo así

nav ul li a{}
nav ul li a:hover {}

Xanina · 12 Abr 2014

Zinxsk dijo:
¿Qué editor de código usas? A simple vista parece que sólo debes quitar los párrafos y el salto de línea que te ha creado y ya se te ordenará.

la página la estoy haciendo en wordpress, así que el código lo meto en su sección de crear páginas...

yo meto este código en la página "soporte":

Insertar CODE, HTML o PHP:

<div id="menuizdo">
<p> SOPORTE </p>
<ul style="list-style-type: none;">
    <a href="http://isawcamera.es/soporte"> <li> GARANTÍA </li> </a>
    <li><a href="http://isawcamera.es/descargas"><li> DESCARGAS </a></li>
</ul>
</div>

pero al cargar la página y mirar el codigo fuente veo que me genera este otro código (marco en negrita lo que añade):

Insertar CODE, HTML o PHP:

<div id="menuizdo">
<p> SOPORTE </p>
<ul style="list-style-type: none;">
    <a href="http://isawcamera.es/soporte"> <li> GARANTÍA </li> <p> </a></p>
        <li><a href="http://isawcamera.es/descargas"><li> DESCARGAS </a></li>
</ul>
</div>

así que no sé cómo quitar el código sobrante... 😡

en el menú horizontal de arriba me funciona perfectamente, pero en este vertical me añade ese código que me lo desmadra y no sé porqué... :s

Usuario eliminado 42850 · 12 Abr 2014

lombervid dijo:
Eso de meter los li dentro de los a no está bien, lo que debes de hacer es, en lugar de ponerle el diseño a los li ponselo a los a dentro de los li.

¿Por qué no está bien? Funciona y es lo que Xanina quería :disturbed:

Xanina dijo:
la página la estoy haciendo en wordpress, así que el código lo meto en su sección de crear páginas...

yo meto este código en la página "soporte":

Insertar CODE, HTML o PHP:

<div id="menuizdo"> <p> SOPORTE </p> <ul style="list-style-type: none;"> <a rel="nofollow" href="http://isawcamera.es/soporte"> <li> GARANTÍA </li> </a> <li><a rel="nofollow" href="http://isawcamera.es/descargas"><li> DESCARGAS </a></li> </ul> </div>

pero al cargar la página y mirar el codigo fuente veo que me genera este otro código (marco en negrita lo que añade):

Insertar CODE, HTML o PHP:

<div id="menuizdo"> <p> SOPORTE </p> <ul style="list-style-type: none;"> <a rel="nofollow" href="http://isawcamera.es/soporte"> <li> GARANTÍA </li> <p> </a></p> <li><a rel="nofollow" href="http://isawcamera.es/descargas"><li> DESCARGAS </a></li> </ul> </div>

así que no sé cómo quitar el código sobrante... 😡

en el menú horizontal de arriba me funciona perfectamente, pero en este vertical me añade ese código que me lo desmadra y no sé porqué... :s

¿Usas la pestaña "Visual" en la sección de crear páginas? Si es así, deberías usar la pestaña "Texto" para añadir el HTML.

Xanina · 12 Abr 2014

lombervid dijo:
Eso de meter los li dentro de los a no está bien, lo que debes de hacer es, en lugar de ponerle el diseño a los li ponselo a los a dentro de los li.

¿quieres decir que no está aceptado por el w3c hacerlo así?

bertocoder · 12 Abr 2014

para que el a actue como bloque y no sea solo el texto sea enlace, tienes que poner <li><a style="display:block" href="#"> Texto</a></li>

Slds

lombervid · 12 Abr 2014

Zinxsk dijo:
¿Por qué no está bien? Funciona y es lo que Xanina quería :disturbed:

Porque la estructura de los ul es:

PHP:

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

Y no:

PHP:

<ul>
	<a href="">
		<li></li>
	</a>
	<a href="">
		<li></li>
	</a>
	<a href="">
		<li></li>
	</a>
</ul>

Y al hacer eso, estas rompiendo la estructura.

Xanina dijo:
¿quieres decir que no está aceptado por el w3c hacerlo así?

Y precisamente esto es lo que marca el W3C cuando haces eso:

Insertar CODE, HTML o PHP:

Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

Como ya mencione, lo que puede hacer es, en lugar de ponerle el estilo (medidas, color, etc) a los li, se los puede poner a los a que estan dentro, asi el enlace es todo el boton (o lo que sea) y los li se adaptan a su tamaño.

---------- Post agregado el 12-abr-2014 hora: 09:28 ----------

Aqui un ejemplo de como quedaria:

http://jsfiddle.net/GL2LD/3/embedded/result/

Xanina · 13 Abr 2014

Zinxsk dijo:
¿Usas la pestaña "Visual" en la sección de crear páginas? Si es así, deberías usar la pestaña "Texto" para añadir el HTML.

pues no, yo uso la pestaña texto, pq de html y css algo sé :witless:

de todos modos lo he solucionado con lo que me indicó Jxit3

el css ponlo así

nav ul li a{}
nav ul li a:hover {}

MUCHAS MUCHÍSIMAS GRACIAS A TODOS POR VUESTROS APORTES!! 😛8::encouragement:😛7:

CASO SOLUCIONADO!!!!!!

---------- Post agregado el 13-abr-2014 hora: 09:49 ----------

perfecto, bertocoder!!

lo había hecho con padding pero queda mucho mejor así... con display block 😛7::encouragement:

---------- Post agregado el 13-abr-2014 hora: 09:50 ----------

muchas gracias tb lombervid, lo primero es encontrar cómo solucionarlo, pero si además se puede hacer según el w3c mucho mejor!! :encouragement:😛7:

---------- Post agregado el 13-abr-2014 hora: 09:51 ----------

Jxit3 me has sido muy útil, lombervid dijo lo mismo, pero lo tuyo fue más clarificador :encouragement:

¿Cómo hacer que se pueda hacer click en todo el botón y no solo en el texto?

Xanina

Usuario eliminado 42850

Xanina

Usuario eliminado 42850

Feddy

lombervid

Jxit3

Xanina

Usuario eliminado 42850

Xanina

bertocoder

lombervid

Xanina

Temas similares