Foros del Web » Creando para Internet » CSS »

objeto flash en css

Estas en el tema de objeto flash en css en el foro de CSS en Foros del Web. yo no soy experto en css es mas esto de los codigos se me hace dificil,pero si me gusta crear y diseñar .El caso es ...
  #1 (permalink)  
Antiguo 25/08/2007, 04:29
 
Fecha de Ingreso: agosto-2007
Mensajes: 6
Antigüedad: 10 años, 3 meses
Puntos: 0
objeto flash en css

yo no soy experto en css es mas esto de los codigos se me hace dificil,pero si me gusta crear y diseñar .El caso es que con html es relativamente facil sin embargo cuando salgo de hay y me meto en php css o cualquier otro lenguaje apaga y vamonos vamos que ni puta idea " burlense si quieren".Bien el caso es que estoy intentando sustituir una imagen alojada en el header formato gif por una pelicula en flash se trata de una web ya cocinada en e-107 y en el archibo style.css lo que hago es sustituir
Código:
#header {
	position:relative;
	padding: 0;
	margin: 0 auto;
	height: 210px;
	width: 960px;
	background: url("images/header.gif") no-repeat bottom center; 
}
por este otro
Código:
#header {
	position:relative;
	padding: 0;
	margin: 0 auto;
	height: 210px;
	width: 960px;
	background: url("images/header.swf") no-repeat bottom center; 
}
con header.gif a header.jpg me funciono y pense que solo es un problema de extension pero como swf no funciona.
Agredeceria cualquier ayuda

Última edición por kalajann; 25/08/2007 a las 04:42
  #2 (permalink)  
Antiguo 25/08/2007, 07:25
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Re: objeto flash en css

El objeto en cuestión debés incrustrarlo en el código HTML.
CSS no soporta la forma en que querés llevarlo a cabo.

Cita:
burlense si quieren
Es mucho probable que varios te den una mano y te ayuden a que adopten posturas de esa naturaleza.
Suerte!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #3 (permalink)  
Antiguo 25/08/2007, 09:22
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Re: objeto flash en css

Hola, lo qye debes hacer es con CSS crear el Div donde irá tu objeto flash, ancho, altura, posición, etc. y luego en el Html insertas el flash,

Eejmplo:


Código:
/*CSS */
#header {
	position:relative;
	padding: 0;
	margin: 0 auto;
	height: 210px;
	width: 960px;
	background-color: #ffffff;
}


Código:
// En el html //

<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="960" height="210">
  <param name="movie" value="tu_archivo.swf" />
  <param name="quality" value="high" />
  <embed src="tu_archivo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="874" height="157"></embed>
</object>
</div>
Así pones el objeto flash en tu página. Ahora, aquí no he tenido en cuenta el problema de IE con los objetos flash (has visto? que un swf en IE se muestra con un borde gris hasta que el usuario lo active con un click?) pero si te interesa tendrías que descargarte (busca en google) el archvo AC_RunActiveContent.js ubicarlo en una carpeta junto a tu página html (por ejemplo una carpeta llamada "js") y tu código html quedaría asi:

Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tu sitio</title>
<script src="js/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="header">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','960','height','210','src','la  ruta de tu archivo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','la ruta de tu archivo ' ); //end AC code
</script><noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="960" height="210">
  <param name="movie" value="tu archivo.swf" />
  <param name="quality" value="high" />
  <embed src="tu archivo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="874" height="157"></embed>
</object></noscript>
</div>
</body>
</html>
Espero t esea útil.

P.D: Si te gusta trabajar con standares, dejame decirte que esto no valida ni de cerca.
  #4 (permalink)  
Antiguo 25/08/2007, 12:17
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: objeto flash en css

Cita:
Iniciado por lucasan Ver Mensaje
P.D: Si te gusta trabajar con standares, dejame decirte que esto no valida ni de cerca.
es cierto!!!!
  #5 (permalink)  
Antiguo 25/08/2007, 18:55
 
Fecha de Ingreso: agosto-2007
Mensajes: 19
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: objeto flash en css

perdona, para que sirve ese archivo que dices que podemos buscar en google? "AC_RunActiveContent.js"?? supongo que esto solamente funciona para IE. Y eso de que "esto no se valida ni de cerca" no lo entendi, disculpa mi ignorancia
  #6 (permalink)  
Antiguo 25/08/2007, 23:26
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Re: objeto flash en css

El archivo es un javascript que se usa para corregir un problema que tiene IE explorer con los objetos flash, es una historia larga el por que sucede esto, pero el IE impide la interacción del usuario con los objetos flash hasta que se haga click sobre ellos, y resulta muy molesto.

Cuando se incluye este javascript se corrige este problema.

