Foros del Web » Creando para Internet » CSS »

boton con css

Estas en el tema de boton con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/07/2010, 10:30
 
Fecha de Ingreso: marzo-2009
Mensajes: 35
Antigüedad: 8 años, 9 meses
Puntos: 0
boton con css

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;
}
  #2 (permalink)  
Antiguo 02/07/2010, 10:51
 
Fecha de Ingreso: febrero-2007
Mensajes: 46
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: boton con css

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.
  #3 (permalink)  
Antiguo 02/07/2010, 11:12
 
Fecha de Ingreso: marzo-2009
Mensajes: 35
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: boton con css

gracias hermano!
  #4 (permalink)  
Antiguo 02/07/2010, 11:44
 
Fecha de Ingreso: marzo-2009
Mensajes: 35
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: boton con css

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..
  #5 (permalink)  
Antiguo 02/07/2010, 11:50
 
Fecha de Ingreso: febrero-2007
Mensajes: 46
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: boton con css

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.
  #6 (permalink)  
Antiguo 02/07/2010, 12:02
 
Fecha de Ingreso: marzo-2009
Mensajes: 35
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: boton con css

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" />

.......
  #7 (permalink)  
Antiguo 02/07/2010, 12:38
 
Fecha de Ingreso: febrero-2007
Mensajes: 46
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: boton con css

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:
Ver original
  1. background-repeat: no-repeat; /*para que no repita la imagen*/
  2. background-position: left; /*mueve la imagen al lado que le indiques*/
  3. /*le agrega espacio entre el margen y el texto, lo puedes utilizar para mover el texto y que no quede arriba de la imagen*/
  4. /*si tu imagen tiene 25px de ancho le puedes poner 28 para que quede con un espacio entre imagen  y texto */
  5. 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

Última edición por ltzcoatl; 02/07/2010 a las 12:50
  #8 (permalink)  
Antiguo 02/07/2010, 13:08
 
Fecha de Ingreso: marzo-2009
Mensajes: 35
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: boton con css

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


Etiquetas: botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:24.