Foros del Web » Creando para Internet » CSS »

caja con bordes redondeados ajustable

Estas en el tema de caja con bordes redondeados ajustable en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/06/2011, 10:00
Avatar de jmorduna  
Fecha de Ingreso: noviembre-2009
Mensajes: 4
Antigüedad: 7 años, 1 mes
Puntos: 0
caja con bordes redondeados ajustable

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.
  #2 (permalink)  
Antiguo 30/06/2011, 00:52
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 6 años, 1 mes
Puntos: 9
Respuesta: caja con bordes redondeados ajustable

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

#caja {
border: 1px solid #ccc;
border-radius: 5px;
}
__________________
– You're on your own again.
  #3 (permalink)  
Antiguo 30/06/2011, 00:54
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 6 años, 1 mes
Puntos: 9
Respuesta: caja con bordes redondeados ajustable

Para que sea ajustable basta poner las medidas en porcentajes. Saludos.
__________________
– You're on your own again.
  #4 (permalink)  
Antiguo 30/06/2011, 01:39
 
Fecha de Ingreso: enero-2011
Mensajes: 60
Antigüedad: 6 años
Puntos: 0
Respuesta: caja con bordes redondeados ajustable

Cita:
Iniciado por whitefeathers Ver Mensaje
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 ...)
  #5 (permalink)  
Antiguo 30/06/2011, 02:34
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 6 años, 1 mes
Puntos: 9
Respuesta: caja con bordes redondeados ajustable

Aquí tienes una entonces solución:

http://css3pie.com/
__________________
– You're on your own again.
  #6 (permalink)  
Antiguo 30/06/2011, 02:45
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 6 años, 1 mes
Puntos: 9
Respuesta: caja con bordes redondeados ajustable

No deberías preocuparte por IE6...

http://gs.statcounter.com/#browser_v...-201101-201105
__________________
– You're on your own again.
  #7 (permalink)  
Antiguo 30/06/2011, 09:25
Avatar de jmorduna  
Fecha de Ingreso: noviembre-2009
Mensajes: 4
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: caja con bordes redondeados ajustable

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

Etiquetas: bordes, caja, redondeados
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 12:06.