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

  • Autor Autor Xanina
  • Fecha de inicio Fecha de inicio
X

Xanina

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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?
 
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:
 
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:
 
¿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á.
 
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
 
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.
 
el css ponlo así

nav ul li a{}
nav ul li a:hover {}
 
¿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
 
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:

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.
 
Última edición por un moderador:
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í?
 
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
 
¿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.

¿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/
 
Última edición:
¿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:
 
Última edición:
Atrás
Arriba