Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   objeto flash en css (http://www.forosdelweb.com/f53/objeto-flash-css-514658/)

kalajann 25/08/2007 03:29

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

Daniel Ulczyk 25/08/2007 06:25

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!
:adios:

lucasan 25/08/2007 08:22

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.

DragonX 25/08/2007 11:17

Re: objeto flash en css
 
Cita:

Iniciado por lucasan (Mensaje 2109429)
P.D: Si te gusta trabajar con standares, dejame decirte que esto no valida ni de cerca.

:risa: :risa: es cierto!!!!

ElAless 25/08/2007 17:55

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

lucasan 25/08/2007 22:26

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.

kalajann 26/08/2007 13:01

Re: objeto flash en css
 
gracias voy ha intentarlo,ya os contare.

kalajann 26/08/2007 13:24

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!!

lucasan 29/08/2007 22:07

Re: objeto flash en css
 
Estas trabajando ocn un CMS? es decir wordpress, joomla o algun foro? o desarrollaste tu el sitio?

Microbito 30/08/2007 15:15

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ó.

mckaizen 24/09/2008 11:06

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>

Mc_MaRdiG 02/07/2009 03:51

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!!

hades87 02/07/2009 04:05

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.


La zona horaria es GMT -6. Ahora son las 06:29.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.