PROBLEMAS IFRAME DESFASADO o fuera de lugar

eljonus · #1 (**permalink**) 25/09/2009, 12:44

Hola, vengo del foro de php que me dijeron que evacue la duda aqui q seguro me van a ayudar
estoy haciendo una pagina, en realidad tome un template y lo estoy modificando de cero, el problema surgio cuando dentro de mi html agregue in iframe, el iframe aparaece perfectamente pero desfazado o fuera del contenido o del div. para probar escribi algo en el sidebar y el contenedor div bajo pero iframe queda afuera horrible, es como si dentro del div nunca puse el iframe.

les dejos la dire para que vean. no critiquen que esta mal puesta en el hosting, solo lo cuelgo asin para poder mostrarles lo q voy haciendo...

Gracias a los genios q me saquen de este problemita.

esta es la dire para que vean como queda.

www(punto)elsaenglerpinturas(punto)com(punto)ar/index1.php

deirdre · #2 (**permalink**) 25/09/2009, 18:33

Hola

Mira estos arreglos, tanto en el html como en css. Hazte un copy-paste de los dos archivos y prueba si esto te arregla el problema:

index1.php

Código HTML:

<!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>Pagina de eljonus</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="contenido"><!--Comienza Contenido-->
	<div id="header"><!--Comienza Header-->
		<div id="imagen-header"><!--Comienza imagen header-->
    	</div><!--Termina imagen-header-->
            	 <div id="menu"><!--Empieza menu-->
               		<ul>
                    <li class="current_page_item"><a href="#">Inicio</a></li>
                    <li><a href="#">Pinturas</a></li>
                    <li><a href="#">Perfil</a></li>
                    <li><a href="#">Links</a></li>
                    <li><a href="contacto/contact.php" rel="facebox">Contacto</a></li>
            		</ul>
               	 </div><!--Termina MENU-->
	</div><!--Termina Header-->
    
<div id="centro"><!--Comienza centro-->
	<div id="contenido-izquierda"><!--Comienza contenido izquierda-->
		<iframe width="700" height="700" src="simpleviewer/galeriavisor.php" id="ifra" name="ifra" frameborder="0"></iframe>
	</div><!--Termina contenido izquierda-->
	<div id="sidebar"><!--Comienza sidebar-->
		<p>Contenido del Sidebar</p>
	</div><!--Termina sidebar--> 
</div><!--Termina Centro-->

<div id="footer"><!--Comienza footer-->
	<p>Copyright (c) 2009 JonDesign.com.ar Derechos Reservados. Dise&ntilde;os <a href="http://www.JonDesign.com.ar/">Jon Design</a>.</p>
</div><!--Termina footer-->

</div><!--Termina Contenido-->

</body>
</html>

style1.css:

Código HTML:

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	outline: none;
}
body {
	margin: 0;
	padding: 0;
	background: #1B120B;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #787878;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #181818;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #B94E0E;
}

a:hover {
}


#contenido {
	padding: 0;
	margin: auto;
	background: url(images/img05.jpg) repeat-x left top;
}

#imagen-header {
	width: 960px;
	height: 240px;
	margin: auto;
	background: url(images/img02.jpg) no-repeat left top;
}


#menu {
	float: none;
	width: 960px;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	background: url(images/img03.jpg) repeat-x left top;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 25px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	height: 18px;
	margin-right: 3px;
	padding: 12px 40px 0px 40px;
	background: url(images/img06.jpg) no-repeat right 10px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
}

#menu .current_page_item a {
	padding-left: 0;
}

#menu a:hover {
	text-decoration: underline;
}

#centro {
	/*margin-bottom: 20px;*/
	position: relative;
	width: 960px;
	height: 708px;
	margin: 0 auto;
	background: url(images/img04.jpg) repeat-y left top;
	border: 0px solid #fff; /*para tests*/
}

