Foros del Web » Creando para Internet » CSS »

Forzar a aparecer una imagen con CSS

Estas en el tema de Forzar a aparecer una imagen con CSS en el foro de CSS en Foros del Web. Me preguntaba si se puede definir con el CSS un estilo que lleve incorporada una imagen justo antes de aparecer las primeras letras, sin hacer ...
  #1 (permalink)  
Antiguo 03/07/2004, 23:20
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
Forzar a aparecer una imagen con CSS

Me preguntaba si se puede definir con el CSS un estilo que lleve incorporada una imagen justo antes de aparecer las primeras letras, sin hacer el truco de colocar esa imagen como fondo y conseguir que encaje justo antes de las primeras letras.

No sé si me he explicado, para variar.
  #2 (permalink)  
Antiguo 08/07/2004, 08:00
Avatar de amanda75  
Fecha de Ingreso: junio-2003
Ubicación: cerca, pero no mucho
Mensajes: 684
Antigüedad: 14 años, 6 meses
Puntos: 0
Puedes definir los párrafos como una lista y en el css determinar que, en vez de que aparezca un punto, que aprezca una imagen y le das la dirección

<ul>(puedes dejarlo vacio)
<li> (párrafo 1)</li>
<li> (párrafo 2)</li>
<li> (párrafo 3)</li>
</ul>

y en el css
li { list-style-image:url(mi_carpeta/mi_imagen.png)}

Última edición por amanda75; 08/07/2004 a las 18:35
  #3 (permalink)  
Antiguo 08/07/2004, 13:48
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
Muchas gracias.

¿Habrá algún modo de hacerlo sin definir una lista? Por ejemplo, ¿podría definirse para una clase?
  #4 (permalink)  
Antiguo 08/07/2004, 18:28
Avatar de amanda75  
Fecha de Ingreso: junio-2003
Ubicación: cerca, pero no mucho
Mensajes: 684
Antigüedad: 14 años, 6 meses
Puntos: 0
Pues si señora Al decirlo tú me acordé que había leído "algo" en "alguna parte". No lo he utilizado nunca, te hago un copy-paste directamente desde mis apuntes, a ver si te sirve

:before y :after

Cita:

Con los pseudo-elementos :before (antes) y :after (después) se puede insertar un contenido antes o después de un elemento determinado y definir el estilo del contenido insertado. La propiedad 'content', junto con estos pseudo-elementos, especifican lo que se inserta.

Podemos lograr que antes de cada elemento <H3> aparezca el texto "Tema:" sin necesidad de tener que escribirlo en cada título. También podemos hacer que cada párrafo termine con un pequeño ícono o poner "Fin" al pie de cada página usando las siguientes reglas.

H3:before {content: "Tema: "}
P:after {content: url("icono.gif")}
BODY:after {content: "Fin"; display: block;}

En la última regla hemos especificado también "display: block" para que la palabra "Fin" comience en una nueva línea (como si fuese un nuevo párrafo).

  #5 (permalink)  
Antiguo 08/07/2004, 18:40
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
Hala, qué bien, muchísimas gracias, de verdad. :)
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:18.