Problemas para centrar una web Flash
6 seguidores
Hola a todo el mundo,
estoy haciendo una web en Flash, al publicar la pagina principal (Index) con los parámetros de publicación HTML ésta se centra en la pantalla. El problema es cuando llamo a un película desde Index, la película aparece descentrada arrastrando también a Index (que estaba centrada) a la parte superior izquierda de la pantalla (ñgr%&jll*!!!). Por que sucede?
Se que puedo meter el Flash en un Div centrado pero al insertar el swf y previsualizarlo no se ve nada de nada. Me estoy volviendo locu. No controlo mucho de programación Html o ActionScript así que estoy atascado.
Alguien podría ayudarme, please...
laraastur
Me pasó lo mismo y lo resolví gracias a este enlace:
http://www.cristalab.com/tips/centrar-swf-en-xhtml-con-css-c22868l/
Espero que te sirva.
Saludos!!!
Trazo
mmm pues no sé codebites... puede que no me entere exáctamente del problema al que te refieres...
He abierto, del ejemplo del artículo de tu blog, el archivo centerswfabs.html y he probado para ver si el scroll aparece "más tarde de lo que debería" y no es así. Luego he abierto centerswf.html para ver si apreciaba alguna diferencia a la hora de reescalar la ventana e interactuar con la barra de scroll con respecto al otro archivo y nada. Todo idéntico.
Lo he comprobado en Firefox, luego también en Safari y todo igual y después me he ido a Windows a probar con IE6 y tampoco veo ese problema ni diferencia entre ambos.
:-S
^_^
codebites
Trazo, gracias por tus comentarios, no sabía que el clear no era necesario, me lo mirare
sin ninguna duda, a mí también me pareció algo raro empujar el posicionamiento del container con leftdiv, y no lo acabe de encontrar elegante, pero antes de conocer esta técnica utilizaba la opción que describes, pero me dí cuenta de que cuando tenias que hacer scroll siempre te comes un trozo del flash que nunca queda visible ( a no ser que vaya errado, aquí un ejemplo del problema: http://codebites.net/wp-content/uploads/samples/centercss/centerswfabs.html), así que opte por la técnica que describo. También me gusta usar pelis al 100% e implementar el scroll dentro del flash, pero algunos clientes prefieren ver las barras del navegador (y también que el scroll sea 100% funcional sobre el flash), así que de momento...
Saludos
Trazo
Pues sinceramente codebites ese método me parece bastante regulero...
Para empezar, en ese método sobraría el float/clear... no es necesario para nada. No necesitas que tu leftdiv flote y por lo tanto no necesitas que container respete la posición de (que vea a) leftdiv.
En el fondo, el procedimiento que sigues es el mismo que cambiando position a absolute, solo que autolimitándote a seguir con static (no entiendo porqué) lo cual hace que necesites hacer lo que yo considero el mayor error de todos: supeditar el contenido al formato de la página.
En vez de desplazar el 50% la capa container hacia abajo mediante top (para que funcione necesitas dejar de usar static) creas una capa por encima, única y exclusivamente para eso, para asignarle el 50% (de su contenedor) de alto. Lo que además te obliga a modificar la altura predeterminada de body y html, sus contenedores, ya que, en un principio, se comportan ambos como elementos de bloque (Se autoajustan por defecto en anchura a su contenedor y en altura a su contenido), necesitando aún más selectores css.
Como decía el mayor error de todos es el anteponer el formato de una web al contenido de la misma, y tú estás creando una capa únicamente para modificar el formato de otra, cuando dispones de una forma perfectamente válida de hacerlo.
Esa técnica que propones me recuerda un poco a esa en la que, hace bastante tiempo ya, utilizabamos un gif de 1px por 1px para empujar elementos y colocar las cosas en su sitio modificando su ancho o alto (lo que era bastante chapuza).
codebites
Hola codigodebarras,
Para centrar un layer con css horizontal y verticalmente mirate este post que escribí hace algún tiempo, a mí es el método que más me ha convencido:
http://codebites.net/centrar-flash-div-css/
Saludos
Usuario desconocido
Gracias por toda la info! intentaré las distintas opciones. A ver si lo soluciono... solo puedo dedicarle algunos ratos libres, así que quizá tarde en postear el resultado... Es una suerte poder contar con vuestra ayuda :)
Trazo
Si, con CSS, la quieres centrar sólamente en horizontal, como dice Ismael:
div#webFlash {
margin: 0 auto /*No olvides el !DOCTYPE ya que IE pasaría a modo Quirks y no funcionaría */
}
Si la quieres centrada tanto en horizontal como en vertical (si el site se visualiza siempre por encima del pliegue) tienes que pasar la capa a posición absoluta. Las unidades de medida (px) siempre pegadas al valor (Si no, no funciona):
div#webFlash { /* ... La capa cuya ID es "webFlash" dispone de las siguientes propiedades CSS... */
width: XXXpx ; /* Ancho del SWF (Ancho del Escenario asignado en el archivo FLA). */
height: YYYpx ; /* Alto del SWF (Alto del Escenario asignado en el archivo FLA). */
position: absolute ; /* Pasamos su modo de ubicación de estático a absoluto. */
top: 50% ; /* Distancia desde arriba hasta el lado superior de la capa (la mitad del alto de la ventana). */
left: 50% ; /* Distancia desde la izquierda hasta el lado izquierdo de capa (la mitad del ancho de la ventana). */
margin-top: -YYY/2px ; /* Menos la mitad del alto. Para centrar visualmente la capa en vertical. */
margin-left: -XXX/2px /* Menos la mitad del ancho. Para centrar visualmente la capa en horizontal. */
}
*Las propiedades margin-top y margin-left se pueden aunar en:
margin: -YYY/2px 0 0 -XXX/2px
Usuario desconocido
Ok MatMAC, en cuanto lo cuelge os paso la URL, muchas gracias :)
Ismael González
div { width: el ancho de tu swf en pixels; margin: 0 auto;}
MatMAC Profesor Plus
En realidad si ya tienes el sitio desarrollado puedes añadir un escenario líquido pero puede ser un coñazo dependiendo de los elementos que haya que posicionar y en realidad de como este producido el sitio, pasanos una URL para mirar lo del DIV y poder ayudarte.
Usuario desconocido
Gracias, lo intentaré con css. Lo que me porpones, MatMAC se me escapa. No se como tener un escenario líquido o cómo crear un Flash a pantalla completa que se ajuste a cualquier resolución...
De todas formas, tengo el problema de visualización del Flash cuando lo introduzco en el Div, no se ve!
MatMAC Profesor Plus
Deberías utilizar el flash a toda la pantalla y tener un escenario líquido.
HerrRalf
Creo que te pasa lo mismo que me pasó a mi. Para centrar el swf en pantalla, lo metes en un div con estas reglas css:
margin-left: -500px;
position: absolute;
left: 50%;
width: 1000px;
height: 650px;
clear: both;
float: right;
en donde el margin-left es la mitad de la medida de tu swf (en negativo) y el width y height lo que mida tu peli.
Espero que sea esto lo que necesitas...