iframe no funciona

DoPeY-BBS · #1 (**permalink**) 11/03/2012, 02:45

Quiero hacer que el iframe quede justamente abajo en el centro, a ver

Código CSS:

Ver originaliframe {
    background-color: #333333;
    margin: 0 auto;
    bottom: 50px;
}

Código HTML:

Ver original<iframe scrolling="no" height="80" frameborder="0" src="http://blackdeathmetal.eshost.es/paginas/player.html" name="radio"></iframe>

Gracias anticipada.

caricatos · #2 (**permalink**) 11/03/2012, 04:34

Hola:

Al menos el margin auto funciona si el contenedor tiene posicionamiento relativo... y el ajuste vertical es bastante más complejo si no sabes el tamaño real del contenedor... tal vez puedas usar porcentajes, y el contenedor darle un height como 100% o algún valor en pixeles...

Saludos

emprear · #3 (**permalink**) 11/03/2012, 07:18

Sería asi

Código HTML:

Ver original<!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>
<title>iframe abajo centrada</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
iframe {
width: 300px;
height: 200px;
position: absolute;
bottom: 50px;
left: 50%;
margin: 0 0 0 -150px;
}
 
/*]]>*/
</style>
</head>
<body>
<iframe src="about:blank"></iframe>
</body>
</html>

El centrado lo obtenes con left: 50% y margin: valor negativo = a la mitad del ancho del iframe. por lo cual deberás darle un ancho, cosa que no hiciste
Saludos

DoPeY-BBS · #4 (**permalink**) 11/03/2012, 13:11

Debo tener problema con la resolucion de pantalla o algo

es el mismo codigo que me diste

y el que puse arriba.

emprear · #5 (**permalink**) 11/03/2012, 13:35

No amigo, el código que te pasé, que funciona perfectamente (ie7+ y el resto), es para que crees un archivo de prueba y lo visualices en el navegador, NO en la vista diseño de algún editor html

Demo:
http://foros.emprear.com/html/iframe_centrado.html

Se entiende?

DoPeY-BBS · #6 (**permalink**) 11/03/2012, 13:55

Perfecto, ya logre ponerlo

DoPeY-BBS · #7 (**permalink**) 11/03/2012, 21:05

Ahora bien, le modifique la posicion y la puse fixed y cambie la altura la anchura y lo coloque en la parte de abajo pero, ahora necesito colocarle dentro de un div porque solamente me esta interpretando el color de fondo donde contiene lo que estoy llamando.

He intentado mover los margenes pero se me descuadra
http://blackdeathmetal.eshost.es/ esa es la pagina. a ver si me ayudas

emprear · #8 (**permalink**) 11/03/2012, 21:38

Repito
margin: valor negativo = a la mitad del ancho del iframe, en mi ejemplo el ancho era de 300px, por lo tanto, la mitad -150px, vos lo hiciste de 500px de ancho...en consecuencia -250px para el margen izquierdo

Saludos

DoPeY-BBS · #9 (**permalink**) 11/03/2012, 22:46

Eso lo entendi, lo que quiero colocar el frame en una capa para darle color pero no logro hacer eso tan sencillo, no entiendo que es lo que pasa

emprear · #10 (**permalink**) 11/03/2012, 23:01

supongo que el color se lo queres dar a la capa.
En ese caso, podés hacer esto

Código HTML:

Ver original<!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>
<title>iframe abajo centrado</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
html, body {
padding: 0;
margin: 0;
}
 
div#contiene_iframe {
width: 100%;
height: 200px;
text-align: center;
background-color: #ccc;
position: fixed;
bottom: 0;
left: 0;
padding: 0;
margin: 0;
}
 
iframe {
width: 500px;
height: 198px;
border: solid 1px #000;
}
/*]]>*/
</style>
</head>
<body>
<div id="contiene_iframe">
<iframe src="about:blank" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>

Si no queres la capa al 100% de ancho, usas lo del ancho y margen negativo como en el ejemplo previo. el borde al iframe se lo dí para que se pueda visualizar.
notá que al usar la capa para posicionar, el iframe ya no necesita

Código CSS:

Ver originalposition: absolute;
bottom: 50px;
left: 50%;
margin: 0 0 0 -150px;

Los cambios los puse en la demo del post anterior
Saludos

DoPeY-BBS · #11 (**permalink**) 12/03/2012, 00:02

Gracias por tu ayuda.