Foros del Web » Creando para Internet » CSS »

Se me mueve todo al usar :hover

Estas en el tema de Se me mueve todo al usar :hover en el foro de CSS en Foros del Web. Hola, mi problema es el siguiente: Tengo una serie de imagenes (iconos) que quiero poner en linea. Al pasar por encima el raton quiero que ...
  #1 (permalink)  
Antiguo 17/09/2006, 05:58
 
Fecha de Ingreso: diciembre-2004
Mensajes: 278
Antigüedad: 13 años
Puntos: 0
Se me mueve todo al usar :hover

Hola, mi problema es el siguiente:
Tengo una serie de imagenes (iconos) que quiero poner en linea.
Al pasar por encima el raton quiero que se muestre el borde del div que los contiene y cambie el color de fondo del mismo.
El estilo que estoy usando es este:
Código HTML:
.img_boton
{	width:20px;
	height:20px;
	padding:1px;
	vertical-align:bottom;
	border:1px none #FFF;
	float:left;
}


.img_boton:hover
{	border:1px solid #286FB2;
	background:#AAD6FF;
}
.clear
{	clear:both;
}
El efecto que quiero lo consigo, pero todos los iconos se mueven ya que se suman 2 px al ancho del div sobre el que estamos, eso lo entiendo... pero como puedo evitarlo?
El codigo Html es este:

Código HTML:
<p>
<div class="img_boton"><a href="javascript:formatWord('mensaje','B');" title="negrita"><img src="img/text_bold.gif" /></a></div>
<div class="img_boton"><a href="javascript:formatWord('mensaje','I');" title="itálica"><img src="img/text_italic.gif" /></a></div>
<div class="img_boton"><a href="javascript:formatWord('mensaje','U');" title="subrayado"><img src="img/text_underline.gif" /></a></div>
<div class="img_boton"><a href="javascript:formatWord('mensaje','S');" title="tachado"><img src="img/text_strikethrough.gif" /></a></div>
<br class="clear"></p><textarea name="mensaje" id="mensaje" cols="60" rows="10"></textarea> 
Hasta incluso se mueve el textarea (esto supongo que poniendole un margin-top mas alto se evitaría).
Podria ser posible que tampoco se movieran las <img> dentro del div? que quedara en la misma posición? esque tambien bailan :S

Última edición por clinisbut; 17/09/2006 a las 06:08 Razón: Sobraba un [HTML]
  #2 (permalink)  
Antiguo 17/09/2006, 10:25
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 1 mes
Puntos: 3
Cita:
border:1px none #FFF;
el tipo de borde none es que no define borde, por lo cual lo quitas, y luego se lo pones por eso "brinca"

prueba con esto:
Cita:
border:1px solid transparent;
lo que te refieres con los margenes es algo asi..

Cita:
.img_boton
{ width:20px;
height:20px;
margin:1px;
vertical-align:bottom;
float:left;
}


.img_boton:hover

{ width:20px;
margin:0px;
height:20px;
border:1px solid #286FB2;
background:#AAD6FF;
}
como vez, te faltava quitarselo cuando esta en hover, ya que es cuando se le agrega el borde.
y segun el box model el borde esta entre el margen y el padding..
__________________
Saludos
FT.
www.fernando.com.mx
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 19:03.