Ahora lo de la validación, hay una organización la w3c que define los standares para el la web.

Entonces, en su página w w w . w 3 c . o r g (no puedo aun poner vínculos) se puede revisar si una página cumple o no con los standares, a eso se llama validar.

Espero haber sido de ayuda.
  #7 (permalink)  
Antiguo 26/08/2007, 14:01
 
Fecha de Ingreso: agosto-2007
Mensajes: 6
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: objeto flash en css

gracias voy ha intentarlo,ya os contare.
  #8 (permalink)  
Antiguo 26/08/2007, 14:24
 
Fecha de Ingreso: agosto-2007
Mensajes: 6
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: objeto flash en css

nada el index esta ha cero kb y el css style (he de decir que no es de la raiz ) si no de un theme o tema es el siguiente :

* {
margin: 0;
padding: 0;
}

body {
margin: 0;
padding: 0;
font-size: 60%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #333;
text-align: center;
background:#FFF;
}

a {
color: #336699;
text-decoration: none;
}

a:hover {
color: #ff9900;
text-decoration: none;
}

h1 {
font-size: 4em;
}

h2 {
font-size: 1.6em;
color: #333;
}

h3 {
font-size: 1.3em;
}

h1, h2, h3 {
font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight: bold;
}

td {
background: none;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color:#5d6e75;
padding: 0px;
text-align:left;
}

acronym, abbr, span.caps {
cursor: help;
}

acronym, abbr {
border-bottom: 1px dashed #999;
}

blockquote {
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}

blockquote cite {
margin: 5px 0 0;
display: block;
}

hr {
display: none;
}

a img {
border: none;
}

.hidden{
display:none;
}

#page {
margin: 20px auto;
padding: 0;
width: 960px;
border: 1px solid #959596;
text-align: left;
background: url("images/background.jpg") repeat-y top;
border: none;
}

#page2 {
margin: 20px auto;
padding: 0;
width: 960px;
border: 1px solid #959596;
text-align: left;
background: url("images/background1.jpg") repeat-y top;
border: none;
}

#header {
position:relative;
padding: 0;
margin: 0 auto;
height: 210px;
width: 960px;
background: url("images/header.jpg") no-repeat bottom center;
}

#header h1{
position:absolute;
top:50px;
left:0px;
width: 100%;
padding: 0;
margin: 0 auto;
font-size: 4em;
text-align: center;
}

#header h1 a {
color:#C00000;
}

#header h1 a:hover {
color:#ff9900;
}

#header h2 {
position:absolute;
top:100px;
left:0px;
width: 960px;
padding: 0;
margin: 0 auto;
font-size: 1.2em;
text-align: center;
color: #336699;
}

#header1 {
position:relative;
padding: 0;
margin: 0 auto;
height: 210px;
width: 960px;
background: url("images/header1.jpg") no-repeat bottom center;
}

#header1 h1{
position:absolute;
top:50px;
left:0px;
width: 100%;
padding: 0;
margin: 0 auto;
font-size: 4em;
text-align: center;
}

#header1 h1 a {
color:#336699;
}

#header1 h1 a:hover {
color:#ff9900;
}

#header1 h2 {
position:absolute;
top:100px;
left:0px;
width: 960px;
padding: 0;
margin: 0 auto;
font-size: 1.2em;
text-align: center;
color: #336699;
}

.pad{
font-size: 11px;
width: 190px;
margin-left: 5px;
margin-bottom:20px;
list-style: none;
text-align:left;
border-top: 1px solid #618092;
border-bottom: 2px solid #618092;
border-left: 1px solid #618092;
}

.menu-row {
vertical-align: middle;
border: 1px solid #618092;
}

.row {
padding:4px 0px 4px 7px;
background-color: #AFC0CA;
color: #111;
cursor: pointer;
}
.row a:link, .row a:visited {
padding:3px 20px 3px 0;
color: #111;
}
.row a:link, TR .row a:visited {
text-decoration: none;
}

.btn {
padding:4px 0 4px 0;
background-color: #618092;
border: 1px solid #618092;
border-right: none;
}

.btnhi {
background-color: #ff9900;
border-right: none;
}

.menu-hirow {
vertical-align: middle;
border: 1px solid #618092;
}

.rowhilite {
padding:4px 0px 4px 7px;
background-color: #ff9900;
color: #fff;
cursor: pointer;
border: 1px solid #618092;
}
.rowhilite a:link, .rowhilite a:visited {
color: #fff;
}
.rowhilite a:link, .rowhilite a:visited {
text-decoration: none;
}


#content {
margin-top:22px;
font-size: 1.2em
}

