Comunidad de diseño web y desarrollo en internet online

Centrar SWF en xHTML con CSS

Este pequeño tutorial es sobre "como centar una película SWF usando xHTML y CSS", lo hago debido a que existe un tutorial similar, pero hecho con tablas (Centrado de SWF de Flash en HTML), así que para los que deseen aprender el correcto uso del CSS y XHTML, ahí les va:

Sin importar la resolución del monitor, sistema operativo o navegador en que veamos la película, esta se ajustará a la mitad de la pantalla, como ejemplo tomaré las mismas medidas del otro tutorial, 720x420px, una imagen que cabe perfectamente en un monitor con una resolución mínima de 800x600.

El documento puede estar declarado como stricto o transicional, para este ejemplo usaré Transicional:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Ahora colocaremos entre las etiquetas body del documento una división y le colocaremos una clase llamada "swfcentro" y dentro de esta división colocaremos nuestra pelicula SWF (no importa el metodo de inserción de SWF, personalmente uso el método SATAY):

Código :

<body>
<div class="swfcentro">
<object type="application/x-shockwave-flash" data="contenedor.swf?path=flash.swf" width="720" height="420">
<param name="movie" value="contenedor.swf?path=flash.swf" />
<param name="quality" value="high" />
<img src="flash.png" width="720" height="420" alt="Imagen en reemplazo de flash" />
</object>
</div>
</body>

Ahora viene el CSS:

Entre las etiquetas <head></head>, colocamos lo siguiente:

Código :

<style type="text/css">
<!--
.swfcentro {
position: absolute; /*Posicionamiento absoluto*/
top: 50%; /*Desde arriba, colocar al 50% de la pantalla*/
left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/
margin-top: -210px; /*Restamos la mitad de alto del SWF para centrarlo verticalmente*/
margin-left: -360px; /*Restamos la mitad de ancho del SWF para centrarlo horizontalmente*/
}
-->
</style>


Guardan el documento y listo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate