caja con bordes redondeados ajustable

[jmorduna]

Hola, soy nuevo en esto del css y me ha surgido un problema:



Esta es la caja que quiero crear, quiero que sea ajustable conforme el usuario haga grande o pequeña la pagina. Luego ya pondria yo los limites de max y min, el problema es que solo logro que se ajusten las lineas horizontales de arriba y abajo, este es el codigo que tengo

Código:

<div class="medio">

<div class="arriba">

<div class="centro_t">

			<div class="der_t">
        
				<div class="izq_t">
                
                </div>
                
			</div>   
          
           
                
</div>

</div> <!--- arriba -->

<div class="centro_s">

			<div class="der_s">

	 	 		<div class="izq_s">
                
                </div>
           
         	</div>
           
</div>

<div class="abajo">

<div class="centro_b">

			<div class="der_b">
        
				<div class="izq_b">
                
                </div>
                
			</div>   
             
                
</div>

</div> <!--- abajo -->

</div> <!--- medio -->

y del css:

Código:

body {

	background-color:#C00;

}

.arriba {
	
	
	}


.izq_t {
	min-height:100px;
	min-width:100px;
	background-image:url(../images/estilo/izq_t.png);
	background-repeat:no-repeat;
	background-position:top left;
}

.der_t {
	min-height:100px;
	min-width:100px;
	background-image:url(../images/estilo/der_t.png);
	background-repeat:no-repeat;
	background-position: top right;

}

.centro_t {
	
	min-height:100px;
	min-width:100px;
	background-image:url(../images/estilo/linea_t_b.png);
	background-repeat:repeat;
	
}

.medio {
	
	
	
	}

.izq_s {
	
	min-height:100px;
	min-width:100px;
	background-image:url(../images/estilo/linea_i_d.png);
	background-position:left;
	background-repeat:repeat-y;
	
	
	
}

.der_s {
	
	
	min-height:100px;
	min-width:100px;
	background-image:url(../images/estilo/linea_i_d.png);
	background-position:right;
	background-repeat:repeat-y;
	
	
}

.centro_s {
	
	min-height:100px;
	min-width:100px;
	background-color:#DD0;
	
}

.abajo {
	
	
	}


.izq_b {
	min-height:100px;
	min-width:100px;
	background-image:url(../images/estilo/izq_b.png);
	background-repeat:no-repeat;
	background-position:bottom left;
}

.der_b {
	min-height:100px;
	min-width:100px;
	background-image:url(../images/estilo/der_b.png);
	background-repeat:no-repeat;
	background-position: bottom right;

}

.centro_b {
	
	min-height:100px;
	min-width:100px;
	background-image:url(../images/estilo/linea_t_b.png);
	background-repeat:repeat;
	
}

Me interesaria que tambien se ajustase la altura de la web, agradecera cualquier ayuda.

[whitefeathers]

No lo hagas así, para eso está css3:

#caja {
border: 1px solid #ccc;
border-radius: 5px;
}

[whitefeathers]

Para que sea ajustable basta poner las medidas en porcentajes. Saludos.

[Jsc_dark25]

Iniciado por whitefeathers

No lo hagas así, para eso está css3:

#caja {
border: 1px solid #ccc;
border-radius: 5px;
}

CSS3 no soporta en todas las versiones de los navegadores ( IE6, IE7, IE8, etc ...)

[whitefeathers]

Aquí tienes una entonces solución:

http://css3pie.com/

[whitefeathers]

No deberías preocuparte por IE6...

http://gs.statcounter.com/#browser_v...-201101-201105

[jmorduna]

mmm... Vale, ire probando soluciones, gracias!