objeto flash en css

kalajann · #1 (**permalink**) 25/08/2007, 03:29

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 · #2 (**permalink**) 25/08/2007, 06:25

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!

lucasan · #3 (**permalink**) 25/08/2007, 08:22

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 · #4 (**permalink**) 25/08/2007, 11:17

Cita:

Iniciado por lucasan

P.D: Si te gusta trabajar con standares, dejame decirte que esto no valida ni de cerca.

es cierto!!!!

ElAless · #5 (**permalink**) 25/08/2007, 17:55

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 · #6 (**permalink**) 25/08/2007, 22:26

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 · #7 (**permalink**) 26/08/2007, 13:01

gracias voy ha intentarlo,ya os contare.

kalajann · #8 (**permalink**) 26/08/2007, 13:24

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 · #9 (**permalink**) 29/08/2007, 22:07

Estas trabajando ocn un CMS? es decir wordpress, joomla o algun foro? o desarrollaste tu el sitio?

Microbito · #10 (**permalink**) 30/08/2007, 15:15

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 · #11 (**permalink**) 24/09/2008, 11:06

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 · #12 (**permalink**) 02/07/2009, 03:51

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 · #13 (**permalink**) 02/07/2009, 04:05

No reactives temas tan antiguos y para las dudas abre mejor un tema nuevo. Si quieres agradecer puedes dar karma a los usuarios.