¿Como mover contenido de un iframe 100px hacia arriba?

[itzaliluna]

Hola a todos,

He usado el buscador para ver si estaba respondido, y aunque había alguien que preguntaba algo similar no obtuvo respuesta.

El tema es que sigo montando la página web de la pyme donde trabajo (alguno ya lo conoceréis de alguna consulta previa) -> http://www.forosdelweb.com/f64/sirven-para-posicionamiento-las-paginas-dentro-iframe-813900/



Tengo una consulta sobre como recolocar el contenido dentro de un IFRAME (El iframe es lo he marcado con el rectangulo gris)

Después de consultar dentro de el apartado de Posicionamiento, me han advertido de los problemas que pueden tener los iframe. En mi caso, me decían que podría darse el caso de que google me abriera directamente, sin el resto de el encabezado,las páginas que estoy cargando dentro del iframe.

Así pues, voy a poner en cada una de las páginas un encabezado con el nombre de la empresa, pero quiero que cuando cargue cada una de esas páginas dentro del iframe, éstas se desplacen los 100px que mide el encabezado hacia arriba para que se oculte.

En el foro se mencionaba la opción de marginheight, pero no me funciona. He probado poniendo el codigo de la siguiente manera

<div id="informacion"><iframe width="735px" height="385px" marginheight="-100px" frameborder="0" name="contenedor"></iframe></div>

no funciona.

Pero tampoco me funciona desplazarlo hacia abajo quitando el negativo

<div id="informacion"><iframe width="735px" height="385px" marginheight="100px" frameborder="0" name="contenedor"></iframe></div>

Alguien podría ayudarme?

gracias

[itzaliluna]

Hola a todos,

Parece que nadie sabe como se hace lo que pido más arriba.

He conseguido (por si a alguien le sirve) hacer algo parecido a lo que quiero, es mover el contenido del iframe hacia la izquierda. Puede ser util para ocultar barras de menus que normalmente se encuentran en ese lado.

Quizás a alguien le de alguna pista de como conseguir moverlo hacia arriba también.

la idea es tener el iframe dentro de un div más pequeño que el propio iframe, por ejemplo si el area que queremos mostrar es de 600px y tenemos una página de 800px (200px de botonera izquierda a ocultar por ejemplo)

<div style="width:600px;overflow:hidden">
<iframe src="aqui iria la dirección de la página que se va a cargar" style="width:800;height:400px;float:right">
</iframe>
</div>

El truco está en la orden float:right que ajusta a la derecha el contenido del iframe, y la orden overflow:hidden oculta lo que no queremos ver.

Espero que a alguien le sirva y me ayude con el tema.

PD: estoy pensando en usar una solución un tanto "rudimentaria" que es cargar la pagina en un iframe 100px más arriba y luego ponerle un rectangulo blanco de ese tamaño sobre el para ocultar lo que no me interesa. Aunque solo pensar en hacer eso me da hasta vergüenza de lo cutre que es.

Un saludo

[kiedis]

Hola itzaliluna. Lo más práctico es que metas e iframe en un div con posición absoluta y utilices el atributo clip de css para recortar las partes que no te interesen.

Echa un vistazo a esto:
http://www.librosweb.es/referencia/css/clip.html

[itzaliluna]

Muchas gracias, es lo que estaba buscando.

Al final me había dado por vencido y le puse un rectangulo con fondo blanco sobre la zona a ocultar ( un metodo muy cutre, pero que después de todo funciona). En cuando saque un rato, lo corregiré, menuda liada tengo con otra cosa.

Un saludo

PD: Por cierto, muy buena la página esa con los tutoriales de CSS (la he guardado en favoritos para futuras consultas).

[itzaliluna]

Hola otra vez,

Me he decidido a probarlo ya que parece muy sencillo, pero algo debo hacer mal pues no me da ningun resultado.

El iframe ya lo tenía dentro de un DIV de posicionamiento absoluto, de la siguiente manera:

<div id="informacion"><iframe style="width:740px;height:490px" scrolling="no" frameborder="0" name="contenedor"></iframe></div>

A dicho DIV "información" de he añadido la propiedad clip en el archivo ccs que tengo vinculado externamente.

#informacion {
position:absolute;
left:235px;
top:70px;
width:740px;
height:490px;
z-index:0;
overflow: hidden;
outline: none;
clip: rect ( 100px 0 0 0);
}

Pero no me recorta nada (he probado también poniendo pixeles en los lados izqierdo, derecho e incluso negativos, pero no hace nada)

Al previsualizarlo en el Firefox -> me da lo siguiente:





¿Hay algún error de sintaxis?