iFrames (Prehistoria)

tokero · #1 (**permalink**) 17/04/2009, 07:11

Buenas a todos!!

Estoy trabajando con iFrames, y estoy teniendo muchos problemas, sobre todo con la alineacion en pantalla y ya ni os cuento entre navegadores.

Al grano, tengo la pantalla con una división general "main" con las siguiente propiedades:

left: 50%;
margin-left: -500px;
width: 1000px;
position: absolute;

Nada del otro mundo, para que quede centrado en pantalla etc...

Bien como estoy trabajando sobre un servidor muy antiguo, he tenido que tirar de iFrames por motivos de la pagina.

Dentro de este div "main"

Tengo un iFrame
"cabecera" width: 800px;
un iFrame
"menuDrch" width: 200px; Height: 400px;
y por ultimo el
"info" width: 800px; y el alto variable segun la pagina que carge gracias a un script de java que saque de este foro (muy bueno).

Bien "cabecera" aparece a la izq, perfecto.

"menuDrch" aparece a la misma altura que el primero y a su derecha, perfecto.

"info" en Firefox aparece perfecto, debajo de "cabecera" y a la izquierda de "menuDrch".

Pero en explorer aparece encima del iframe "menuDrch".

He intentado de todo, alineaciones, tamanios... vamos de todo...

Alguno puede hecharme una manita... no habia tocado iFrames en mi vida y me esta costando buscar soluciones... no me suelo dar rapido por vencido, pero es que esto me esta volviendo un poco loco.

Muchas gracias a todos!!

ssclamp · #2 (**permalink**) 17/04/2009, 08:32

Pienso que sería bueno que en lugar de poner trocitos de tu código pusieras el código del html completo. Así se podría ver con más facilidad los errores, si los hay.

Saludos

Calizman · #3 (**permalink**) 17/04/2009, 09:05

Saludos!!

Primero que nada: Para centrar el #main no tienes que poner todo eso, intenta quitar el left: 50% y margin-left: -500px y reemplazalo por margin: 0px auto; con eso y un Doctype valido, tienes una pagina perfectamente centrada

Luego de eso, se me ocurre que que a "info" y "menuDrch" les pongas un div algo asi como: #centro y te quedaria asi:

<div id="centro">
<div id="info"></div>
<div id="menuDrch"></div>
</div>

Todos estos con position: relative; y (OJO) "info" con float: left; y "menuDrch" con float: right;

Espero haberme explicado... No te pongo un codigo exacto para copiarlo y pegarlo, para que pienses un poco en como hacerlo y asi aprendas

Si no te funciona, entonces como dice ssclamp postea tu codigo aqui y con gusto te ayudamos

Hasta Luego!!

xurxinho · #4 (**permalink**) 18/04/2009, 03:01

A mi los iframes también me dan problemas en no sé que navegador (creo que mozilla).
En un div lo ponía flotado a la izquierda y forzaba que su tamaño fuera de 100%(min-height:100%;height:100% important!,height:100%), lo mismo para el otro que por su naturaleza ocupaba el derecho (ahí colocaba mi iframe). Mientras que no lo colocara un i-frame, perfecto, todos los elementos introducidos se colocaban en su posición. Pero en cuanto introducía el i-frame este se desplazaba por debajo de la caja que flotaba a la izquierda.

En este caso y ya qué el iframe es de la prehistoria, aún así útil para ciertos casos (yo creo que todo sirve mientras funcione y sea lógico en su funcionamiento) por ahora lo solucioné de la manera más sencilla, y que cumple con el estandar, al menos el armazón. Las tablas (y sé que las odiáis

) están para la estructuración, y para el caso de los i-frame te evitas muxos estructurando la página con una tabla.

De todas maneras yo estoy aquí para aprender y buscar soluciones alternativas --para que no os enfadéis conmigo

--

xurxinho · #5 (**permalink**) 18/04/2009, 03:13

Retiro lo anteriormente dicho, aún me quedan cosas por hacer