#page-left {
float: left;
margin: -25px 0 0 0;
padding: 0;
width: 760px;
}

*html #page-left {
width: 735px;
}

#page-left1 {
float: left;
margin: -25px 0 0 0;
padding: 0;
width: 940px;
}


#sidebar-left {
float: left;
margin:35px 0px 10px 20px;
padding: 0;
width: 190px;
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

*html #sidebar-left {
margin-left:10px;
}

.narrowcolumn {
padding: 0;
margin: 0 0 20px 245px;
width: 470px;
}

*html .narrowcolumn {
margin-left:242px;
}

#sidebar-right {
margin:10px 0px 0px 750px;
padding: 0;
width: 190px;
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.widecolumn {
padding: 0;
margin: 0 0 20px 245px;
width: 670px;
}

.narrowcolumn .entry, .widecolumn .entry {
line-height: 1.4em;
}

.widecolumn {
line-height: 1.6em;
}

#footer {
padding: 0;
margin: 0 auto;
width: 960px;
height: 95px;
clear: both;
background: url("images/footer.jpg") bottom left no-repeat;
}

#footer p {
margin: 0;
padding: 45px 0 0 50px;
text-align: left;
}

#footer1 {
padding: 0;
margin: 0 auto;
width: 960px;
height: 95px;
clear: both;
background: url("images/footer1.jpg") bottom left no-repeat;
}

#footer1 p {
margin: 0;
padding: 45px 0 0 50px;
text-align: left;
}

#source {
width: 120px;
float:right;
margin:45px 30px 0 0;
}

#left-area {
background: #EBEFF2;
padding:3px;
border:1px solid #888;
}

#right-area {
background: #EBEFF2;
padding:3px;
border:1px solid #888;
}

#sidebar-left #space {
width: 190px;
height: 3px;
background: url("images/space.jpg") left top no-repeat;
margin-bottom:5px;
}

#sidebar-right #space {
width: 190px;
height: 3px;
background: url("images/space1.jpg") left top no-repeat;
margin-bottom:5px;
}

#credit {
display:none;
}

#newsimage {
float:left;
padding:3px 10px 0px 0px;
}


.button{
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 10px;
text-align:center;
background: url("images/btnn.jpg") left top repeat-x;
padding:1px 5px 1px 5px;
margin: 2px 1px 2px 1px;
}

.tbox.chatbox {
width: 80%;
margin-left: auto;
margin-right: auto;
}

#sidebar-left #txt {
background: #AFC0CA;
padding: 3px;
}

#sidebar-right #txt {
background: #ff9900;
padding: 3px;
}

.spacer {
padding: 2px 0 2px 0;
}


.indent{
padding:4px;
border: 1px solid #06c;
}

