Foros del Web » Creando para Internet » CSS »

Caja con CSS

Estas en el tema de Caja con CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/04/2007, 22:45
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Caja con CSS

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
  #2 (permalink)  
Antiguo 18/04/2007, 11:55
 
Fecha de Ingreso: noviembre-2005
Mensajes: 312
Antigüedad: 12 años
Puntos: 1
Re: Caja con CSS

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.
  #3 (permalink)  
Antiguo 18/04/2007, 13:28
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Re: Caja con CSS

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
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 11:10.