se mueven las capas al poner un borde

vitro012 · #1 (**permalink**) 19/03/2010, 01:37

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...!

Impostor · #2 (**permalink**) 19/03/2010, 04:44

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 originalborder-bottom:#CCCCCC 1px solid;
border-right:#CCCCCC 1px solid;

al hacer hover, el descuadre seguirá.

Saludos¡¡

Trypat · #3 (**permalink**) 19/03/2010, 12:53

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.

gabatx · #4 (**permalink**) 03/06/2010, 08:06

es el virus del doble acento