.smalltext {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.mediumtext {
font: 12px 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

.tbox{
background-color: #F4F7FA;
border: #5e5d63 1px solid;
color: #000000;
font: 10px verdana, tahoma, arial, helvetica, sans-serif;
}

.helpbox {
border: 0px;
background-color: transparent;
color:#000;
font: 9px tahoma, verdana, arial, helvetica, sans-serif;
}

.fborder {
border: #888 1px solid;
background-color: #fff;

}

.forumheader{
background: url("images/btn.jpg") left 60% repeat-x;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 11px;
color:#000;
padding: 4px;
border: 1px solid #888;
}

.forumheader2{
background-color: #EBEFF2;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
font-size: 10px;
color:#000;
padding: 4px;
border: #888 1px solid;
}

.forumheader3{
background-color: #EBEFF2;
font: 9px verdana, tahoma, arial, helvetica, sans-serif;
color:#000;
padding: 4px;
border: #888 1px solid;

}

.forumborder{
border: #888 1px solid;
background-color: transparent;
}

.fcaption {
height:35px;
border: #888 1px solid;
padding: 2px 0 2px 8px;
font: 12px verdana, tahoma, arial, helvetica, sans-serif;
color:#336699;
font-weight:bold;
background: #AFC0CA url("images/btn.jpg") top left repeat-x;
}
.fcaption a{
padding-right:4px;
color:#fff;

}



.nicetitle {
font-weight: bold;
color: #3C3C3C;
text-align: left;
position: absolute;
left: 0;
top: 0;
width: 35em;
z-index: 20;
max-width: 60%;
}
.nicetitle-content{
overflow: hidden;
background: white;
border: 1px solid #333;
padding: 7px;
opacity: 0.9;
}
.nicetitle p{
margin: 0;
line-height: 120%;
}
.nicetitle p.destination {
font-weight: normal;
font-size: 10px;
color: #5E7743;
}
div.nicetitle p span.accesskey {
color: #FF7200;
}

Me explico el css esta alojado en la carpeta themes dentro de otra carpeta con el tema en cuestion,tiene un index pero no tiene contenido¡¡yo no entiendo nada!!
  #9 (permalink)  
Antiguo 29/08/2007, 23:07
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Re: objeto flash en css

Estas trabajando ocn un CMS? es decir wordpress, joomla o algun foro? o desarrollaste tu el sitio?
  #10 (permalink)  
Antiguo 30/08/2007, 16:15
Avatar de Microbito  
Fecha de Ingreso: octubre-2001
Ubicación: Cd. Juárez, Chihuahua, México
Mensajes: 829
Antigüedad: 16 años, 2 meses
Puntos: 6
Re: objeto flash en css

Para poner un SWF de fondo, tienes que usar el comando Z-Index, el archivo flash dentro de una capa con parametro "z-index: 0" y el contenido en "z-index: 1"


Aca el ejemplo:

Pones una capa que contedra todos los elementos"

Código:
<div class='contenedor"

aca todos los elementos

</div
El archivo SWF debe estar dentro de una capa, dentro de ese contenedor:

Código:
<div class="capafondo">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="200">
      <param name="movie" value="archivo.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <embed src="archivo.swf" width="800" height="200" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="opaque"></embed>
    </object>

</div>
Asegurate de poner la opcion OPAQUE en el parametro WMODE.

ahora pones una capa con todo el contenido del sitio que vca encima del flash, tambien dentro del contenedor principal:

Código:
<div class="contenido">
aca todo tu contenido.
</div>


en en codigo CSS tienes que especificar lo siguiente:


Código:
<style>

style>

.capafondo {z-index: 0;position:relative; left:0px; top:0px;}
.contenido {
	z-index: 1;
	position:absolute;
	left:0px;
	top:1px;
	width: 801px;
	height: 200px;
}
.contenedor {width:800px; height:200px; position:relative; margin:auto;}
</style>



este es el codigo completo:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>

.capafondo {z-index: 0;position:relative; left:0px; top:0px;}
.contenido {
	z-index: 1;
	position:absolute;
	left:0px;
	top:1px;
	width: 801px;
	height: 200px;
}
.contenedor {width:800px; height:200px; position:relative; margin:auto;}
</style>


</head>

<body>
<div class="contenedor">
<div class="capafondo">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="200">
      <param name="movie" value="archivo.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <embed src="archivo.swf" width="800" height="200" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="opaque"></embed>
  </object>

</div><div class="contenido">
aca todo tu contenido.
</div>
</div>
</body>
</html>
Prueba y dime si te funcionó.

Última edición por Microbito; 30/08/2007 a las 16:34
  #11 (permalink)  
Antiguo 24/09/2008, 12:06
 
Fecha de Ingreso: julio-2008
Mensajes: 3
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Re: objeto flash en css

URGENTE

Muy bien ya hice los cambios con los datos que comentas pero me resulta que se ve bien el sitio, pero no funcionan los enlaces dentro del mismo a traves de los botones ni nada solo veo el intro y si se carga la pelicula SWF aparentemente


saludos

Te pongo el código haber si puedes ayudarme con algo que haya pasado por alto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...Quinta Angie...</title>

<style>

.capafondo {z-index: 0;position:relative; left:0px; top:0px;}
.contenido {
z-index: 1;
position:absolute;
left:0px;
top:1px;
width: 87%px;
height: 98%;
scale: exactfit;
}
.contenedor {width:100%; height:100%; position:relative; margin:auto;}
</style>


</head>

<body>
<div class="contenedor">
<div class="capafondo">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="87%" height="98%">
<param name="movie" value="archivo.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="scale" value="exactfit" />
<embed src="index.swf" width="87%" height="98%" quality="high" scale="exactfit" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="opaque"></embed>
</object>

</div><div class="contenido">
"EN ESTE APARTADO CREO QUE ES DONDE TENGO EL PROBLEMA" QUE CODIGO DEBO INGRESAR AQUI
</div>
</div>
</body>
</html>
  #12 (permalink)  
Antiguo 02/07/2009, 04:51
 
Fecha de Ingreso: julio-2009
Mensajes: 1
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Re: objeto flash en css

Hola gente, soy nuevo en el foro y empiezo a dar mis primeros pasos en la programación web. En este hilo sólo quería agradecer todos los aportes (en especial al de microbito) pues me han sido de gran utilidad.

Saludos y gracias!!
  #13 (permalink)  
Antiguo 02/07/2009, 05:05
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: objeto flash en css

No reactives temas tan antiguos y para las dudas abre mejor un tema nuevo. Si quieres agradecer puedes dar karma a los usuarios.
__________________
No diseñes usando tablas.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:00.