Problema con esquinas redondeadas

[abel_dg]

Hola a tod@s.

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.

[Naahuel]

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 :)

[abel_dg]

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!!

[Naahuel]

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.

[abel_dg]

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.

[sanxuan]

Creo que funcionaría cambiando el orden de anidamiento de los divs.
Prueba con esto:

Código HTML:

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

[abel_dg]

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.