Formularios con bordes redondeados que se extienda.

[Rodro]

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!

[Ricky77]

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.

[mbavio]

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.

[Rodro]

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!