Foros del Web » Creando para Internet » CSS »

se mueven las capas al poner un borde

Estas en el tema de se mueven las capas al poner un borde en el foro de CSS en Foros del Web. Hola, tengo un código sencillo, de hecho es un solo formulario, y ya he manejado Css antes, pero no me habia pasado que se movieran ...
  #1 (permalink)  
Antiguo 19/03/2010, 02:37
 
Fecha de Ingreso: marzo-2009
Mensajes: 133
Antigüedad: 8 años, 8 meses
Puntos: 4
se mueven las capas al poner un borde

Hola, tengo un código sencillo, de hecho es un solo formulario, y ya he manejado Css antes, pero no me habia pasado que se movieran las capas, es decir, al aumentar un borde o aumentar el tamaño del texto(en el :hover) se ve como se mueve el contenido que está abajo del formulario, esto al poner y quitar el puntero del boton submit.



Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title><style type="text/css">
<!--

form{background:#FFFF66;
color:#FF0000;
margin-top:50px;
margin-left:200px;
width:350px;
padding:8px;
padding-left:20px;
border-style:wave;
}

#button{
color:#FF0000;
background:#fff;
border-bottom:#CCCCCC 1px solid;
border-right:#CCCCCC 1px solid;
}

#button:hover{
color:#FF0000;
background:#fff;
border-bottom:#aaa 6px solid;    /* Al aumentar tamaño del borde */
 border-right:#aaa 2px solid;      /* se modifican las capas de abajo */
/*cursor:pointer; */

}

input{
background:#ECFFEC;

}




-->
</style>
</head>

<body>
<form id="form1" name="form1" method="GET" action="">

  <label for="DL">envio</label>
  <input type="text" name="AWB" id="L" />
  
 
  <label for="button"> </label>
  <input type="submit" name="button" id="button" value="buscar" />
  
  
</form> 
Contenido que de mueve al poner y quitar el puntero del boton. Contenido que de mueve al poner y quitar el puntero del boton. Contenido que de mueve al poner y quitar el puntero del boton. Contenido que de mueve al poner y quitar el puntero del boton.







De hecho no sé si nunca me habia pasado por que normalmente uso varias capas!
Podrian decirme cómo puedo solucionar esto que realmente ya no sé si es simple.


Por su ayuda gracias...!
  #2 (permalink)  
Antiguo 19/03/2010, 05:44
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: se mueven las capas al poner un borde

Buenas,

lo que te ocurre es lo mas normal del mundo, es css en estado puro. Si aumentas el borde de una capa, vas a modificar su ancho, con lo que esto implica. Pero realmente no entiendo tu pregunta, ya que creo que eres consciente de lo que sucede.

Es decir mientras varies esto

Código CSS:
Ver original
  1. border-bottom:#CCCCCC 1px solid;
  2. border-right:#CCCCCC 1px solid;

al hacer hover, el descuadre seguirá.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 19/03/2010, 13:53
 
Fecha de Ingreso: febrero-2008
Mensajes: 38
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: se mueven las capas al poner un borde

Vamos a poner un ejemplo chorras...

Si yo tengo un vaso lleno de agua y echo mas agua, lo que va a pasar es que el agua no cabe y el agua se cae.
Aqui pasa lo mismo, el div se crea con el tamaño correspondiente a los elementos que tiene dentro, si cambio el tamaño de esos elementos y ocupan mas pues el tamaño del div aumenta.
Solucion 1: define el div con un tamaño de tal manera que al hacer el hover el contenido siga cabiendo en el div.
Solucion 2: para que cambias los bordes, no es algo que se use mucho. Cambia el color, el tipo de letra o el fondo del boton y solucionado ademas que esteticamente es mejor.

p.d. perdon por no poner ningun acento pero el puñetero teclado no me deja salen dos en vez de uno y la tecla sin acentuar a ver si lo arreglo.
  #4 (permalink)  
Antiguo 03/06/2010, 09:06
 
Fecha de Ingreso: mayo-2010
Mensajes: 3
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: se mueven las capas al poner un borde

es el virus del doble acento

Etiquetas: capas, poner, bordes
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 23:34.