Problema con espacios CSS y swfobject

j4rk0r · #1 (**permalink**) 09/08/2010, 13:06

He creado 4 elementos alineados, sin saltos de línea, y entre uno y otro hay 20px...

Al verlo en .jpg se ve bien y sin problemas, pero cuando se cargan los .swf no hace caso de el css que le indica que debe dejar 20px...

Para verlo mas claro dejo aquí el código:
<div id="pie">
<div class="pie1" id="ban1"><a href="sitio1" target="_self" title="1"><img src="img/ofertas.png" width="185" height="145" border="0"/></a></div>
<div class="pie2" id="ban2"><a href="sitio2" target="_self" title="2"><img src="img/folleto.png" width="180" height="145" border="0"/></a></div>
<div class="pie3" id="ban3"><a href="sitio3" target="_self" title="3"><img src="img/constructora.png" width="180" height="145" border="0"/></a></div>
<div class="pie4" id="ban4"><a href="sitio4" target="_self" title="4"><img src="img/proyectos.png" width="185" height="145" border="0"/></a></div>
</div>

El código CSS:

#pie {
width: 800px;
height: 145px;
padding-top:540px;
}
.pie1 {
float:left;
width: 185px;
height: 145px;
margin-left:3px;
}
.pie2 {
float:left;
width: 180px;
height: 145px;
margin-left:20px;
}
.pie3 {
float:left;
width: 180px;
height: 145px;
margin-left:20px;
}
.pie4 {
float:left;
width: 185px;
height: 145px;
margin-left:20px;
}

Y el código de carga para los SWFOBJECT:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};

swfobject.embedSWF("http://www.pinacar.com/img/ban1.swf", "ban1", "185", "145", "9.0.0", false, flashvars, params, attributes);
swfobject.embedSWF("http://www.pinacar.com/img/ban2.swf", "ban2", "180", "145", "9.0.0", false, flashvars, params, attributes);
swfobject.embedSWF("http://www.pinacar.com/img/ban3.swf", "ban3", "180", "145", "9.0.0", false, flashvars, params, attributes);
swfobject.embedSWF("http://www.pinacar.com/img/ban4.swf", "ban4", "185", "145", "9.0.0", false, flashvars, params, attributes);
</script>

Pueden ver el ejemplo:
http://www.pinacar.com/

Si desactiva el flash en firefox se ve bien, pero con el flash activo se ve que los espacios no funcionan...

GRACIAS POR VUESTRA AYUDA

GastonManatico · #2 (**permalink**) 09/08/2010, 13:29

Cita:

Iniciado por j4rk0r

He creado 4 elementos alineados, sin saltos de línea, y entre uno y otro hay 20px...

Al verlo en .jpg se ve bien y sin problemas, pero cuando se cargan los .swf no hace caso de el css que le indica que debe dejar 20px...

Para verlo mas claro dejo aquí el código:
<div id="pie">
<div class="pie1" id="ban1"><a href="sitio1" target="_self" title="1"><img src="img/ofertas.png" width="185" height="145" border="0"/></a></div>
<div class="pie2" id="ban2"><a href="sitio2" target="_self" title="2"><img src="img/folleto.png" width="180" height="145" border="0"/></a></div>
<div class="pie3" id="ban3"><a href="sitio3" target="_self" title="3"><img src="img/constructora.png" width="180" height="145" border="0"/></a></div>
<div class="pie4" id="ban4"><a href="sitio4" target="_self" title="4"><img src="img/proyectos.png" width="185" height="145" border="0"/></a></div>
</div>

El código CSS:

#pie {
width: 800px;
height: 145px;
padding-top:540px;
}
.pie1 {
float:left;
width: 185px;
height: 145px;
margin-left:3px;
}
.pie2 {
float:left;
width: 180px;
height: 145px;
margin-left:20px;
}
.pie3 {
float:left;
width: 180px;
height: 145px;
margin-left:20px;
}
.pie4 {
float:left;
width: 185px;
height: 145px;
margin-left:20px;
}

Y el código de carga para los SWFOBJECT:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
var attributes = {};

swfobject.embedSWF("http://www.pinacar.com/img/ban1.swf", "ban1", "185", "145", "9.0.0", false, flashvars, params, attributes);
swfobject.embedSWF("http://www.pinacar.com/img/ban2.swf", "ban2", "180", "145", "9.0.0", false, flashvars, params, attributes);
swfobject.embedSWF("http://www.pinacar.com/img/ban3.swf", "ban3", "180", "145", "9.0.0", false, flashvars, params, attributes);
swfobject.embedSWF("http://www.pinacar.com/img/ban4.swf", "ban4", "185", "145", "9.0.0", false, flashvars, params, attributes);
</script>

Pueden ver el ejemplo:
http://www.pinacar.com/

Si desactiva el flash en firefox se ve bien, pero con el flash activo se ve que los espacios no funcionan...

GRACIAS POR VUESTRA AYUDA

lo veo en chrome y se ve bien

j4rk0r · #3 (**permalink**) 09/08/2010, 17:24

Como he puesto arriba, se debe ver tal y como se ve, cuando no esta activado el plugin de flash, que se ven las imágenes separadas por 20px, sin embargo con el swfobject estan muy cerca unos de otros...

Por favor probadlo y a ver como puedo hacer q se vea exactamente igual con imágenes que con swfobject.

Gracias

tredio · #4 (**permalink**) 10/08/2010, 15:29

podrias probar algo asi.

Código CSS:

Ver original#ban1,.pie1 {
float:left;
width: 185px;
height: 145px;
margin-left:3px;
}
#ban2,.pie2 {
float:left;
width: 180px;
height: 145px;
margin-left:20px;
}
#ban3,.pie3 {
float:left;
width: 180px;
height: 145px;
margin-left:20px;
}
#ban4,.pie4 {
float:left;
width: 185px;
height: 145px;
margin-left:20px;
}

igual creo que esos 20 px es mucho y el ultimo swf se va a bajar.

j4rk0r · #5 (**permalink**) 11/08/2010, 18:56

Gracias tredio, esa es la solución, ahora, pq así si funciona?