:before

Citar

Escrito el 19 Sep 2007 02:30 pm

Hola a todos,
Mi duda es la siguiente.
Tengo este código html:

Código :

<div id="caja_1">
<div class="caja_2">
<p>El Otoño son tres meses del año</p>
<p>El Otoño son tres meses del año</p>
</div>
</div>

y este código css:

Código :

#caja_1{
   width: 245px;
}
.caja_2{
   background-color: #FF9900;
   border: 2px solid #e1d4c0;
   padding: 8px;
}
.caja_2:before{
    content: url(imagenes/top.jpg);
}
.caja_2:after{
    content: url(imagenes/bottom.jpg);
}

El problema es que no se que esta mal para que no aparezcan ( en MozillaF, en IE ya se que no sale así) las imágenes.
Gracias de antemano. Un saludo
Leonor

Por Nornor

25 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Citar

Escrito el 19 Sep 2007 10:13 pm

Esto funciona en todos los browsers (o casi) menos en IE, y no has de poner url ni nada, simplemente codigo html entre comillas

content: "<img src='...' alt='imagen' />"

creo, porque no lo suelo usar debido a IE

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino

Envíale un mensaje privado Email Web

Barcelona

Citar

Escrito el 20 Sep 2007 12:32 am

Capt.Mahou escribió:

Esto funciona en todos los browsers (o casi) menos en IE, y no has de poner url ni nada, simplemente codigo html entre comillas

content: "<img src='...' alt='imagen' />"

creo, porque no lo suelo usar debido a IE

\El atributo content si permite el uso de url() entre otros, pero debería funcionar. De todas formas, prueba con la solución de Capt.Mahou, que debería funcionar también.

De todas formas, me parece que lo que quieres hacer es un contenedor de texto, colocando el gráfico de cabecera y pie que se agrande según el contenido.

Si eso es así, te podría comentar otras formas de hacerlo.

Por Yaraher

813 de clabLevel

1 tutorial

Envíale un mensaje privado Email Web

Callao, Perú

@yaraher

Citar

Escrito el 24 Sep 2007 08:45 am

Gracias por las aportaciones. Me son de gran ayuda. Lo que quiero hacer es un texto rodeado por esquinas redondeadas. Lo que escribí en un principio era para utilizar una imagen superior y otra inferior, pero no funciona de momento. Ahora he utilizado otra técnica ( dividiendo la imagen en 9 partes). El problema ahora es que surge una raya blanca ( en IE) enla parte inferior, justo por encima de las imágenes 8 y 9. Le he cambiado de todo pero no hallo el error. Espero que me podais ayudar. Os envio el código. Gracis y un saludo

Código :

<body>

<div class="contenido">
<div class="encabezamiento">
<h1><span>Encabezamiento</span></h1>
</div>
<div class="cuerpo-exterior">
<div class="cuerpo">
<div class="cuerpo-interior">
<p>Otoño dura tres meses</p>
<p>Otoño dura tres meses</p>
<p>Otoño dura tres meses</p>
<p>Otoño dura tres meses</p>
<p>Otoño dura tres meses</p>
</div>
</div>
</div>
<div class="pie-exterior">
<div class="pie">
<div class="pie-interior">
</div>
</div>
</div>
</div>
</body>

Código :

body{
   padding: 0px;
   margin: 0px;
   font: 12px sans-serif;
   background-color: #FFFFFF;
}
.contenido{
   color: #FFFFFF;
   background: url(../imagenes/bordes_01.png) top left;
   background-repeat: no-repeat;
}
.encabezamiento{
    background: url(../imagenes/bordes_03.png)  top right;
    background-repeat: no-repeat;
   }
.encabezamiento h1{
   background: url(../imagenes/bordes_02.png)  repeat-x top;
   font-size: 10px;
   height: 11px;
   line-height: 11px;
   margin: 0 17px 0 15px;
}
.encabezamiento h1 span{
   position: relative;
   top: 10px;
}
.cuerpo-exterior{
   background: url(../imagenes/bordes_04.png) left;
   background-repeat: repeat-y;
}
.cuerpo{
   background: url(../imagenes/bordes_06.png)  repeat-y right;
}
.cuerpo-interior{
   background: url(../imagenes/bordes_05.png);
   margin: 0 17px 0 15px;
   padding: 1px;
}
.cuerpo-interior p:first-child{
   margin-top: 0px;
   padding-top: 10px;
}
.cuerpo-interior p:last-child{
   margin-bottom: 0px;
   }
.pie-exterior{
   background: url(../imagenes/bordes_07.png) bottom left;
   background-repeat: no-repeat;
   }
.pie{
   background: url(../imagenes/bordes_09.png) bottom right;
   background-repeat: no-repeat;
}
.pie-interior{
   background: url(../imagenes/bordes_08.png) bottom;
   height: 12px;
   margin: 0 17px 0 15px;
   background-repeat: repeat-x;
}

Por Nornor

25 de clabLevel

Genero:Femenino

Envíale un mensaje privado

:before

Escribe una respuesta rapida