Estudio de otro cuadro de bordes redondeados css

VaMOS A VER LO QUE NOS CUENTAN AQUI

Hasta que CSS3 sea compatible, no hay otra manera que utilizar imágenes.
Las imágenes que hacen falta son:

• Un trozo del borde derecho
• La esquina de arriba a la izquierda combinada con la parte de arriba muy larga
• La esquina de arriba a la derecha
  
• Un peazo del borde derecho
• La esquina de abajo a la izquierda junto con la parte de abajo muy larga
• La esquina de abajo a la derecha

Las figuras combinadas, hace que solo necesitemos 6 pero dos de ellas tienen el ficherete mas grande pero por contra, el navegador trabaja menos para hacer el cuadradito . Esto también limita el ancho de la página, pero esto no puede ser problema. Podrian tambien combinarse las otras esquinas, pero el tamaño vertical de las ventanas si que puede ser bastante largo, por lo que quedaría fea la ventanita.

La capa principal

La primera cosa a hacer es crear una capa principal a la que le pongamos el ladito izquierdo y decirle que el ancho es variable.

El CSS será :
#liquid-round {
width:70%; /* optativo, el que queramos */
margin:0px auto; /* esto nos centrara , salvo el caso de ie5+ en este caso  necestamos que el padre tenga el text-align:center */
background:#fff url(http://www.search-this.com/rounded/leftside.gif) repeat-y left top;
}

MIRAR EL RESULTADO:

---

hola amigos

---

Aahora la parte de arriba:
en un div ponemos la parte de arriba e esquina de la izquierda
y en un span ponemos la esquina arriba derecha
CSS:
.top {
width:100%;
height:20px;/* ???? porque es la anchura del dibujito*/
background:url(http://www.search-this.com/rounded/top.gif) no-repeat left top;
}
.top span {
display:block;
position:relative;
height:20px;
background:url(http://www.search-this.com/rounded/top-right.gif) no-repeat right top;

}

div principal
div top
span top
contenido

MIRAR EL RESULTADO:

---

xhola amigoss

---

El derecho
.center-content {
position:relative;
background:url(http://www.search-this.com/rounded/rightside.gif) repeat-y right top;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}

div principal
div top
span top
div derecho
contenido

MIRAR EL RESULTADO:

---

hola amigos

---

Y por fin la parte de abajo
que es mas o menos simetrica a la de arriba

div principal
div top
span top
div derecho
contenido
div abajo
span abajo

CSS:
.bottom {
height:60px;
background:url(http://www.search-this.com/rounded/bottom.gif) no-repeat left bottom;
}


.bottom span {
display:block;
position:relative;
height:60px;
background:url(http://www.search-this.com/rounded/bottom-right.gif) no-repeat right top;
}
MIRAR EL RESULTADO:

---

hola amigos

---

En resumen el contenido queda asi:

<div><div><span></span></div><div>
contenido

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

Resumen :
Un lio de cuidao.
Solo le veo salida con un programa que te lo ponga utomáticamente, o un java que te gestione estos contenidos.
cuidado, que el blogger cambia algo los resultados y a lo mejó, el resultado no se ve claramente.

¿Que pasa con las transparencias?
Las imágenes que nos dan de pruebas no tienen trasparencias. Pero supongo ???? que funcionarán o se veran los palitos largos encimandose en las esquinas (jua).
Si no funcionan las trasparencias es un rollo porque nos da por saco en los diseños, porque hay que cuidar el fondo.


MIRAR EL RESULTADO con transparencias:

---

hola amigos

---

Obsservar como se asoman los palitos por las esquinas de la izquierda.
Me lo temía.
Y ahora que.
En fin.

xxxxxx