.
Esto funciona:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño, web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño Web con CSS, en castellano" />
<meta name="Author" content="Mikel Morote Donazar" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="es" />
<meta name="Robots" content="index, follow" />
<style type="text/css">
*{
	margin:0px;
	padding:0px;
	outline:0;
}
html,body{
	width:100%;
	height:100%;
}
#contenedor1{
	width:50%;
	position:relative;
	height: auto!important;
	min-height:100%;
	height:100%;
	background-color:#ca0000;
	float:left;
}
#contenedor2{
	width:50%;
	position:relative;
	height: auto!important;
	min-height:100%;
	height:100%;
	background-color:#cac0c0;
	float:right;
}
</style>
</head>

<body>
<div id="contenedor1">
tata
</div>
<div id="contenedor2">
	<iframe id="myframe" name="myframe" width="100%" src="disco/rightside.php" frameborder="NO" border="0" framespacing="0"></iframe>
</div>
</body>
</html>

Obviamente ya te habían contestado anteriormente (CaLiZzZ) y tenía toda la razón.
Aclaraciones y preguntas:
1. desde el punto de vista del CSS lo he testeado y no hay problemas.
2. el iframe da problemas el el testeo del xhtml estricto, hay varias propiedades que no se pueden utilizar, que imagino que en las hojas de estilo se podrían arreglar como la propiedad width. Pero hay otras propiedades de las que no se pueden prescindir id,name, y que no son admitidas y de las que no veo fácil solución. ¿alguna sugerencia además de cambiar el tipo de documento de estricto a transicional?

Calizman · #6 (**permalink**) 18/04/2009, 12:06

Cita:

2. el iframe da problemas el el testeo del xhtml estricto, hay varias propiedades que no se pueden utilizar, que imagino que en las hojas de estilo se podrían arreglar como la propiedad width. Pero hay otras propiedades de las que no se pueden prescindir id,name, y que no son admitidas y de las que no veo fácil solución. ¿alguna sugerencia además de cambiar el tipo de documento de estricto a transicional?

Creo que (para mi) el cambiar de Strict a Transitional, no es una opcion... Transitional es algo casi obsoleto que no podemos darnos el lujo de querer recuperar. Asi que lo que yo propongo, es que hagas tu web con otra cosa que no sean iframes. Creo que XHTML tiene suficientes herramientas como para seguir usando los frames / iframes... Pero bueno... sea como sea es nada mas mi opinion no?

De ahi, el que quiera usarlos... que los use, y el que no, bienvenido al club...

tokero · #7 (**permalink**) 20/04/2009, 02:29

Muy buenas a todos y gracias por sus aportes.

El problema ya esta resuelto...

Tal y como CaliZzZ me indicó en su respuesta, todo quedaba solucionado metiendo el iFrame de la información dentro de un <div>

#generalBody{
width: 800px;
position: relative;
background-color: white;
float: left;
clear: left;

}

y todo resuelto, el clear left consigue que el iFrame de la información contenido dentro de esta div, se recoloque a al izquierda sin afectar a ninguno de los otros.

Un saludo y gracias de nuevo por su ayuda!!!

P.D:
CaliZzZ, le di las propiedades que me pusistes a la división general #main, quite el posicionamiento left: 50% y el magin-left: -500px y coloque el que tu me dijiste:
margin: 0px auto;

Pero se me quedaba pegado a la izquierda, asique lo deje como estaba... de todas maneras... como influye el Doctype en todo esto??
Le heche un vistazo al enlace que me pusiste de Doctype's... pero muy por encima.

Calizman · #8 (**permalink**) 20/04/2009, 09:19

Te resumo la funcion del DOCTYPE con una cita de Documentoweb.com

Cita:

Si queremos cumplir la misión de la W3C "guiar la web hacia su máximo potencial a través del desarrollo de estándares", necesitamos crear nuestros documentos con el formato estándar XHTML, es decir, con la extensión del lenguaje de marcado hipertextual ("eXtensible HyperText Markup Language").

Entonces... El Doctype te ayuda a hacer mejor tu pagina web, es como si te elevara el estandar de trabajo. Y el Doctype Strict no te permite errores en el HTML para que hagas una mejor web.

Me parece raro que no te funcionara el margin: 0px auto; ya que es la forma verdadera de centrar un div, pero seguramente fue algun problema de tamaños o de el div padre.

Sea como sea, que bien que has podido solucionar tu problema. Siempre es bueno poder ayudar a la comunidad...

Hasta Luego!!