#contenido-izquierda {
	position: absolute;
	top: 0px;
	left: 0px;
	/*float: left;*/
	display: block;
	/*width: 700px;*/
	/*margin-top: 5px;*/
	/*margin-bottom: 10px;*/
	/*margin-right: 6px;*/
	padding-left: 14px;
	padding-top: 4px;
	border: 0px solid #fff; /*para tests*/
}
#ifra {
	margin: 0;
	padding: 0;
}
.post {
}

.post .title {
	height: 38px;
	padding: 12px 0 0 20px;
	letter-spacing: -.5px;
	color: #181818;
}

.post .title a {
	color: #181818;
	border: none;
}

.post .meta {
	margin-top: -10px;
	padding-bottom: 5px;
	padding-left: 20px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: italic;
}

.post .meta a {
}

.post .entry {
	text-align: justify;
	margin-bottom: 25px;
	padding: 30px 20px 10px 20px;
}

.links {
	display: block;
	width: 130px;
	margin: 20px 0px;
	padding: 5px;
	background: #A03128;
	border-left: 20px solid #1B120B;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	color: #FFFFFF;
}

/* Sidebar */

#sidebar {
	position: absolute;
	top: 5px;
	right: 10px;
	/*float: right;*/
	display: block;
	width: 210px;
	height: auto;
	padding: 0px 15px 0px 0px;
	color: #787878;
	border: 0px solid #ccc; /*para tests*/
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 0px;
}

#sidebar li li {
	line-height: 20px;
	border-bottom: 1px dashed #808080;
	padding-left: 40px;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	height: 30px;
	padding: 10px 0 0 30px;
	letter-spacing: -.5px;
	color: #181818;
}

#sidebar p {
	margin: 0 0px;
	padding: 0px 10px 0px 20px;
	text-align: justify;
}

#sidebar a {
	border: none;
	color: #B94E0E;
}

#sidebar a:hover {
	text-decoration: underline;
}


#footer {
	clear: both;
	margin: 0 auto;
	width: 960px;
	height: 100px;
	background: url(images/img01.jpg) repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 40px;
	line-height: normal;
	font-size: 9px;
	text-transform: uppercase;
	text-align: center;
	color: #D78983;
}

#footer a {
	color: #FFDBD9;
}

Sólo es una aproximación al problema. Debes ajustar y refinar.

Esperando comentario...

Bye

deirdre · #3 (**permalink**) 25/09/2009, 18:48

Hola de nuevo...

Porqué no pones la galería directamente en el primer html, sin necesidad de utilizar el iframe y el otro html?

No tienes necesidad de utilizar un iframe y otra página para cargar la galería.

Bye

eljonus · #4 (**permalink**) 25/09/2009, 19:24

Cita:

Iniciado por deirdre

Hola de nuevo...

Porqué no pones la galería directamente en el primer html, sin necesidad de utilizar el iframe y el otro html?

No tienes necesidad de utilizar un iframe y otra página para cargar la galería.

Bye

y pense hacer eso,.- pero la galeria llevaba mas cosas y nose supongo que iba a hacer mas lio q antes... la que tenia pensado es ponerla en un include porque la idea para despues, es tener el menu por un lado, el sidebar por otro, el contenido por otro,.- y cuando quiera agregar algo no tenia q hacerlas en todas las paginas que haga, pero este iframe me volvia loco porque de desfazaba,.- lo habia solucionado solo usando un div con clear:both despues del cierre de contenido izquierdo... despues el codigo q me paaste anduvo tambien igualmente salio otro inconveniente pero esto es mas dificil,.- si te fijas,.- cuando hace clic en contactos,.- agregue con jquery un formulario de contacto pero sale atras del iframe...

Gracias por la ayuda y si no te jode podrias explicarme que hiciste con el codigo q no entendi . jejeje,.-

no te puedo pasar el codigo que habia hecho porque no me deja el foro pero me parece q la tuya esta mejor.

deirdre · #5 (**permalink**) 26/09/2009, 10:35

Hola eljonus

Si quieres te envío un zip con el conjunto (con iframe y sin él) y ahí podrás 'estudiar' el código fuente y ver los cambios. Si lo quieres puedes enviarme un privado con algún email y te lo adjunto.

Bye