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
