Foros del Web » Creando para Internet » CSS »

Problema con esquinas redondeadas

Estas en el tema de Problema con esquinas redondeadas en el foro de CSS en Foros del Web. Hola a [email protected] Tengo una web con las tipicas "cajas con bordes redondeados" y hasta ahora todo iba bien, ya que el color de fondo ...
  #1 (permalink)  
Antiguo 15/03/2011, 11:31
 
Fecha de Ingreso: diciembre-2008
Mensajes: 10
Antigüedad: 9 años
Puntos: 0
Pregunta Problema con esquinas redondeadas

Hola a [email protected]

Tengo una web con las tipicas "cajas con bordes redondeados" y hasta ahora todo iba bien, ya que el color de fondo de la página era el mismo que el color de las esquinas de las imágemes que forman cada caja.

Pero ahora quiero poner una imagen de fondo por lo que pensé en hacer transparentes las esquinas de las imágenes para que no se viera así:



Yo pensaba que funcionaría, pero al hacer las esquinas transparentes he visto que la imagen central (caja central) "crece" hacia arriba y hacia abajo mostrando unas líneas que quedan bastante mal:



El Código CSS que uso:

.caja250 {
width: 250px;
background-image: url("centro250.gif");
background-repeat: repeat-y;
}

.cajaarriba250 {
background-image: url("arriba250.gif");
background-position: top center;
background-repeat: no-repeat;
}

.cajaabajo250 {
background-image: url("abajo250.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 10px 10px 10px 10px;
}

El Código HTML:

<div class="caja250">
<div class="cajaarriba250">
<div class="cajaabajo250">


<p style="margin-left: 10px; margin-right: 10px; margin-top: 5px; margin-bottom: 5px;">
<?php
include_once "lo que quiera que sea...";
echo $php....;
?></p>


</div>
</div>
</div>

He probado todo lo que se me ocurre y no soy capaz de dar con la solución. No se si tendré algun error de sintaxis (hasta ahora todo se mostraba bien) o tengo que añadir algo al código actual para que gráficamente se muestren bien las esquinas redondas.

Cualquier sugerencia será bienvenida.

Saludos cordiales a esta Comunidad.
  #2 (permalink)  
Antiguo 15/03/2011, 12:28
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: Problema con esquinas redondeadas

Yo la verdad utilizaría la nueva propiedad de CSS: border-radius.
Los navegadores más modernos la soportan de entrada y para los viejos podés usar esto:
http://fetchak.com/ie-css3/

Yo lo he utilizado mucho y da geniales resultados y es SUPER fácil de utilizar. Te hice un ejemplo:

http://nahueljose.com.ar/ejemplos/esquinas-redondeadas-css3/

Observá en el código fuente como lo he realizado. Es totalmente válido para tu asunto y te facilitará ENORMEMENTE el maquetado, quitando elementos que no tienen ningún significado en el HTML.

Podés probar ese ejemplo hasta en IE5.5 sin problemas :)
  #3 (permalink)  
Antiguo 15/03/2011, 13:03
 
Fecha de Ingreso: diciembre-2008
Mensajes: 10
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con esquinas redondeadas

Hola Naahuel, muchas gracias por tu pronta respuesta.

Entiendo que utilizando la nueva propiedad de CSS: border-radius con la variante de estilo para IE la página se mostrará correctamente en la mayoría de navegadores incluido IE en versiones anteriores.

El problema es que mi sitio web tiene ya bastantes páginas y tendría que hacer una inversión de tiempo considerable para reemplazar el código en cuestión.

Tendré tu propuesta muy en cuenta, pero esperaré un poco por si alguien me puede dar una solución que implique menor tiempo.

Muchas gracias y saludos!!
  #4 (permalink)  
Antiguo 15/03/2011, 13:27
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 9 meses
Puntos: 192
Respuesta: Problema con esquinas redondeadas

Yo particularmente no encuentro una solución a ese problema sin tener que recurrir a un cambio en el maquetado html, que es lo que no deseas.

Con mi consejo no necesitás cambiar nada más que el CSS (que supongo que lo tienes en un archivo externo) y agregar unas líneas a cada archivo que puede hacerse masivamente.

Podés dejar esa estructura que tenés ahora sin problemas, sólo utilizarías el contenedor más general (en tu caso caja250) a la cual le aplicaría el script que mencioné y las propiedades CSS para el borde.

Sin recurrir a esa solución, lo único que se me ocurre es utilizar tablas o bien algo como:

<div class="top"></div>
<div class="contenido"></div>
<div class"bottom"></div>

para cada caja, donde top y bottom tendrían una imagen como esta acá:
Código:
http://www.generateit.net/rounded-corner/rounded.php?sh=s&r=60&bw=20&bc=000000&bg=FF0000&fg=999999&w=300&f=png&aa=1&si=b&bgt=1&bt=&fgt=&tc=FFFFFF
. Que necesita ser de un ancho fijo. De esta forma los contendores no se superponen. Es lo único que se me ocurre, pero ninguna es una solución rápida como vos querés. Es importante que siempre tengas en cuenta que pueden surgir problemas así y utilizar siempre maquetado html limpio y reglas CSS externas a todos los archivos.
  #5 (permalink)  
Antiguo 15/03/2011, 13:43
 
Fecha de Ingreso: diciembre-2008
Mensajes: 10
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con esquinas redondeadas

Pues si, estoy viendo que tendré que decidirme por algo así y buscar un poco de tiempo (desgraciadamente no tengo todo el "css" en archivos externos y la web ha ido creciendo con ese "deficit")

Muchas gracias de nuevo, te lo agradezco de verdad.

Saludos.
  #6 (permalink)  
Antiguo 15/03/2011, 17:12
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problema con esquinas redondeadas

Creo que funcionaría cambiando el orden de anidamiento de los divs.
Prueba con esto:
Código HTML:
Ver original
  1. <div class="cajaabajo250">
  2.   <div class="cajaarriba250">
  3.     <div class="caja250">
  4.       ...
  5.     </div>
  6.   </div>
  7. </div>
  #7 (permalink)  
Antiguo 16/03/2011, 12:41
 
Fecha de Ingreso: diciembre-2008
Mensajes: 10
Antigüedad: 9 años
Puntos: 0
Respuesta: Problema con esquinas redondeadas

Hola "sanxuan". Me has puesto en la pista correcta ya que aunque no funcionó el orden de anidamento que me proponías, he probado con este orden:

Código HTML:
<div class="cajaarriba250">
	<div class="cajaabajo250">
	     <div class="caja250">
          </div>
     </div>
</div> 
Y después he modificado el CSS cambiando esto:

.cajaabajo250 {
background-image: url("abajo250.gif");
background-position: bottom left;
background-repeat: no-repeat;
padding: 10px 10px 10px 10px;

Por este otro:

.cajaabajo250 {
background-image: url("abajo250.gif");
background-position: bottom center;
background-repeat: no-repeat;
padding: 10px 10px 10px 10px;

El resultado es el que yo pretendía:



Muchas gracias a ti, a "Naahuel" y al Foro.

Etiquetas: esquinas, redondeadas
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 06:21.