boton con css

[Nicomadreja]

Hola..

a ver si me pueden ayudar con esto...

tengo un menu el cual para clickear tengo que posicionarme en el texto.. pero quiero que funcione al posicionarme en todo el td... que hago??

este es el codigo del menu y del css

Menu:

Código:

<table width="100%" height="65" border="0" cellspacing="0" cellpadding="0">
      <tr align="center">

        <td width="8%" valign="top" class="menu_bg"><a href="index.htm" class="menu_style">Home</a></td>
        <td width="11%" valign="top" class="menu_bg"><a href="servicios.htm" class="menu_style">Servicios</a></td>
        <td width="11%" valign="top" class="menu_bg"><a href="galeria.htm" class="menu_style">Galeria</a></td>
        <td width="11%" valign="top" class="menu_bg"><a href="contactos.htm" class="menu_style">Contactos</a></td>
        <td width="35%" align="right" class="menu_bg2"><a></a></td>
      </tr>
    </table>

Estilo:

Código:

.menu_bg {
	background-color: #333;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid #666;
}

.menu_style {
	font-family: "Agency FB", "Lucida Console";
	font-size: 24px;
	color: #FFF;
	text-decoration: none;
}

[ltzcoatl]

a la regla .menu_style ponle display:block y asi ya le puedes poner un ancho y un alto fijo a tus <a> y poder dar click en cualquier area y no solo en el texto.

Saludos.

[Nicomadreja]

gracias hermano!

[Nicomadreja]

tengo otra duda...

OK arregle ese problema.. pero tengo otro... resulta que tengo un icono puesto sobre cada tb con posicion relativa (los puse como imagen)

<img src="imagenes/Home.png" width="25" height="25" class="icohome"

.icohome {
position: relative;
top: -30px;
left: 35px;
}

el problema es que cuando posiciono el puntero sobre la imagen que esta dentro del menu me quita la opcion de clickear... asumo que esto se puede hacer poniendo la imagen como background en un div pero no quiero hacerlo asi porque las imagenes tienen diferentes tamaños y como background no se los puedo cambiar.. en cambio como imagenes si.

gracias..

[ltzcoatl]

puedes poner esa imagen como background a cada item de tu menu en este caso tendrias una regla por cada item de tu menu con la imagen que le corresponde, o tambien puedes poner la imagen dentro del anchor algo asi:

<a><img /></a>

Saludos.

[Nicomadreja]

exacto asi es que lo tengo.. tengo 4 imagenes puestas cada una con su regla.... que si .icohome .icoserv .icocont etc... el problema es que cuando paso el puntero por los items del menu especificamente por los iconos deja de mostrarme la manito osea el link para redireccionarme... y sip.. puedo poner esa imagen como backbround pero como tienen tamaños diferentes quedarian muy grandes y no quiero editar los archivos..
no hay una manera para bloquear esos iconos para que la funcion de :hover del menu no se bloquee cuando paso el puntero por ahi?

dejo mas codigo


.icohome {
position: relative;
top: -30px;
left: 35px;
}
.icoserv {
position: relative;
top: -30px;
left: 115px;
}
.icogal {
position: relative;
top: -30px;
left: 220px;
}
.icocont {
position: relative;
top: -30px;
left: 320px;
}


.................................................. .................................................. ........................................




<td><table width="100%" height="65" border="0" cellspacing="0" cellpadding="0">
<tr align="center">

<td width="8%" align="center" valign="top" class="menu_bg"><a href="index.htm" class="menu_style">Home</a></td>
<td width="11%" valign="top" class="menu_bg"><a href="servicios.htm" class="menu_style">Servicios</a></td>
<td width="11%" valign="top" class="menu_bg"><a href="galeria.htm" class="menu_style">Galeria</a></td>
<td width="11%" valign="top" class="menu_bg"><a href="contactos.htm" class="menu_style">Contactos</a></td>
<td width="35%" align="right" class="menu_bg2"><a></a></td>
</tr>
</table>

<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>

<img src="imagenes/Home.png" width="25" height="25" class="icohome" />
<img src="imagenes/servicios.png" width="25" height="25" class="icoserv" />
<img src="imagenes/galeria.png" width="25" height="25" class="icogal" />
<img src="imagenes/contactos.png" width="25" height="25" class="icocont" />

.......

[ltzcoatl]

aaa quieres que los items del menu tengan la imagen y despues el texto del item, algo asi como el boton citar de los mensajes del foro??

puedes usar la propiedad css z-index, cuando un objeto tiene un valor de z-index menor que otro aparece abajo de este, en este caso a la primera tabla tendria un valor por ejemplo de 100 y la segunda tabla, la de las imagenes, un valor de 99 asi la segunda tabla quedaria abajo de la primera. Aunque tendrias que revisar como se comporta en los diferentes navegadores.

la otra es como te dije pones de la imagen de background a tus <a> pero en la regla de estilo de cada item le agregas lo siguiente:

Código CSS:

background-repeat: no-repeat; /*para que no repita la imagen*/
background-position: left; /*mueve la imagen al lado que le indiques*/
/*le agrega espacio entre el margen y el texto, lo puedes utilizar para mover el texto y que no quede arriba de la imagen*/
/*si tu imagen tiene 25px de ancho le puedes poner 28 para que quede con un espacio entre imagen  y texto */
padding-left: 24px;
 

asi el item de tu menu te quedaria la imagen y despues el texto, asi como el boton citar.

te dejo un link con un tutorial de como hacer un menu con css y listas: Menu css con listas

[Nicomadreja]

gracias amigo.. aunque ya logre solucionarlo de otra manera... cambie el tamaño de los iconos al tamaño que necesitaba (25x25) y cree una propiedad para cada td en donde puse como backgrund su icono correspondiente y posicione el background con position X , Y....

no sabia sobre la propiedad z-index.. voy a leer mas sobre esa propiedad se ve interesante... trabaja como los DIV PA cuando le indicas una cantidad X mayor para que aparezca arriba de otras DIV... gracias nuevamente... saludos

pd: bueno el link qu mandastes, lo leere con calma..

bye