Foros del Web » Creando para Internet » CSS »

Formularios con bordes redondeados que se extienda.

Estas en el tema de Formularios con bordes redondeados que se extienda. en el foro de CSS en Foros del Web. Hola, espero me puedan ayudar les dejo mi inquietud, yo tengo un formuario que debe estar dento de un marco com bordes redondeados, ese no ...
  #1 (permalink)  
Antiguo 06/09/2007, 11:00
 
Fecha de Ingreso: junio-2007
Mensajes: 253
Antigüedad: 10 años, 6 meses
Puntos: 0
Pregunta Formularios con bordes redondeados que se extienda.

Hola, espero me puedan ayudar les dejo mi inquietud, yo tengo un formuario que debe estar dento de un marco com bordes redondeados, ese no es el problema porq lo podría hacer con una imagen de fondo, pero el problema es que al ir escogiendo opciones de dicho formulario este va incrementando su tamaño y no se como puedo lograr que se incremente juntamente con el fondo.

Si hay alguna manera de hacerlo y si alguien me puede ayudar se lo agradecería mucho. Hasta pronto!
  #2 (permalink)  
Antiguo 06/09/2007, 11:24
 
Fecha de Ingreso: abril-2007
Mensajes: 18
Antigüedad: 10 años, 8 meses
Puntos: 0
Re: Formularios con bordes redondeados que se extienda.

Tienes dos opciones:



1- Utilizar el -moz-border-radius para redondear los bordes

Para usarlo:

Código:
xxx {
  border: 2px solid black;
  width: 400px;
  height: 400px;
  /* ahi van los valores para redondear por ejemplo más los lados de la derecha que los de la izquierda, para otras opciones usa ingeniería inversa ;) */
  -moz-border-radius: 10px 200px 200px 10px;
(aunque sólo te servirá para navegadores mozilla)


2- Introduce el formulario en un div general y añade en su interior dos div más. Uno sobre el form y otro debajo.

Dale a ambos divs el width y height que creas necesario y de background le pones la imagen que quieras para redondear los bordes.

Luego en el formulario le das el estilo que vaya en acorde a las imagenes y eliminas los bordes superiores para que case sin problema con las imagenes contenidas en los divs.

De ese modo por mucho que estires el formulario los bordes permanecerán inamovibles.


El html sería Algo así:

Código:
<div id="container">
<div class="superior"></div>
<form></form>
<div class="inferior"></div>
</div>
Si deseas que la página valide deberas meter algo de texto en los divs. Para que no se vea puedes hacer que tengan el mismo color que el fondo, o le puedes meter un text-indent: -50000px; para que te envíe el texto a cuenca y no lo vea nadie.
  #3 (permalink)  
Antiguo 06/09/2007, 14:15
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: Formularios con bordes redondeados que se extienda.

Recursos para esquinas redondeadas.

Una aclaracion: la primera solucion de Ricky no es estandar, por lo cual tu css no validara. Es una opcion propietaria de Mozilla, que solo se aplica a Firefox. Se supone que en CSS3 se agregará esta propiedad, pero estamos hablando de que quizas estemos viviendo en la luna para cuando IE lo implemente...

Saludos.
  #4 (permalink)  
Antiguo 06/09/2007, 17:17
 
Fecha de Ingreso: junio-2007
Mensajes: 253
Antigüedad: 10 años, 6 meses
Puntos: 0
Pregunta Re: Formularios con bordes redondeados que se extienda.

gracias por contestar, yo he estado implementando esto tengo un div de la siguiente manera:

div#form
{
padding:0px;
padding-left:20px;
padding-bottom:0px;
width:430px;
float:left;
background:url(../images//img1.gif) repeat-y center;
}
#form h1
{
background:url(../images/img2.gif) no-repeat top;
width:430px;
}
#form h2
{
background:url(../images/img2.gif) no-repeat center bottom;
width:430px;
}

y el html de la siguiente manera:

<div id="form">
<h1></h1>
<div class="otro"><label>Nombre:</label>
<asp:TextBox id="txt_nombre" runat="server" ></asp:TextBox>
</div>
<div class="otro"><label>Apellidos:</label>
<asp:TextBox id="txt_apellidos" runat="server" ></asp:TextBox>
</div>
<div class="otro"><label>Contraseña:</label>
<asp:TextBox ID="txt_contrasena" runat="server" ></asp:TextBox>
</div>
<div class="otro"><label>Confirmar Contraseña:</label>
<asp:TextBox ID="txt_confirma" runat="server" ></asp:TextBox>
</div>
<h3></h3>
</div>

Esto es solo un pequeño del html porq en realidad es muy extenso y al dar clic algunos botones aparecen aun mas campos, ahora bien ya logro hacer que salga el entorno con esas tres imagenes pero todo salen un relajo no se como hacer para que todo salga bien cuadrado.

gracias!
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:04.