PNG sobre un texto

Hola, antes que nada me presento. Soy Paco de cádiz y estoy haciendo un proyecto de web. He aprendido bastante HTML y CSS de esta web ya que todo se explica muy bien. En cuanto haya hecho el diseño me pondré con PHP y MySQL para no tener que hacerlo todo a "mano".

Bueno, a lo que iba. Estoy haciendo una web retro sobre recreativas y quiero que dentro de un div con una imagen de una pantalla irá el texto de la web en un iframe, pero quiero emular la pantalla lo mejor posible. Para ello necesito poder poner una imagen fija en png pero que quede por encima del texto (el iframe) y la verdad no sé por dónde empezar. He probado lo típico, con floats, varias imágenes usando CSS3, etc. No he conseguido nada y la verdad es que no sé si se puede hacer al menos ya que mis conocimientos de CSS y HTML son aún muy básicos. Lástima que no haya sabido cuando estudiaba que el código era tan apasionante... [:(]

Sin más un saludo.

Lo he conseguido hacer, pero no me convence. El resultado es impecable pero a nivel de código parece "chapucero".

Si alguien conoce otra forma, por favor que lo diga.

#reflejos {
	position:absolute;
	z-index:0;
	left:187px;
	top:360px;
	width:900px;
	height:900px;
	background-color:transparent;
	background:url(images/brillo.png) no-repeat, url(images/reflejo.png) no-repeat;
}

Y si creas un div y le pones el fondo que quieres?

Por ejemplo,

En el HTML, pones esto:

<div id="[COLOR="lime"]fondo[/COLOR]">
TEXTO QUE QUIERES PONER
</div>

Y en el CSS, pones esto:

#[COLOR="lime"]fondo [/COLOR]{
background-color: transparent;
background: url([COLOR="red"][B]URL DEL FONDO[/B][/COLOR]);
width: [COLOR="red"]900[/COLOR]px;
height: [COLOR="red"]900[/COLOR]px;
}

Si eso ya lo tiene. Para que me entendais voy a explicar qué es lo que quiero hacer.

El texto irá en un div con el fondo de una pantalla de recreativa CRT tipo monitor de PC antiguo. Y como todas las pantallas de recreativa tienen un cristal protector y siempre tenía algún reflejo el cual quiero poner justo encima para emular perfectamente el reflejo.

Por eso lo de otro div encima como he hecho. Obviamente y como alguno ya se habrá figurado... esto ahora tiene pelea con los tipos de navegador que interpretan de forma diferente y si en safari sale bién, en firefox sale un poco a la derecha, en chorme un poco más a la derecha y IE ni lo quiero ver XD

Saludos.

Lo que quieres hacer se puede, es cuestión de jugar con las profundidades en las capas, sin embargo lo último que señalas, también es cierto. Y por que no te evitas enredos y lo haces con photoshop ?

[contenido no disponible]

Saludos.

Pues digamos que no puedo porque el texto será html y es más, si puedo será un iframe para que la pantalla suba y baje. Vamos, que no será un texto fijo, será el contenido de la web.

De todas formas he pillado por ahí un script que supuestamente detecta el navegador que usa y carga un CSS específico para cada uno. Aunque sólo veinte preparado para el chrome y no sé cómo se nombran los demás. Aquí te dejo el javascript por si le sirve a alguien.

<script type="text/javascript">
if (navigator.userAgent.toLowerCase().match('chrome')
document.write('<link rel="stylesheet" type="text/css" href="stylechr.css">');
</scri

Sino hay otra forma, tendré que tirar de javascript para evitar el descuadre y un css por navegador, que no es mucho trabajo ya que sólo sería cambiar el nombre y editar lo que falle.

Sólo quieres usar el iframe para poder hacer scroll? En ese caso no hace falta usar un iframe, puedes usar la propiedad overflow de CSS

http://www.comocreartuweb.com/ejemplo-con-divs/mas-sobre-capas/over…

Hola, hasta donde yo sé (si no han cambiado las cosas)... google posiblemente pase olimpicamente del contenido que envuelva el Iframe, por que no puede indexar el contenido del iframe por sus propios métodos.
Quien te garantiza que google a cambiado la filosofía, quieres correr el riesgo..?? por que piensas que es más bonito estéticamente...??
No quiero meterte miedo, pero si tu sitio te importa, lee en google sobre los iframe y saca tus propias conclusiones.

Aquí el amigo Doodleo te dá un buen consejo..

Doodleo escribió:Sólo quieres usar el iframe para poder hacer scroll? En ese caso no hace falta usar un iframe, puedes usar la propiedad overflow de CSS

suerte

Bueno, pues ya tengo solucionado esto jeje pero sigo sin saber si es mejor un CSS para cada navegador o hay alguna forma de hacer lo que menciono.

Saludos.

Preferiblemente es mejor usar un sólo CSS para cada navegador, así tienes menos lío.

Pero si hay alguna cosa que no puedes, tendrás que usar un CSS para cada navegador o hacer algún apaño

Un saludo

Pero cómo lo hago? ¿Usando el javascript este que he pegado? Supongo que sustituyendo "chrome" por "ie", "firefox", etc no?

Quizás esto te sirva: http://www.desarrolloweb.com/articulos/estilos-css-distintos-navega…