Me ganaste de mano,
kseso?. Le iba a explicar lo mismo ... pero me quedé pensando en algo ¿cómo se le da el tamaño a un elemento creado con
:before?. Yo lo intenté (creo que varias veces) y no me salió o no recuerdo cómo era.
Mira, quizá no valía la pena porque esto está en cualquier tutorial, pero lo mismo hice un ejemplo.
En la primer marquesina hay una imagen
sobre el texto desplazado. Tal como explicaste.
En la segunda usé
:after para meter la imagen (con un pequeño truco para no poner
:before) y se ve que aparece, pero no toma el tamaño.
Y en la tercera aproveché tu comentario,
FaNaTyCk, sobre usar CSS3, y no puse ninguna imagen.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
#marca:after {position: absolute; width: 475px; height: 325px;
content: url(http://img853.imageshack.us/img853/5572/degrad018my.png); }
</style>
</head>
<body style="background-color: rgb(10,10,110); color: rgb(10,10,110); ">
<div style="position: relative; width: 475px; height: 325px; ">
<img src="http://img853.imageshack.us/img853/5572/degrad018my.png"
width="475" height="325" style="position: absolute; top:0; left: 0;">
<marquee width="475" height="325" behavior="scroll" direction="up"
scrollamount="2" scrolldelay="125" style="font-size: 2em; text-align: center;
background-color: white"> acá <br>mi <br>texto <br>que <br>va <br>subiendo</marquee>
</div>
<hr>
<div id="marquesina2" style="position: relative; width: 475px; height: 325px; ">
<span id=marca></span>
<marquee id=marquesina2 width="475" height="325" behavior="scroll"
direction="up" scrollamount="2" scrolldelay="125" style="font-size: 2em;
text-align: center; background-color: white"> acá <br>mi <br>texto <br>que
<br>va <br>subiendo</marquee>
</div>
<hr>
<div style="position: relative; width: 475px; height: 325px; ">
<div style="position: absolute; width: 475px; height: 325px;
background: -webkit-linear-gradient(rgb(10,10,110), transparent);
background: -moz-linear-gradient(rgb(10,10,110), transparent);
background: -o-linear-gradient(rgb(10,10,110), transparent);
background: linear-gradient(rgb(10,10,110), transparent); "></div>
<marquee width="475" height="325" behavior="scroll" direction="up"
scrollamount="2" scrolldelay="125" style="font-size: 2em; text-align: center;
background-color: white"> acá <br>mi <br>texto <br>que <br>va
<br>subiendo</marquee>
</div>
</body>
</html> No sé, si se les ocurre cómo corregir el segundo, o al menos que se entienda por qué la posición sí la toma, pero las medidas, no ... me gustaría enterarme.
Gracias
furoya