Caja con CSS

[sjam7]

Hola, quiero hacer esto con css puro pero no se como si es que se puede:



quisiera que los textos fueran eso, texto y la unica imagen serian los redondeos de la franja de fondo del titulo y obviamente el anillo, la caja en si ya la tengo, solo me faltaria el solapamiento del anillo, actualmente tengo la caja asi:

HTML:

Código:

            <div style="width:95%; margin:10px 0 10px 15px; background-color:#f1f1f1; height:34px">
                <div class="fondo_enc_izq"></div>
                <div class="fondo_enc_der"></div>
                <div class="fondo_enc">CONOZCA NUESTRO CATALOGO</div>
            </div>
            
            <div style="margin:10px 0 10px 15px;">
                Contenido de informacion y breve introduccion al catalogo de productos, mas abajo se listaran las categorias ordenadas por el tipo de productos
            </div>

            <div style="margin:10px 0 10px 15px; border-top:1px solid #999; padding-top:10px">
                 <table border="0" STYLE="margin-left:20px">
                 <tr>
                 <td width="100"> • ANILLOS<BR>
                  • ARETES<BR>
                  • COLLARES<BR>
                 </td>
                 <td> • PRENDEDORES<BR>
                  • RELIGIOSOS<BR>
                  • COLECCIONES <BR>
                 </td>
                 </tr>
                 </table>
            </div>

CSS:

Código:

.fondo_enc {
    background-color:#f1f1f1;
    font-size:18px;
    font-weight:bold;
    height: 20px;
    margin: 0px 5px 0px;
    padding:7px 0 7px 10px;
}


.fondo_enc_der {
    float: right;
    background-image: url(images/bder.gif);
    background-repeat:no-repeat;
    width: 6px;
    height: 34px;
}

.fondo_enc_izq {
    float: left;
    background-image:url(images/bizq.gif);
    width: 6px;
    height: 34px;
}

La tabla del HTML la uso por que es simplemente una prueba del contenido, ya la refinare con listas, los demas estilos tambien los tengo directamente en el HTML para facilitar su lectura aqui.

Por otro lado uso clases en lugar de ID's por que pienso usar las mismas para mas encabezados

Espero su ayuda, de antemano gracias

[Algadir]

Si te sirve de ayuda, prueba a buscar en el google las "Nifty Cube". Son como utilidades, hojas de estilo, javascript y con varios ejemplos de como poder hacer cajas como la que dices y con esquinas redondeadas sin usar imágenes. De todas formas si tienes la página donde aparece la caja siempre te puedes descargar la página con css y todo y estudiar el código en tu ordenador.

Espero que te haya ayudado aunque sea un poquito.

Saludos.

[sjam7]

gracias, a final de cuentas lo que busco no es lo de las esquinas redondeadas sino la colocacion de la imagen, en este caso de un anillo encimada al encabezado, eso es lo que quisiera saber como se hace...gracias de todos modos